babel-plugin-transform-jsx-stylesheet - npm Package Compare versions

Comparing version 0.6.5 to 0.6.6

lib/index.js

@@ -1,15 +0,25 @@
-'use strict';
+"use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
+exports.default = _default;
 
-exports.default = function (_ref) {
+var _path = _interopRequireDefault(require("path"));
+
+var _camelcase = _interopRequireDefault(require("camelcase"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var STYLE_SHEET_NAME = '_styleSheet';
+var GET_STYLE_FUNC_NAME = '_getStyle';
+var MERGE_STYLES_FUNC_NAME = '_mergeStyles';
+var GET_CLS_NAME_FUNC_NAME = '_getClassName';
+var NAME_SUFFIX = 'StyleSheet';
+var cssSuffixs = ['.css', '.scss', '.sass', '.less'];
+
+function _default(_ref) {
   var t = _ref.types,
       template = _ref.template;
-
-  var mergeStylesFunctionTemplate = template('\nfunction ' + MERGE_STYLES_FUNC_NAME + '() {\n  var newTarget = {};\n\n  for (var index = 0; index < arguments.length; index++) {\n    var target = arguments[index];\n\n    for (var key in target) {\n      newTarget[key] = Object.assign(newTarget[key] || {}, target[key]);\n    }\n  }\n\n  return newTarget;\n}\n  ');
-  var getClassNameFunctionTemplate = template('\nfunction ' + GET_CLS_NAME_FUNC_NAME + '() {\n  var className = [];\n  var args = arguments[0];\n  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();\n\n  if (type === \'string\') {\n    args = args.trim();\n    args && className.push(args);\n  } else if (type === \'array\') {\n    args.forEach(function (cls) {\n      cls = ' + GET_CLS_NAME_FUNC_NAME + '(cls).trim();\n      cls && className.push(cls);\n    });\n  } else if (type === \'object\') {\n    for (var k in args) {\n      k = k.trim();\n      if (k && args.hasOwnProperty(k) && args[k]) {\n        className.push(k);\n      }\n    }\n  }\n\n  return className.join(\' \').trim();\n}\n  ');
-  var getStyleFunctionTemplete = template('\nfunction ' + GET_STYLE_FUNC_NAME + '(classNameExpression) { \n  var cache = ' + STYLE_SHEET_NAME + '.__cache || (' + STYLE_SHEET_NAME + '.__cache = {});\n  var className = ' + GET_CLS_NAME_FUNC_NAME + '(classNameExpression);\n  var classNameArr = className.split(/\\s+/);\n  var style = cache[className];\n\n  if (!style) {\n    style = {};\n    if (classNameArr.length === 1) {\n      style = ' + STYLE_SHEET_NAME + '[classNameArr[0].trim()];\n    } else {\n      classNameArr.forEach(function(cls) {\n        style = Object.assign(style, ' + STYLE_SHEET_NAME + '[cls.trim()]);\n      });\n    }\n    cache[className] = style;\n  }\n\n  return style;\n}\n  ');
-
+  var mergeStylesFunctionTemplate = template("\nfunction " + MERGE_STYLES_FUNC_NAME + "() {\n  var newTarget = {};\n\n  for (var index = 0; index < arguments.length; index++) {\n    var target = arguments[index];\n\n    for (var key in target) {\n      newTarget[key] = Object.assign(newTarget[key] || {}, target[key]);\n    }\n  }\n\n  return newTarget;\n}\n  ");
+  var getClassNameFunctionTemplate = template("\nfunction " + GET_CLS_NAME_FUNC_NAME + "() {\n  var className = [];\n  var args = arguments[0];\n  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();\n\n  if (type === 'string') {\n    args = args.trim();\n    args && className.push(args);\n  } else if (type === 'array') {\n    args.forEach(function (cls) {\n      cls = " + GET_CLS_NAME_FUNC_NAME + "(cls).trim();\n      cls && className.push(cls);\n    });\n  } else if (type === 'object') {\n    for (var k in args) {\n      k = k.trim();\n      if (k && args.hasOwnProperty(k) && args[k]) {\n        className.push(k);\n      }\n    }\n  }\n\n  return className.join(' ').trim();\n}\n  ");
+  var getStyleFunctionTemplete = template("\nfunction " + GET_STYLE_FUNC_NAME + "(classNameExpression) { \n  var cache = " + STYLE_SHEET_NAME + ".__cache || (" + STYLE_SHEET_NAME + ".__cache = {});\n  var className = " + GET_CLS_NAME_FUNC_NAME + "(classNameExpression);\n  var classNameArr = className.split(/\\s+/);\n  var style = cache[className];\n\n  if (!style) {\n    style = {};\n    if (classNameArr.length === 1) {\n      style = " + STYLE_SHEET_NAME + "[classNameArr[0].trim()];\n    } else {\n      classNameArr.forEach(function(cls) {\n        style = Object.assign(style, " + STYLE_SHEET_NAME + "[cls.trim()]);\n      });\n    }\n    cache[className] = style;\n  }\n\n  return style;\n}\n  ");
   var getClassNameFunctionAst = getClassNameFunctionTemplate();
@@ -20,4 +30,4 @@ var mergeStylesFunctionAst = mergeStylesFunctionTemplate();
   function getArrayExpression(value) {
-    var expression = void 0;
-    var str = void 0;
+    var expression;
+    var str;
 
@@ -39,3 +49,3 @@ if (!value || value.value === '') {
     return str === '' ? [] : str.split(/\s+/).map(function (className) {
-      return template(STYLE_SHEET_NAME + '["' + className + '"]')().expression;
+      return template(STYLE_SHEET_NAME + "[\"" + className + "\"]")().expression;
     });
@@ -47,3 +57,2 @@ }
     var _index = 0;
-
     bodyReverse.some(function (node, index) {
@@ -54,5 +63,5 @@ if (node.type === 'ImportDeclaration') {
       }
+
       return false;
     });
-
     return _index;
@@ -67,3 +76,2 @@ }
           var file = _ref3.file;
-
           var cssFileCount = file.get('cssFileCount');
@@ -73,3 +81,3 @@ var injectGetStyle = file.get('injectGetStyle');
           var cssParamIdentifiers = file.get('cssParamIdentifiers');
-          var callExpression = void 0;
+          var callExpression;
 
@@ -101,17 +109,18 @@ if (cssParamIdentifiers) {
         var file = _ref5.file;
+        var cssFileCount = file.get('cssFileCount') || 0;
 
-        var cssFileCount = file.get('cssFileCount') || 0;
         if (cssFileCount < 1) {
           return;
-        }
+        } // Check if has "style"
 
-        // Check if has "style"
+
         var hasStyleAttribute = false;
-        var styleAttribute = void 0;
+        var styleAttribute;
         var hasClassName = false;
-        var classNameAttribute = void 0;
+        var classNameAttribute;
+        var attributes = container.openingElement.attributes;
 
-        var attributes = container.openingElement.attributes;
         for (var i = 0; i < attributes.length; i++) {
           var name = attributes[i].name;
+
           if (name) {
@@ -131,4 +140,9 @@ if (!hasStyleAttribute) {
         if (hasClassName) {
-          // Remove origin className
-          attributes.splice(attributes.indexOf(classNameAttribute), 1);
+          // development env: change className to __class
+          if (process.env.NODE_ENV === 'development' && classNameAttribute.name) {
+            classNameAttribute.name.name = '__class';
+          } else {
+            // Remove origin className
+            attributes.splice(attributes.indexOf(classNameAttribute), 1);
+          }
 
@@ -148,8 +162,6 @@ if (classNameAttribute.value && classNameAttribute.value.type === 'JSXExpressionContainer' && typeof classNameAttribute.value.expression.value !== 'string' // not like className={'container'}
             var expression = styleAttribute.value.expression;
-            var expressionType = expression.type;
+            var expressionType = expression.type; // style={[styles.a, styles.b]} ArrayExpression
 
-            // style={[styles.a, styles.b]} ArrayExpression
             if (expressionType === 'ArrayExpression') {
-              expression.elements = arrayExpression.concat(expression.elements);
-              // style={styles.a} MemberExpression
+              expression.elements = arrayExpression.concat(expression.elements); // style={styles.a} MemberExpression
               // style={{ height: 100 }} ObjectExpression
@@ -166,2 +178,3 @@ // style={{ ...custom }} ObjectExpression
             var _expression = arrayExpression.length === 1 ? arrayExpression[0] : t.arrayExpression(arrayExpression);
+
             attributes.push(t.jSXAttribute(t.jSXIdentifier('style'), t.jSXExpressionContainer(_expression)));
@@ -174,17 +187,16 @@ }
         var file = _ref7.file;
+        var sourceValue = node.source.value;
 
-        var sourceValue = node.source.value;
-        var extname = _path2.default.extname(sourceValue);
-        var cssIndex = cssSuffixs.indexOf(extname);
-        // Do not convert `import styles from './foo.css'` kind
+        var extname = _path.default.extname(sourceValue);
+
+        var cssIndex = cssSuffixs.indexOf(extname); // Do not convert `import styles from './foo.css'` kind
+
         if (node.importKind !== 'value' && cssIndex > -1) {
           var cssFileCount = file.get('cssFileCount') || 0;
           var cssParamIdentifiers = file.get('cssParamIdentifiers') || [];
-          var cssFileBaseName = (0, _camelcase2.default)(_path2.default.basename(sourceValue, extname));
-          var styleSheetIdentifier = t.identifier('' + (cssFileBaseName + NAME_SUFFIX));
-
+          var cssFileBaseName = (0, _camelcase.default)(_path.default.basename(sourceValue, extname));
+          var styleSheetIdentifier = t.identifier("" + (cssFileBaseName + NAME_SUFFIX));
           node.specifiers = [t.importDefaultSpecifier(styleSheetIdentifier)];
           cssParamIdentifiers.push(styleSheetIdentifier);
           cssFileCount++;
-
           file.set('cssParamIdentifiers', cssParamIdentifiers);
@@ -196,22 +208,4 @@ file.set('cssFileCount', cssFileCount);
   };
-};
+}
 
-var _path = require('path');
-
-var _path2 = _interopRequireDefault(_path);
-
-var _camelcase = require('camelcase');
-
-var _camelcase2 = _interopRequireDefault(_camelcase);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var STYLE_SHEET_NAME = '_styleSheet';
-var GET_STYLE_FUNC_NAME = '_getStyle';
-var MERGE_STYLES_FUNC_NAME = '_mergeStyles';
-var GET_CLS_NAME_FUNC_NAME = '_getClassName';
-var NAME_SUFFIX = 'StyleSheet';
-var cssSuffixs = ['.css', '.scss', '.sass', '.less'];
-
-;
-module.exports = exports['default'];
+;

package.json

 {
   "name": "babel-plugin-transform-jsx-stylesheet",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "Transform stylesheet selector to style in JSX Elements.",
@@ -5,0 +5,0 @@ "license": "BSD-3-Clause",

src/__tests__/index.js

@@ -69,9 +69,12 @@ import jSXStylePlugin from '../index';
 
+function getTransfromCode(code, opts) {
+  return transform(code, {
+    plugins: [
+      [jSXStylePlugin, opts],
+      syntaxJSX
+    ]
+  }).code;
+}
+
 describe('jsx style plugin', () => {
-  function getTransfromCode(code) {
-    return transform(code, {
-      plugins: [jSXStylePlugin, syntaxJSX]
-    }).code;
-  }
-
   it('transform only one className to style as member', () => {
@@ -277,2 +280,42 @@ expect(getTransfromCode(`
   });
+
+  it('dont remove className', () => {
+    expect(getTransfromCode(`
+import { createElement, render } from 'rax';
+import './app.css';
+
+render(<div className="header" />);
+`, { retainClassName: true })).toBe(`
+import { createElement, render } from 'rax';
+import appStyleSheet from './app.css';
+
+var _styleSheet = appStyleSheet;
+render(<div className="header" style={_styleSheet["header"]} />);`);
+  });
 });
+
+describe('test development env', () => {
+  let lastEnv;
+  beforeEach(() => {
+    lastEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'development';
+  });
+
+  it('transform constant element in development env', () => {
+    expect(getTransfromCode(`
+import { createElement, render } from 'rax';
+import './app.css';
+
+render(<div className="header" />);
+`)).toBe(`
+import { createElement, render } from 'rax';
+import appStyleSheet from './app.css';
+
+var _styleSheet = appStyleSheet;
+render(<div __class="header" style={_styleSheet["header"]} />);`);
+  });
+
+  afterEach(() => {
+    process.env.NODE_ENV = lastEnv;
+  });
+});

src/index.js

@@ -9,3 +9,3 @@ import path from 'path';
 const NAME_SUFFIX = 'StyleSheet';
-const cssSuffixs = ['.css', '.scss', '.sass', '.less'];
+const cssSuffixs = ['.css', '.scss', '.sass', '.less', '.styl'];
 
@@ -55,3 +55,3 @@ export default function({ types: t, template }) {
   const getStyleFunctionTemplete = template(`
-function ${GET_STYLE_FUNC_NAME}(classNameExpression) { 
+function ${GET_STYLE_FUNC_NAME}(classNameExpression) {
   var cache = ${STYLE_SHEET_NAME}.__cache || (${STYLE_SHEET_NAME}.__cache = {});
@@ -152,3 +152,5 @@ var className = ${GET_CLS_NAME_FUNC_NAME}(classNameExpression);
       },
-      JSXOpeningElement({ container }, { file }) {
+      JSXOpeningElement({ container }, { file, opts }) {
+        const { retainClassName = false } = opts;
+
         const cssFileCount = file.get('cssFileCount') || 0;
@@ -183,4 +185,12 @@ if (cssFileCount < 1) {
         if (hasClassName) {
-          // Remove origin className
-          attributes.splice(attributes.indexOf(classNameAttribute), 1);
+          // Dont remove className
+          if (!retainClassName) {
+            // development env: change className to __class
+            if (process.env.NODE_ENV === 'development' && classNameAttribute.name) {
+              classNameAttribute.name.name = '__class';
+            } else {
+              // Remove origin className
+              attributes.splice(attributes.indexOf(classNameAttribute), 1);
+            }
+          }
 
@@ -187,0 +197,0 @@ if (

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29681

increased by5.18%

Lines of code

649

increased by6.74%

Worsened metrics

Number of low supply chain risk alerts

5

increased byInfinity%

No dependency changes