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

Comparing version 0.0.2 to 0.1.8

lib/index.js

@@ -8,4 +8,8 @@ 'use strict';
 exports.default = function (_ref) {
-  var t = _ref.types;
+  var t = _ref.types,
+      template = _ref.template;
 
+  var assignFunctionTemplate = template('\nfunction _mergeStyles() {\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 assignFunctionAst = assignFunctionTemplate();
+
   function getMemberExpression() {
@@ -26,5 +30,16 @@ var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : str.trim();
     visitor: {
+      Program: {
+        exit: function exit(_ref2, _ref3) {
+          var node = _ref2.node;
+          var file = _ref3.file;
+
+          var cssFileCount = file.get('cssFileCount');
+          if (cssFileCount > 1) {
+            node.body.unshift(assignFunctionAst);
+          }
+        }
+      },
       // parse jsx className
-      JSXAttribute: function JSXAttribute(_ref2) {
-        var node = _ref2.node;
+      JSXAttribute: function JSXAttribute(_ref4) {
+        var node = _ref4.node;
 
@@ -49,5 +64,5 @@ var attributeName = node.name.name;
       },
-      ImportDeclaration: function ImportDeclaration(_ref3, _ref4) {
-        var node = _ref3.node;
-        var file = _ref4.file;
+      ImportDeclaration: function ImportDeclaration(_ref5, _ref6) {
+        var node = _ref5.node;
+        var file = _ref6.file;
 
@@ -60,3 +75,3 @@ var sourceValue = node.source.value;
         if (cssIndex > 0) {
-          cssFileCount = file.get('cssFileCount') || 1;
+          cssFileCount = file.get('cssFileCount') || 0;
           var cssFileBaseName = (0, _camelcase2.default)(_path2.default.basename(sourceValue, '.css'));
@@ -73,6 +88,6 @@ var styleSheetIdentifier = t.identifier('' + (cssFileBaseName + NAME_SUFFIX));
       },
-      ClassDeclaration: function ClassDeclaration(_ref5, _ref6) {
-        var parent = _ref5.parent,
-            node = _ref5.node;
-        var file = _ref6.file;
+      ClassDeclaration: function ClassDeclaration(_ref7, _ref8) {
+        var parent = _ref7.parent,
+            node = _ref7.node;
+        var file = _ref8.file;
 
@@ -88,3 +103,3 @@ var classIndex = parent.body.indexOf(node);
           } else if (cssParamIdentifiers.length > 1) {
-            var objectAssignExpression = t.callExpression(t.memberExpression(t.identifier('Object'), t.identifier('assign')), cssParamIdentifiers);
+            var objectAssignExpression = t.callExpression(t.identifier('_mergeStyles'), cssParamIdentifiers);
             callExpression = t.variableDeclaration('const', [t.variableDeclarator(t.identifier(STYLE_SHEET_NAME), objectAssignExpression)]);
@@ -91,0 +106,0 @@ }

package.json

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

src/index.js

@@ -7,3 +7,20 @@ import path from 'path';
 
-export default function({ types: t }) {
+export default function({ types: t, template }) {
+  const assignFunctionTemplate = template(`
+function _mergeStyles() {
+  var newTarget = {};
+
+  for (var index = 0; index < arguments.length; index++) {
+    var target = arguments[index];
+
+    for (var key in target) {
+      newTarget[key] = Object.assign(newTarget[key] || {}, target[key]);
+    }
+  }
+
+  return newTarget;
+}
+  `);
+  const assignFunctionAst = assignFunctionTemplate();
+
   function getMemberExpression(str = str.trim()) {
@@ -22,2 +39,10 @@ let classNames = str.split(' ');
     visitor: {
+      Program: {
+        exit({ node }, { file }) {
+          const cssFileCount = file.get('cssFileCount');
+          if (cssFileCount > 1) {
+            node.body.unshift(assignFunctionAst);
+          }
+        }
+      },
       // parse jsx className
@@ -50,3 +75,3 @@ JSXAttribute({ node }) {
         if (cssIndex > 0) {
-          cssFileCount = file.get('cssFileCount') || 1;
+          cssFileCount = file.get('cssFileCount') || 0;
           const cssFileBaseName = camelcase(path.basename(sourceValue, '.css'));
@@ -73,3 +98,3 @@ const styleSheetIdentifier = t.identifier(`${cssFileBaseName + NAME_SUFFIX}`);
           } else if (cssParamIdentifiers.length > 1) {
-            const objectAssignExpression = t.callExpression(t.memberExpression(t.identifier('Object'), t.identifier('assign')), cssParamIdentifiers);
+            const objectAssignExpression = t.callExpression(t.identifier('_mergeStyles'), cssParamIdentifiers);
             callExpression = t.variableDeclaration('const', [t.variableDeclarator(t.identifier(STYLE_SHEET_NAME), objectAssignExpression)]);
@@ -76,0 +101,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

10353

increased by13.96%

Lines of code

191

increased by22.44%

No dependency changes