babel-plugin-transform-react-jsx-to-rn-stylesheet 3.7.0-alpha.2 → 3.7.0-alpha.4

package/__tests__/__snapshots__/index.spec.js.snap

@@ -4,12 +4,10 @@ exports[`jsx style plugin Processing module style assignment When css module ena
 "import { createElement, Component } from 'rax';
 import _appScssStyleSheet from "./app.scss";
 import _styleSheetModuleStyle from './app.module.scss';
-
 function _getClassName() {
   var className = [];
   var args = arguments[0];
   var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();
-
   if (type === 'string') {
     args = args.trim();
     args && className.push(args);
@@ -21,57 +19,43 @@ function _getClassName() {
   } else if (type === 'object') {
     for (var k in args) {
       k = k.trim();
-
       if (k && args.hasOwnProperty(k) && args[k]) {
         className.push(k);
       }
     }
   }
-
   return className.join(' ').trim();
 }
-
 function _getStyle(classNameExpression) {
   var className = _getClassName(classNameExpression);
-
   var classNameArr = className.split(/\\s+/);
   var style = {};
   classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
   return style;
 }
-
 function _getModuleClassName(moduleStyle, styleId) {
   return Object.keys(moduleStyle).reduce((pre, cur) => Object.assign(pre, {
     [cur]: styleId + '-' + cur
   }), {});
 }
-
 var styleSheet = _getModuleClassName(_styleSheetModuleStyle, 'styleSheet');
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_appScssStyleSheet, ""], [_styleSheetModuleStyle, "styleSheet"]);
-
 class App extends Component {
   render() {
     const a = styleSheet.red;
     return <div style={_getStyle(a)} />;
   }
-
 }"
 `;
 
@@ -79,12 +63,10 @@ exports[`jsx style plugin Processing module style conditional expression When cs
 "import { createElement, Component } from 'rax';
 import _appScssStyleSheet from "./app.scss";
 import _styleSheetModuleStyle from './app.module.scss';
-
 function _getClassName() {
   var className = [];
   var args = arguments[0];
   var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();
-
   if (type === 'string') {
     args = args.trim();
     args && className.push(args);
@@ -96,57 +78,43 @@ function _getClassName() {
   } else if (type === 'object') {
     for (var k in args) {
       k = k.trim();
-
       if (k && args.hasOwnProperty(k) && args[k]) {
         className.push(k);
       }
     }
   }
-
   return className.join(' ').trim();
 }
-
 function _getStyle(classNameExpression) {
   var className = _getClassName(classNameExpression);
-
   var classNameArr = className.split(/\\s+/);
   var style = {};
   classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
   return style;
 }
-
 function _getModuleClassName(moduleStyle, styleId) {
   return Object.keys(moduleStyle).reduce((pre, cur) => Object.assign(pre, {
     [cur]: styleId + '-' + cur
   }), {});
 }
-
 var styleSheet = _getModuleClassName(_styleSheetModuleStyle, 'styleSheet');
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_appScssStyleSheet, ""], [_styleSheetModuleStyle, "styleSheet"]);
-
 class App extends Component {
   render() {
     const a = 1 ? styleSheet.red : styleSheet.blue;
     return <div style={_getStyle(a)} />;
   }
-
 }"
 `;
 
@@ -154,12 +122,10 @@ exports[`jsx style plugin Processing module style spread and assign When css mod
 "import { createElement, Component } from 'rax';
 import _appScssStyleSheet from "./app.scss";
 import _styleSheetModuleStyle from './app.module.scss';
-
 function _getClassName() {
   var className = [];
   var args = arguments[0];
   var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();
-
   if (type === 'string') {
     args = args.trim();
     args && className.push(args);
@@ -171,72 +137,58 @@ function _getClassName() {
   } else if (type === 'object') {
     for (var k in args) {
       k = k.trim();
-
       if (k && args.hasOwnProperty(k) && args[k]) {
         className.push(k);
       }
     }
   }
-
   return className.join(' ').trim();
 }
-
 function _getStyle(classNameExpression) {
   var className = _getClassName(classNameExpression);
-
   var classNameArr = className.split(/\\s+/);
   var style = {};
   classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
   return style;
 }
-
 function _getModuleClassName(moduleStyle, styleId) {
   return Object.keys(moduleStyle).reduce((pre, cur) => Object.assign(pre, {
     [cur]: styleId + '-' + cur
   }), {});
 }
-
 var styleSheet = _getModuleClassName(_styleSheetModuleStyle, 'styleSheet');
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_appScssStyleSheet, ""], [_styleSheetModuleStyle, "styleSheet"]);
-
 class App extends Component {
   render() {
-    const a = { ...styleSheet.red
+    const a = {
+      ...styleSheet.red
     };
     const b = a;
-    return <div style={_getStyle({ ...b
+    return <div style={_getStyle({
+      ...b
     })} />;
   }
-
 }"
 `;
 
 exports[`jsx style plugin Processing module style through call expression When css module enable 1`] = `
 "import { createElement, Component } from 'rax';
 import _styleSheetModuleStyle from './app.module.scss';
-
 function _getClassName() {
   var className = [];
   var args = arguments[0];
   var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();
-
   if (type === 'string') {
     args = args.trim();
     args && className.push(args);
@@ -248,58 +200,44 @@ function _getClassName() {
   } else if (type === 'object') {
     for (var k in args) {
       k = k.trim();
-
       if (k && args.hasOwnProperty(k) && args[k]) {
         className.push(k);
       }
     }
   }
-
   return className.join(' ').trim();
 }
-
 function _getStyle(classNameExpression) {
   var className = _getClassName(classNameExpression);
-
   var classNameArr = className.split(/\\s+/);
   var style = {};
   classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
   return style;
 }
-
 function _getModuleClassName(moduleStyle, styleId) {
   return Object.keys(moduleStyle).reduce((pre, cur) => Object.assign(pre, {
     [cur]: styleId + '-' + cur
   }), {});
 }
-
 var styleSheet = _getModuleClassName(_styleSheetModuleStyle, 'styleSheet');
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_styleSheetModuleStyle, "styleSheet"]);
-
 class App extends Component {
   render() {
     const a = Object.assign({}, styleSheet.red);
     const b = Object.assign({}, a);
     return <div style={_getStyle(a)}><span style={_getStyle(b)} /><span style={_getStyle(Object.assign({}, b))} /></div>;
   }
-
 }"
 `;
 
@@ -307,12 +245,10 @@ exports[`jsx style plugin Processing multiple module style When css module enabl
 "import { createElement, Component } from 'rax';
 import _styleSheetModuleStyle from './app.module.scss';
 import _styleSheet2ModuleStyle from './app2.module.scss';
-
 function _getClassName() {
   var className = [];
   var args = arguments[0];
   var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();
-
   if (type === 'string') {
     args = args.trim();
     args && className.push(args);
@@ -324,71 +260,54 @@ function _getClassName() {
   } else if (type === 'object') {
     for (var k in args) {
       k = k.trim();
-
       if (k && args.hasOwnProperty(k) && args[k]) {
         className.push(k);
       }
     }
   }
-
   return className.join(' ').trim();
 }
-
 function _getStyle(classNameExpression) {
   var className = _getClassName(classNameExpression);
-
   var classNameArr = className.split(/\\s+/);
   var style = {};
   classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
   return style;
 }
-
 function _getModuleClassName(moduleStyle, styleId) {
   return Object.keys(moduleStyle).reduce((pre, cur) => Object.assign(pre, {
     [cur]: styleId + '-' + cur
   }), {});
 }
-
 var styleSheet = _getModuleClassName(_styleSheetModuleStyle, 'styleSheet');
-
 var styleSheet2 = _getModuleClassName(_styleSheet2ModuleStyle, 'styleSheet2');
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_styleSheetModuleStyle, "styleSheet"], [_styleSheet2ModuleStyle, "styleSheet2"]);
-
 class App extends Component {
   render() {
     const a = styleSheet.red;
     return <div style={_getStyle(\`\${a} \${styleSheet2.b}\`)} />;
   }
-
 }"
 `;
 
 exports[`jsx style plugin Provide a default stylesheet object when css module enable and import css module sheet only 1`] = `
 "import { createElement, Component } from 'rax';
 import _styleSheetModuleStyle from './app.module.scss';
-
 function _getClassName() {
   var className = [];
   var args = arguments[0];
   var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();
-
   if (type === 'string') {
     args = args.trim();
     args && className.push(args);
@@ -400,51 +319,38 @@ function _getClassName() {
   } else if (type === 'object') {
     for (var k in args) {
       k = k.trim();
-
       if (k && args.hasOwnProperty(k) && args[k]) {
         className.push(k);
       }
     }
   }
-
   return className.join(' ').trim();
 }
-
 function _getStyle(classNameExpression) {
   var className = _getClassName(classNameExpression);
-
   var classNameArr = className.split(/\\s+/);
   var style = {};
   classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
   return style;
 }
-
 function _getModuleClassName(moduleStyle, styleId) {
   return Object.keys(moduleStyle).reduce((pre, cur) => Object.assign(pre, {
     [cur]: styleId + '-' + cur
   }), {});
 }
-
 var styleSheet = _getModuleClassName(_styleSheetModuleStyle, 'styleSheet');
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_styleSheetModuleStyle, "styleSheet"]);
-
 class App extends Component {
   render() {
     return <div>
@@ -452,27 +358,22 @@ class App extends Component {
       <div style={_styleSheet["red"]} />
     </div>;
   }
-
 }"
 `;
 
 exports[`jsx style plugin combine inline style object and className 1`] = `
 "import { createElement, Component } from 'rax';
 import _appCssStyleSheet from "./app.css";
-
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
 }
-
 var _styleSheet = _appCssStyleSheet;
-
 class App extends Component {
   render() {
     return <div style={_mergeEleStyles(_styleSheet["header"], {
       height: 100
     })} />;
   }
-
 }"
 `;
 
@@ -480,34 +381,25 @@ exports[`jsx style plugin combine multiple anonymous css file 1`] = `
 "import { createElement, Component } from 'rax';
 import _app1CssStyleSheet from "./app1.css";
 import _app2CssStyleSheet from "./app2.css";
-
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
 }
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_app1CssStyleSheet, ""], [_app2CssStyleSheet, ""]);
-
 class App extends Component {
   render() {
     return <div style={_mergeEleStyles(_styleSheet["header1"], _styleSheet["header2"])} />;
   }
-
 }"
 `;
 
@@ -517,25 +409,18 @@ import _indexCssStyleSheet from "./index.css";
 import _indexScssStyleSheet from "./index.scss";
 import _indexLessStyleSheet from "../index.less";
 import styl from "./index.styl";
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_indexCssStyleSheet, ""], [_indexScssStyleSheet, ""], [_indexLessStyleSheet, ""], [styl, ""]);
-
 render(<div style={_styleSheet["header"]} />);"
 `;
 
@@ -543,34 +428,25 @@ exports[`jsx style plugin combine multiple styles and className 1`] = `
 "import { createElement, Component } from 'rax';
 import _appCssStyleSheet from "./app.css";
 import style from "./style.css";
-
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
 }
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_appCssStyleSheet, ""], [style, ""]);
-
 class App extends Component {
   render() {
     return <div style={_mergeEleStyles(_styleSheet["header2"], style.header1, style.header3)} />;
   }
-
 }"
 `;
 
@@ -578,34 +454,25 @@ exports[`jsx style plugin combine one style and className 1`] = `
 "import { createElement, Component } from 'rax';
 import _appCssStyleSheet from "./app.css";
 import style from "./style.css";
-
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
 }
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_appCssStyleSheet, ""], [style, ""]);
-
 class App extends Component {
   render() {
     return <div style={_mergeEleStyles(_styleSheet["header2"], style.header1)} />;
   }
-
 }"
 `;
 
@@ -614,34 +481,25 @@ exports[`jsx style plugin combine the same filename style source 1`] = `
 import _appCssStyleSheet from "./app.css";
 import _appCssStyleSheet2 from "../a/app.css";
 import _appCssStyleSheet3 from "../b/app.css";
-
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
 }
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_appCssStyleSheet, ""], [_appCssStyleSheet2, ""], [_appCssStyleSheet3, ""]);
-
 class App extends Component {
   render() {
     return <div style={_mergeEleStyles(_styleSheet["header1"], _styleSheet["header2"])} />;
   }
-
 }"
 `;
 
@@ -649,12 +507,10 @@ exports[`jsx style plugin disableMultipleClassName and transform multiple classN
 "import { createElement, Component } from 'rax';
 import _appCssStyleSheet from "./app.css";
 var _styleSheet = _appCssStyleSheet;
-
 class App extends Component {
   render() {
     return <div headerClassName="header" style={_styleSheet["container"]} />;
   }
-
 }"
 `;
 
@@ -662,12 +518,10 @@ exports[`jsx style plugin enableMultipleClassName and transform error css value
 "import { createElement, Component } from 'rax';
 import _appCssStyleSheet from "./app.css";
 var _styleSheet = _appCssStyleSheet;
-
 class App extends Component {
   render() {
     return <StatusBar barStyle={"dark-content"} />;
   }
-
 }"
 `;
 
@@ -675,25 +529,20 @@ exports[`jsx style plugin enableMultipleClassName and transform multiple classNa
 "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"]} />;
   }
-
 }"
 `;
 
 exports[`jsx style plugin enableMultipleClassName and transform multiple className to multiple style as array 1`] = `
 "import { createElement, Component } from 'rax';
 import _appCssStyleSheet from "./app.css";
-
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
 }
-
 var _styleSheet = _appCssStyleSheet;
-
 class App extends Component {
   render() {
     return <div style={_mergeEleStyles(_styleSheet["container"], {
@@ -702,7 +551,6 @@ class App extends Component {
       color: "green"
     })} />;
   }
-
 }"
 `;
 
@@ -710,46 +558,35 @@ exports[`jsx style plugin merge stylesheet when css module disable 1`] = `
 "import { createElement, Component } from 'rax';
 import _appScssStyleSheet from "./app.scss";
 import styleSheet from "./app.module.scss";
-
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
 }
-
 function _mergeStyles() {
   var newTarget = {};
-
   for (var index = 0; index < arguments.length; index++) {
     var [styleSheet, rawStyleName] = arguments[index];
-
     for (var key in styleSheet) {
       const _key = rawStyleName ? rawStyleName + '-' + key : key;
-
       newTarget[_key] = Object.assign(newTarget[_key] || {}, styleSheet[key]);
     }
   }
-
   return newTarget;
 }
-
 var _styleSheet = _mergeStyles([_appScssStyleSheet, ""], [styleSheet, ""]);
-
 class App extends Component {
   render() {
     return <div style={_mergeEleStyles(_styleSheet["header"], styleSheet.red)} />;
   }
-
 }"
 `;
 
 exports[`jsx style plugin transform array, object and expressions 1`] = `
 "import { createElement, Component } from 'rax';
 import _appCssStyleSheet from "./app.css";
-
 function _getClassName() {
   var className = [];
   var args = arguments[0];
   var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();
-
   if (type === 'string') {
     args = args.trim();
     args && className.push(args);
@@ -761,27 +598,21 @@ function _getClassName() {
   } else if (type === 'object') {
     for (var k in args) {
       k = k.trim();
-
       if (k && args.hasOwnProperty(k) && args[k]) {
         className.push(k);
       }
     }
   }
-
   return className.join(' ').trim();
 }
-
 function _getStyle(classNameExpression) {
   var className = _getClassName(classNameExpression);
-
   var classNameArr = className.split(/\\s+/);
   var style = {};
   classNameArr.reduce((sty, cls) => Object.assign(sty, _styleSheet[cls.trim()]), style);
   return style;
 }
-
 var _styleSheet = _appCssStyleSheet;
-
 class App extends Component {
   render() {
     return <div style={_styleSheet["header"]}>
@@ -795,7 +626,6 @@ class App extends Component {
       <div style={_getStyle(getClassName())} />
     </div>;
   }
-
 }"
 `;
 
@@ -816,18 +646,14 @@ render(<div style={_styleSheet["header"]} />);"
 exports[`jsx style plugin transform multiple classNames to style as array 1`] = `
 "import { createElement, Component } from 'rax';
 import _appCssStyleSheet from "./app.css";
-
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
 }
-
 var _styleSheet = _appCssStyleSheet;
-
 class App extends Component {
   render() {
     return <div style={_mergeEleStyles(_styleSheet["header1"], _styleSheet["header2"])} />;
   }
-
 }"
 `;
 
@@ -835,12 +661,10 @@ exports[`jsx style plugin transform only one className to style as member 1`] =
 "import { createElement, Component } from 'rax';
 import _appCssStyleSheet from "./app.css";
 var _styleSheet = _appCssStyleSheet;
-
 class App extends Component {
   render() {
     return <div style={_styleSheet["header"]} />;
   }
-
 }"
 `;
 
@@ -848,12 +672,10 @@ exports[`jsx style plugin transform scss file 1`] = `
 "import { createElement, Component } from 'rax';
 import _appScssStyleSheet from "./app.scss";
 var _styleSheet = _appScssStyleSheet;
-
 class App extends Component {
   render() {
     return <div style={_styleSheet["header"]} />;
   }
-
 }"
 `;
 
@@ -861,23 +683,19 @@ exports[`jsx style plugin transform scss file with hyphen(-) in the filename 1`]
 "import { createElement, Component } from 'rax';
 import _appStyleScssStyleSheet from "./app-style.scss";
 var _styleSheet = _appStyleScssStyleSheet;
-
 class App extends Component {
   render() {
     return <div style={_styleSheet["header"]} />;
   }
-
 }"
 `;
 
 exports[`jsx style plugin transform styleAttribute expression 1`] = `
 "import { createElement, render } from 'rax';
 import _appLessStyleSheet from "./app.less";
-
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
 }
-
 var _styleSheet = _appLessStyleSheet;
 render(<div style={_mergeEleStyles(_styleSheet["header"], {
   width: 100,
@@ -888,11 +706,9 @@ render(<div style={_mergeEleStyles(_styleSheet["header"], {
 exports[`jsx style plugin transform styleAttribute inline string and exsit classNameAttribute 1`] = `
 "import { createElement, render } from 'rax';
 import _appLessStyleSheet from "./app.less";
-
 function _mergeEleStyles() {
   return [].concat.apply([], arguments).reduce((pre, cur) => Object.assign(pre, cur), {});
 }
-
 var _styleSheet = _appLessStyleSheet;
 render(<div style={_mergeEleStyles(_styleSheet["header"], {
   "width": 100,

package/__tests__/index.spec.js

@@ -4,7 +4,7 @@ import syntaxJSX from 'babel-plugin-syntax-jsx'
 import jSXStylePlugin from '../src/index'
 
 describe('jsx style plugin', () => {
-  function getTransfromCode (source, debug = false, options = {}) {
+  function getTransformCode (source, debug = false, options = {}) {
     const { enableCSSModule, enableMultipleClassName = false } = options
     const code = transform(source, {
       plugins: [[jSXStylePlugin, { enableCSSModule, enableMultipleClassName }], syntaxJSX],
@@ -20,7 +20,7 @@ describe('jsx style plugin', () => {
   }
 
   it('no stylesheet import', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 
 class App extends Component {
@@ -28,17 +28,15 @@ class App extends Component {
     return <div className="header" />;
   }
 }`)).toBe(`import { createElement, Component } from 'rax';
-
 class App extends Component {
   render() {
     return <div className="header" />;
   }
-
 }`)
   })
 
   it('transform only one className to style as member', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 
@@ -50,7 +48,7 @@ class App extends Component {
   })
 
   it('transform multiple classNames to style as array', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 
@@ -62,7 +60,7 @@ class App extends Component {
   })
 
   it('transform array, object and expressions', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 
@@ -79,7 +77,7 @@ class App extends Component {
   })
 
   it('combine multiple anonymous css file', () => {
-    expect(getTransfromCode(`import { createElement, Component } from 'rax';
+    expect(getTransformCode(`import { createElement, Component } from 'rax';
 import './app1.css';
 import './app2.css';
 
@@ -91,7 +89,7 @@ class App extends Component {
   })
 
   it('combine the same filename style source', () => {
-    expect(getTransfromCode(`import { createElement, Component } from 'rax';
+    expect(getTransformCode(`import { createElement, Component } from 'rax';
 import './app.css';
 import '../a/app.css';
 import '../b/app.css';
@@ -104,7 +102,7 @@ class App extends Component {
   })
 
   it('combine one style and className', () => {
-    expect(getTransfromCode(`import { createElement, Component } from 'rax';
+    expect(getTransformCode(`import { createElement, Component } from 'rax';
 import './app.css';
 import style from './style.css';
 
@@ -116,7 +114,7 @@ class App extends Component {
   })
 
   it('combine inline style object and className', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import "./app.css";
 
@@ -130,7 +128,7 @@ class App extends Component {
   })
 
   it('combine multiple styles and className', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 import style from './style.css';
@@ -142,20 +140,19 @@ class App extends Component {
 }`)).toMatchSnapshot()
   })
 
-  it('do not transfrom code when no css file', () => {
+  it('do not transform code when no css file', () => {
     const code = `import { createElement, Component } from 'rax';
-
 class App extends Component {
   render() {
     return <div className="header" />;
-  }\n
+  }
 }`
 
-    expect(getTransfromCode(code)).toBe(code)
+    expect(getTransformCode(code)).toBe(code)
   })
 
   it('transform scss file', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.scss';
 
@@ -167,7 +164,7 @@ class App extends Component {
   })
 
   it('transform scss file with hyphen(-) in the filename', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app-style.scss';
 
@@ -179,7 +176,7 @@ class App extends Component {
   })
 
   it('transform constant elements in render', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import './app.css';
 
@@ -188,7 +185,7 @@ render(<div className="header" />);
   })
 
   it('transform stylus in render', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import './app.styl';
 
@@ -197,7 +194,7 @@ render(<div className="header" />);
   })
 
   it('transform less in render', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import './app.less';
 
@@ -206,7 +203,7 @@ render(<div className="header" />);
   })
 
   it('combine multiple different extension style sources', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import './index.css'
 import './index.scss'
@@ -217,7 +214,7 @@ render(<div className="header" />);
 `)).toMatchSnapshot()
   })
   it('transform styleAttribute expression', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import './app.less';
 
@@ -225,7 +222,7 @@ render(<div className="header" style={{width: 100, height: 100}} />);
 `)).toMatchSnapshot()
   })
   it('transform styleAttribute inline string', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 
 render(<div style="width:100px;height:100px;background-color:rgba(0, 0, 0, 0.5);border: 1px solid;" />);
@@ -241,7 +238,7 @@ render(<div style={{
   })
 
   it('transform styleAttribute inline string and exsit classNameAttribute', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, render } from 'rax';
 import './app.less';
 render(<div className="header" style="width:100px;height:100px;background-color:rgba(0, 0, 0, 0.5);border: 1px solid;" />);
@@ -249,7 +246,7 @@ render(<div className="header" style="width:100px;height:100px;background-color:
   })
 
   it('Provide a default stylesheet object when css module enable and import css module sheet only', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import styleSheet from './app.module.scss';
 
@@ -264,7 +261,7 @@ class App extends Component {
   })
 
   it('Processing module style assignment When css module enable', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.scss';
 import styleSheet from './app.module.scss';
@@ -278,7 +275,7 @@ class App extends Component {
   })
 
   it('Processing multiple module style When css module enable', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import styleSheet from './app.module.scss';
 import styleSheet2 from './app2.module.scss';
@@ -292,7 +289,7 @@ class App extends Component {
   })
 
   it('Processing module style spread and assign When css module enable', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.scss';
 import styleSheet from './app.module.scss';
@@ -307,7 +304,7 @@ class App extends Component {
   })
 
   it('Processing module style conditional expression When css module enable', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.scss';
 import styleSheet from './app.module.scss';
@@ -321,7 +318,7 @@ class App extends Component {
   })
 
   it('Processing module style through call expression When css module enable', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import styleSheet from './app.module.scss';
 
@@ -335,7 +332,7 @@ class App extends Component {
   })
 
   it('merge stylesheet when css module disable', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.scss';
 import styleSheet from './app.module.scss';
@@ -348,7 +345,7 @@ class App extends Component {
   })
 
   it('disableMultipleClassName and transform multiple className to multiple style', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 
@@ -360,7 +357,7 @@ class App extends Component {
   })
 
   it('enableMultipleClassName and transform multiple className to multiple style', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 
@@ -372,7 +369,7 @@ class App extends Component {
   })
 
   it('enableMultipleClassName and transform multiple className to multiple style as array', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 
@@ -384,7 +381,7 @@ class App extends Component {
   })
 
   it('enableMultipleClassName and transform error css value', () => {
-    expect(getTransfromCode(`
+    expect(getTransformCode(`
 import { createElement, Component } from 'rax';
 import './app.css';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-transform-react-jsx-to-rn-stylesheet",
-  "version": "3.7.0-alpha.2",
+  "version": "3.7.0-alpha.4",
   "description": "Transform stylesheet selector to style in JSX Elements.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "camelize": "^1.0.0",
-    "taro-css-to-react-native": "3.7.0-alpha.2"
+    "taro-css-to-react-native": "3.7.0-alpha.4"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",