babel-plugin-transform-react-jsx-to-rn-stylesheet

Transform StyleSheet selector to style in JSX Elements.

Installation

npm install --save-dev babel-plugin-transform-react-jsx-to-rn-stylesheet

Usage

Via `.babelrc`

.babelrc

{
  "plugins": ["transform-react-jsx-to-rn-stylesheet"]
}

Example

Your component.js that contains this code:

import { Component } from 'react';
import './app.css';
class App extends Component {
  render() {
    return <div className="header" />
  }
}

Will be transpiled into something like this:

import { Component } from 'react';
import appCssStyleSheet from './app.css';

var _styleSheet = appCssStyleSheet;

class App extends Component {
  render() {
    return <div style={_styleSheet.header} />;
  }
}

Can write multiple classNames like this:

import { Component } from 'react';
import './app.css';

class App extends Component {
  render() {
    return <div className="header1 header2" />;
  }
}

Will be transpiled into something like this:

import {  Component } from 'react';
import appCssStyleSheet from './app.css';

var _styleSheet = appCssStyleSheet;

class App extends Component {
  render() {
    return <div style={[_styleSheet.header1, _styleSheet.header2]} />;
  }
}

Also support array, object and expressions like this:

import { Component } from 'react';
import './app.css';

class App extends Component {
  render() {
    return (
      <div className={'header'}>
        <div className={{ active: this.props.isActive }} />
        <div className={['header1 header2', 'header3', { active: this.props.isActive }]} />
        <div className={this.props.visible ? 'show' : 'hide'} />
        <div className={getClassName()} />
      </div>
    );
  }
}

Will be transpiled into something like this:

import { Component } from 'react';
import appCssStyleSheet from './app.css';
var _styleSheet = appCssStyleSheet;

class App extends Component {
  render() {
    return (
      <div style={_styleSheet.header}>
        <div style={_getStyle({ active: this.props.isActive })} />
        <div style={_getStyle(['header1 header2', 'header3', { active: this.props.isActive }])} />
        <div style={_getStyle(this.props.visible ? 'show' : 'hide')} />
        <div style={_getStyle(getClassName())} />
      </div>
    );
  }
}

function _getClassName() { /* codes */ }
function _getStyle(className) {
  return _styleSheet[_getClassName(className)]; // not real code
}

And can also import multiple css file:

import { Component } from 'react';
import 'app1.css';
import 'app2.css';

class App extends Component {
  render() {
    return <div className="header1 header2" />;
  }
}

Will be transpiled into something like this:

import { Component } from 'react';
import app1CssStyleSheet from "./app1.css";
import app2CssStyleSheet from "./app2.css";

class App extends Component {
  render() {
    return <div style={[_styleSheet.header1, _styleSheet.header2]} />;
  }
}

var _styleSheet = _mergeStyles(app1CssStyleSheet, app2CssStyleSheet);

also suport inline style value is string

import { createElement, render } from 'rax';
import './app.less';

class App extends Component {
  render(<div className="header" style="width:100px;height:100px;background-color:rgba(0, 0, 0, 0.5);border: 1px solid;" />);
}

  ↓ ↓ ↓ ↓ ↓ ↓

import { createElement, render } from 'rax';
import appLessStyleSheet from "./app.less";
var _styleSheet = appLessStyleSheet;

class App extends Component {
  render() {
    return <div style={[_styleSheet["header"], {
  "width": 100,
  "height": 100,
  "backgroundColor": "rgba(0, 0, 0, 0.5)",
  "borderWidth": 1,
  "borderColor": "black",
  "borderStyle": "solid"
}]} />);
  }
}

support multiple className to style

.babelrc


{
  "plugins": ["transform-react-jsx-to-rn-stylesheet", { enableMultipleClassName: true }]
}


import { createElement, Component } from 'rax';
import './app.css';

class App extends Component {
  render() {
    return <div className="container" headerClassName="header" />;
  }
}

/*  ↓ ↓ ↓ ↓ ↓ ↓  */

import { createElement, Component } from 'rax';
import appCssStyleSheet from "./app.css";
var _styleSheet = appCssStyleSheet;

class App extends Component {
  render() {
    return <div style={_styleSheet["container"]} headerStyle={_styleSheet["header"]} />;
  }

}

the enableMultipleClassName option will match 'attribute' end with 'className' | 'style', and transform className to style.

but use the error css value in style attribute

like this:


import { createElement, Component } from 'rax';
import './app.css';

class App extends Component {
  render() {
    return <StatusBar barStyle="dark-content" />;
  }
}

the plugin can't transform 'dark-content' to css value, so this transformation will be ignored

import { createElement, Component } from 'rax';
import appCssStyleSheet from "./app.css";
var _styleSheet = appCssStyleSheet;

class App extends Component {
  render() {
    return <StatusBar barStyle={"dark-content"} />;
  }

}

Current Tags

3.3.0-alpha.8 ... alpha (5 years ago)
3.4.0-beta.3 ... beta (4 years ago)
3.5.0-canary.0 ... canary (4 years ago)
3.4.1 ... latest (4 years ago)
3.3.0-alpha.0 ... next (5 years ago)

71 Versions

3.4.1 ... 4 years ago
3.4.0 ... 4 years ago
3.4.0-beta.3 ... 4 years ago
3.3.20 ... 4 years ago
3.3.19 ... 4 years ago
3.4.0-beta.2 ... 4 years ago
3.4.0-beta.1 ... 4 years ago
3.3.18 ... 4 years ago
3.3.17 ... 4 years ago
3.5.0-canary.0 ... 4 years ago
3.3.16 ... 4 years ago
3.4.0-beta.0 ... 4 years ago
3.3.15 ... 4 years ago
3.3.14 ... 4 years ago
3.3.13 ... 4 years ago
3.3.12 ... 4 years ago
3.3.11 ... 4 years ago
3.3.10 ... 4 years ago
3.3.9 ... 5 years ago
3.3.8 ... 5 years ago
3.3.7 ... 5 years ago
3.3.6 ... 5 years ago
3.3.5 ... 5 years ago
3.3.4 ... 5 years ago
3.3.3 ... 5 years ago
3.3.2 ... 5 years ago
3.3.1 ... 5 years ago
3.3.0 ... 5 years ago
3.3.0-beta.1 ... 5 years ago
3.2.16 ... 5 years ago
3.2.15 ... 5 years ago
3.2.14 ... 5 years ago
3.3.0-beta.0 ... 5 years ago
3.2.13 ... 5 years ago
3.3.0-alpha.8 ... 5 years ago
3.2.12 ... 5 years ago
3.2.11 ... 5 years ago
3.3.0-alpha.7 ... 5 years ago
3.3.0-alpha.6 ... 5 years ago
3.3.0-alpha.5 ... 5 years ago
3.2.10 ... 5 years ago
3.3.0-alpha.4 ... 5 years ago
3.2.9 ... 5 years ago
3.2.9-alpha.0 ... 5 years ago
3.2.8 ... 5 years ago
3.2.7 ... 5 years ago
3.2.6 ... 5 years ago
3.2.5 ... 5 years ago
3.2.4 ... 5 years ago
3.2.3 ... 5 years ago
3.3.0-alpha.2 ... 5 years ago
3.2.2 ... 5 years ago
3.3.0-alpha.1 ... 5 years ago
3.3.0-alpha.0 ... 5 years ago
3.2.1 ... 5 years ago
3.2.0 ... 5 years ago
3.2.0-beta.4 ... 5 years ago
3.2.0-beta.3 ... 5 years ago
3.2.0-beta.2 ... 5 years ago
3.2.0-beta.1 ... 5 years ago
3.2.0-beta.0 ... 5 years ago
3.2.0-canary.9 ... 5 years ago
3.2.0-canary.8 ... 5 years ago
3.2.0-canary.7 ... 5 years ago
3.2.0-canary.6 ... 5 years ago
3.2.0-canary.5 ... 5 years ago
3.2.0-canary.4 ... 5 years ago
3.2.0-canary.3 ... 5 years ago
3.2.0-canary.2 ... 5 years ago
3.2.0-canary.1 ... 5 years ago
3.2.0-canary.0 ... 5 years ago

babel-plugin-transform-react-jsx-to-rn-stylesheet

Installation

Usage

Via .babelrc

Example

Current Tags

71 Versions

Via `.babelrc`