babel-plugin-transform-react-jsx-to-rn-stylesheet 3.5.4-alpha.0 → 3.5.4-alpha.1

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

@@ -0,0 +1,660 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`jsx style plugin Processing module style assignment When css module enable 1`] = `
+"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);
+  } else if (type === 'array') {
+    args.forEach(function (cls) {
+      cls = _getClassName(cls).trim();
+      cls && className.push(cls);
+    });
+  } 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)} />;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin Processing module style conditional expression When css module enable 1`] = `
+"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);
+  } else if (type === 'array') {
+    args.forEach(function (cls) {
+      cls = _getClassName(cls).trim();
+      cls && className.push(cls);
+    });
+  } 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)} />;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin Processing module style spread and assign When css module enable 1`] = `
+"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);
+  } else if (type === 'array') {
+    args.forEach(function (cls) {
+      cls = _getClassName(cls).trim();
+      cls && className.push(cls);
+    });
+  } 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 b = a;
+    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);
+  } else if (type === 'array') {
+    args.forEach(function (cls) {
+      cls = _getClassName(cls).trim();
+      cls && className.push(cls);
+    });
+  } 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>;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin Processing multiple module style When css module enable 1`] = `
+"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);
+  } else if (type === 'array') {
+    args.forEach(function (cls) {
+      cls = _getClassName(cls).trim();
+      cls && className.push(cls);
+    });
+  } 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);
+  } else if (type === 'array') {
+    args.forEach(function (cls) {
+      cls = _getClassName(cls).trim();
+      cls && className.push(cls);
+    });
+  } 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>
+      <div style={_getStyle(styleSheet.header)} />
+      <div style={_styleSheet[\\"red\\"]} />
+    </div>;
+  }
+
+}"
+`;
+
+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\\"])} />;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin combine multiple different extension style sources 1`] = `
+"import { createElement, render } from 'rax';
+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\\"]} />);"
+`;
+
+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)} />;
+  }
+
+}"
+`;
+
+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)} />;
+  }
+
+}"
+`;
+
+exports[`jsx style plugin combine the same filename style source 1`] = `
+"import { createElement, Component } from 'rax';
+import appCssStyleSheet from \\"./app.css\\";
+import appCssStyleSheet from \\"../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, \\"\\"], [appCssStyleSheet, \\"\\"]);
+
+class App extends Component {
+  render() {
+    return <div style={_mergeEleStyles(_styleSheet[\\"header1\\"], _styleSheet[\\"header2\\"])} />;
+  }
+
+}"
+`;
+
+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)} />;
+  }
+
+}"
+`;