babel-plugin-emotion-rename - npm Package Compare versions

Comparing version 1.0.0-beta.21 to 1.0.0-beta.22

lib/index.js

@@ -9,2 +9,8 @@ "use strict";
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function isModule(value, original) {
@@ -49,2 +55,4 @@ var pattern = new RegExp("^(".concat(original, "|").concat(original, "/.*)$"));
   var MAP_CSS_LIST = {};
+  var ALL_STYLED_NAMES = {};
+  var ALL_CSS_NAMES = {};
   var emotionStyledImportDeclaration = buildImport();
@@ -70,3 +78,34 @@ var emotionReactImportDeclaration = buildImportEmotionReact();
           var cssListKeys = Object.keys(MAP_CSS_LIST);
-          // console.log(">>", cssListKeys, MAP_STYLED_VARS);
+          // console.log(`
+          //   ${JSON.stringify(ALL_STYLED_NAMES, null, 2)}
+          //   =====
+          //   ${JSON.stringify(ALL_CSS_NAMES, null, 2)}
+          // `);
+
+          var traverseCss = function traverseCss(cssName) {
+            if (!ALL_CSS_NAMES[cssName]) {
+              return;
+            }
+            var cssArgs = Object.keys(ALL_CSS_NAMES[cssName]);
+            if (!cssArgs.length) {
+              return;
+            }
+            cssArgs.forEach(function (arg) {
+              if (ALL_CSS_NAMES[cssName][arg] === 1) {
+                MAP_STYLED_VARS[arg] = 1;
+                traverseCss(arg);
+              }
+            });
+          };
+
+          /**
+           * Iterate all styled and recursively rename css import
+           */
+          var styledKeys = Object.keys(ALL_STYLED_NAMES);
+          styledKeys.map(function (k) {
+            var idsKeys = Object.keys(ALL_STYLED_NAMES[k]);
+            idsKeys.forEach(function (id) {
+              traverseCss(id);
+            });
+          });
           var cssList = cssListKeys.map(function (key) {
@@ -104,2 +143,4 @@ return {
           MAP_STYLED_VARS = {};
+          ALL_STYLED_NAMES = {};
+          ALL_CSS_NAMES = {};
         }
@@ -147,11 +188,17 @@ },
         var _path$node$tag$object;
-        // if (path.node.tag?.name === CSS_LOCAL_NAME) {
-        //   if (path?.parent?.id?.type === "Identifier") {
-        //     MAP_CSS_LIST[path?.parent?.id.name] = 1;
-        //   }
-        // }
         if (((_path$node$tag$object = path.node.tag.object) === null || _path$node$tag$object === void 0 ? void 0 : _path$node$tag$object.name) === STYLED_LOCAL_NAME) {
-          path.node.quasi.expressions.map(function (exp) {
+          var _path$parentPath, _path$parentPath$node, _path$parentPath$node2;
+          var taggedStyledVars = path.node.quasi.expressions.filter(function (exp) {
+            return exp.type === "Identifier";
+          }).map(function (exp) {
             return exp.name;
-          }).forEach(function (expName) {
+          });
+          var taggedStyledIdsMap = taggedStyledVars.reduce(function (a, c) {
+            return _objectSpread(_objectSpread({}, a), {}, _defineProperty({}, c, 1));
+          }, {});
+          var taggedStyledName = path === null || path === void 0 ? void 0 : (_path$parentPath = path.parentPath) === null || _path$parentPath === void 0 ? void 0 : (_path$parentPath$node = _path$parentPath.node) === null || _path$parentPath$node === void 0 ? void 0 : (_path$parentPath$node2 = _path$parentPath$node.id) === null || _path$parentPath$node2 === void 0 ? void 0 : _path$parentPath$node2.name;
+          if (taggedStyledName) {
+            ALL_STYLED_NAMES[taggedStyledName] = taggedStyledIdsMap;
+          }
+          taggedStyledVars.forEach(function (expName) {
             /**
@@ -232,7 +279,16 @@ * Collects all template variables as candidates.
         if (path.node.callee.name === STYLED_LOCAL_NAME && path.node.arguments && path.node.arguments.length) {
-          path.parent.arguments.filter(function (a) {
+          var _path$parentPath2, _path$parentPath2$par, _path$parentPath2$par2;
+          var styledVarName = path === null || path === void 0 ? void 0 : (_path$parentPath2 = path.parentPath) === null || _path$parentPath2 === void 0 ? void 0 : (_path$parentPath2$par = _path$parentPath2.parent) === null || _path$parentPath2$par === void 0 ? void 0 : (_path$parentPath2$par2 = _path$parentPath2$par.id) === null || _path$parentPath2$par2 === void 0 ? void 0 : _path$parentPath2$par2.name;
+          var styledIdsList = path.parent.arguments.filter(function (a) {
             return a.type === "Identifier";
           }).map(function (a) {
             return a.name;
-          }).forEach(function (expName) {
+          });
+          var styledIdsMap = styledIdsList.reduce(function (a, c) {
+            return _objectSpread(_objectSpread({}, a), {}, _defineProperty({}, c, 1));
+          }, {});
+          if (styledVarName) {
+            ALL_STYLED_NAMES[styledVarName] = styledIdsMap;
+          }
+          styledIdsList.forEach(function (expName) {
             MAP_STYLED_VARS[expName] = 1;
@@ -243,6 +299,23 @@ });
         if (path.node.callee.name === CSS_LOCAL_NAME && path.node.arguments && path.node.arguments.length) {
-          var _path$parent, _path$parent$id3;
-          if (((_path$parent = path.parent) === null || _path$parent === void 0 ? void 0 : (_path$parent$id3 = _path$parent.id) === null || _path$parent$id3 === void 0 ? void 0 : _path$parent$id3.type) === "Identifier") {
-            var _path$parent2, _path$parent2$id;
-            MAP_CSS_LIST[(_path$parent2 = path.parent) === null || _path$parent2 === void 0 ? void 0 : (_path$parent2$id = _path$parent2.id) === null || _path$parent2$id === void 0 ? void 0 : _path$parent2$id.name] = {
+          var _path$parentPath3, _path$parentPath3$sco, _path$parentPath3$sco2, _path$parentPath3$sco3, _path$parent, _path$parent$id3, _path$parent2, _path$parent2$id;
+          var cssIdsList = path.node.arguments.filter(function (a) {
+            return a.type === "Identifier";
+          }).map(function (a) {
+            return a.name;
+          });
+          var cssIdsMap = cssIdsList.reduce(function (a, c) {
+            return _objectSpread(_objectSpread({}, a), {}, _defineProperty({}, c, 1));
+          }, {});
+          var fnName = path === null || path === void 0 ? void 0 : (_path$parentPath3 = path.parentPath) === null || _path$parentPath3 === void 0 ? void 0 : (_path$parentPath3$sco = _path$parentPath3.scope) === null || _path$parentPath3$sco === void 0 ? void 0 : (_path$parentPath3$sco2 = _path$parentPath3$sco.block) === null || _path$parentPath3$sco2 === void 0 ? void 0 : (_path$parentPath3$sco3 = _path$parentPath3$sco2.id) === null || _path$parentPath3$sco3 === void 0 ? void 0 : _path$parentPath3$sco3.name;
+          if (path.parent.type === "ReturnStatement" && fnName) {
+            ALL_CSS_NAMES[fnName] = cssIdsMap;
+            return;
+          }
+          var cssVarName = (_path$parent = path.parent) === null || _path$parent === void 0 ? void 0 : (_path$parent$id3 = _path$parent.id) === null || _path$parent$id3 === void 0 ? void 0 : _path$parent$id3.name;
+          if (cssVarName) {
+            ALL_CSS_NAMES[cssVarName] = cssIdsMap;
+          }
+          if (((_path$parent2 = path.parent) === null || _path$parent2 === void 0 ? void 0 : (_path$parent2$id = _path$parent2.id) === null || _path$parent2$id === void 0 ? void 0 : _path$parent2$id.type) === "Identifier") {
+            var _path$parent3, _path$parent3$id;
+            MAP_CSS_LIST[(_path$parent3 = path.parent) === null || _path$parent3 === void 0 ? void 0 : (_path$parent3$id = _path$parent3.id) === null || _path$parent3$id === void 0 ? void 0 : _path$parent3$id.name] = {
               _type: "callee",
@@ -252,35 +325,14 @@ path: path
           }
-          path.node.arguments.filter(function (a) {
-            return a.type === "Identifier";
-          }).map(function (a) {
-            return a.name;
-          }).forEach(function (expName) {
-            if (MAP_CSS_LIST[expName]) {
-              MAP_STYLED_VARS[expName] = 1;
-              console.log("css within css --->", expName);
-            }
-          });
           return;
         }
+
+        /**
+         * Handle rename require('emotion') -> require('@emotion/css')
+         */
+        var node = path.node;
+        var isRequire = node.callee.name === "require" && node.arguments && node.arguments.length === 1 && t.isStringLiteral(node.arguments[0]);
         REP.forEach(function (_ref2) {
           var original = _ref2.original;
-          var node = path.node;
-          if (node.callee.name === "require" && node.arguments && node.arguments.length === 1 && t.isStringLiteral(node.arguments[0]) && isModule(node.arguments[0].value, original)) {
-            /**
-             * @TODO
-             * handle commonjs require('emotion')...
-             */
-            // if (
-            //   path.scope.bindings.styled &&
-            //   /(react-)?emotion/.test(node.arguments[0].value)
-            // ) {
-            //   path.node.arguments = [t.stringLiteral("@emotion/styled")];
-            //   return;
-            // }
-
+          if (isRequire && isModule(node.arguments[0].value, original)) {
             path.node.arguments = [t.stringLiteral("@emotion/css")];
-
-            // path.node.arguments = [
-            //   source(node.arguments[0].value, original, replacement),
-            // ];
           }
@@ -287,0 +339,0 @@ });

package.json

 {
   "name": "babel-plugin-emotion-rename",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.22",
   "description": "Babel plugin to rename old Emotion 9 import to new Emotion 10+ import",
@@ -5,0 +5,0 @@ "main": "lib/index",

No alert changes

Improved metrics

Total package byte prevSize

21988

increased by31.3%

Lines of code

341

increased by20.49%

No dependency changes