feat(RN): 添加 babel-plugin-transform-jsx-to-stylesheet

lerna.json

@@ -27,7 +27,8 @@
     "packages/eslint-config-taro",
     "packages/eslint-plugin-taro",
     "packages/taro-transformer-wx",
-    "packages/postcss-pxtransform"
+    "packages/postcss-pxtransform",
+    "packages/babel-plugin-transform-jsx-to-stylesheet"
   ],
   "command": {
     "publish": {

packages/babel-plugin-transform-jsx-to-stylesheet/README.md

@@ -0,0 +1,154 @@
+# babel-plugin-transform-jsx-stylesheet
+> Transform StyleSheet selector to style in JSX Elements.
+
+## Installation
+
+```sh
+npm install --save-dev babel-plugin-transform-jsx-stylesheet
+```
+
+## Usage
+
+### Via `.babelrc`
+
+**.babelrc**
+
+```json
+{
+  "plugins": ["transform-jsx-stylesheet"]
+}
+```
+
+## Example
+
+Your `component.js` that contains this code:
+
+```js
+import { createElement, Component } from 'rax';
+import './app.css';
+
+class App extends Component {
+  render() {
+    return <div className="header" />
+  }
+}
+```
+
+Will be transpiled into something like this:
+
+```js
+import { createElement, Component } from 'rax';
+import appStyleSheet from './app.css';
+
+class App extends Component {
+  render() {
+    return <div style={styleSheet.header} />;
+  }
+}
+
+const styleSheet = appStyleSheet;
+```
+
+Can write multiple classNames like this:
+
+```js
+import { createElement, Component } from 'rax';
+import './app.css';
+
+class App extends Component {
+  render() {
+    return <div className="header1 header2" />;
+  }
+}
+```
+
+Will be transpiled into something like this:
+
+```js
+import { createElement, Component } from 'rax';
+import appStyleSheet from './app.css';
+
+class App extends Component {
+  render() {
+    return <div style={[styleSheet.header1, styleSheet.header2]} />;
+  }
+}
+
+const styleSheet = appStyleSheet;
+```
+
+Also support array, object and expressions like this: **（since 0.6.0）**
+
+```js
+import { createElement, Component } from 'rax';
+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:
+
+```js
+import { createElement, Component } from 'rax';
+import appStyleSheet from './app.css';
+
+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>
+    );
+  }
+}
+
+const styleSheet = appStyleSheet;
+function _getClassName() { /* codes */ }
+function _getStyle(className) {
+  return styleSheet[_getClassName(className)]; // not real code
+}
+```
+
+And can also import multiple css file:
+
+```js
+import { createElement, Component } from 'rax';
+import 'app1.css';
+import 'app2.css';
+
+class App extends Component {
+  render() {
+    return <div className="header1 header2" />;
+  }
+}
+```
+
+Will be transpiled into something like this:
+
+```js
+import { createElement, Component } from 'rax';
+import app1StyleSheet from 'app1.css';
+import app2StyleSheet from 'app2.css';
+
+class App extends Component {
+  render() {
+    return <div style={[styleSheet.header1, styleSheet.header2]} />;
+  }
+}
+
+const styleSheet = Object.assign({}, app1StyleSheet, app2StyleSheet);
+```

packages/babel-plugin-transform-jsx-to-stylesheet/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "babel-plugin-transform-jsx-to-stylesheet",
+  "version": "0.6.5",
+  "description": "Transform stylesheet selector to style in JSX Elements.",
+  "license": "MIT",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NervJS/taro.git"
+  },
+  "bugs": {
+    "url": "https://github.com/NervJS/taro/issues"
+  },
+  "homepage": "https://github.com/NervJS/taro#readme",
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.23.1",
+    "babel-plugin-syntax-jsx": "^6.18.0"
+  },
+  "dependencies": {
+    "camelcase": "^3.0.0"
+  }
+}