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

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"
}]} />);
  }
}

camelize taro-css-to-react-native

@everything-registry/sub-chunk-1205 @infinitebrahmanuniverse/nolb-babel-plugin-t @rtarojs/rn-supporter @tarojs/rn-supporter @zalastax/nolb-babel-plugin-t @we-dynamic/build babel-preset-minifish babel-preset-taro-eazytec babel-preset-amap

3 days ago

4 days ago

4 days ago

5 days ago

5 days ago

6 days ago

6 days ago

8 days ago

8 days ago

12 days ago

11 days ago

11 days ago

12 days ago

14 days ago

15 days ago

16 days ago

16 days ago

17 days ago

19 days ago

23 days ago

23 days ago

23 days ago

25 days ago

25 days ago

25 days ago

26 days ago

26 days ago

27 days ago

27 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

9 months ago

6 months ago

3.6.19-nightly.2023112217

5 months ago

3.6.19-nightly.2023112223

5 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

6 months ago

8 months ago

7 months ago

7 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

7 months ago

7 months ago

7 months ago

10 months ago

10 months ago

10 months ago

5 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

6 months ago

6 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago