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

Comparing version 1.0.0-beta.17 to 1.0.0-beta.18

lib/babel.spec.js

 "use strict";
 
 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); }
-
 var babel = _interopRequireWildcard(require("@babel/core"));
-
 var _assertSimpleTap = _interopRequireDefault(require("assert-simple-tap"));
-
 var _index = _interopRequireDefault(require("./index"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var testGeneration = function testGeneration(message, code, expectedCode) {
@@ -22,6 +15,4 @@ var transformedCode = babel.transform(code, {
   }).code;
-
   _assertSimpleTap["default"].equal(transformedCode.trim(), expectedCode.trim(), message);
 };
-
 testGeneration("replace basic imports", "\nimport styled, { css } from \"react-emotion\";\n", "\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/css\";\n");
@@ -32,3 +23,3 @@ testGeneration("replace complex multiple imports", "\nimport styled, { css, keyframes } from \"react-emotion\";\n", "\nimport styled from \"@emotion/styled\";\nimport { css, keyframes } from \"@emotion/css\";\n");
 testGeneration("replace only one styled from emotion - cjs", "\nconst styled = require(\"react-emotion\");\n", "\nconst styled = require(\"@emotion/styled\");\n");
-testGeneration("replace css import to emotion/react if used on styled - case1", "\nimport styled, { css } from \"react-emotion\";\nconst normalCss = css`\n  color: #fff; \n`;\n\nconst BasicStyle = function BasicStyleCmp(props) {\n  return css`\n    color: #000;\n  `;\n};\n\nconst azt = 5;\nconst Cmp = styled.div`\n  ${BasicStyle}\n  width: ${azt};\n  color: 'pink';\n`;\n", "\nimport { css as css2 } from '@emotion/react';\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/css\";\nconst normalCss = css`\n  color: #fff; \n`;\n\nconst BasicStyle = function BasicStyleCmp(props) {\n  return css2`\n    color: #000;\n  `;\n};\n\nconst azt = 5;\nconst Cmp = styled.div`\n  ${BasicStyle}\n  width: ${azt};\n  color: 'pink';\n`;\n");
+testGeneration("replace css import to emotion/react if used on styled - case1", "\nimport styled, { css } from \"react-emotion\";\nconst normalCss = css`\n  color: #fff; \n`;\n\nconst BasicStyle = function BasicStyleCmp(props) {\n  return css`\n    color: #000;\n  `;\n};\n\nconst Cmp = styled.div`\n  ${BasicStyle}\n  color: 'pink';\n`;\n", "\nimport { css as css2 } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/css\";\nconst normalCss = css`\n  color: #fff; \n`;\nconst BasicStyle = function BasicStyleCmp(props) {\n  return css2`\n    color: #000;\n  `;\n};\nconst Cmp = styled.div`\n  ${BasicStyle}\n  color: 'pink';\n`;\n");
 testGeneration("dont replace require without binding", "\n  var _emotion = _interopRequireWildcard(require(\"emotion\"));\n  ", "\n  var _emotion = _interopRequireWildcard(require(\"emotion\"));\n");

lib/index.js

@@ -7,8 +7,4 @@ "use strict";
 exports["default"] = visitor;
-
 var _template = _interopRequireDefault(require("@babel/template"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/* eslint-disable no-param-reassign */
 function isModule(value, original) {
@@ -18,8 +14,2 @@ var pattern = new RegExp("^(".concat(original, "|").concat(original, "/.*)$"));
 }
-
-function replace(value, original, replacement) {
-  var pattern = new RegExp("^".concat(original));
-  return value.replace(pattern, replacement);
-}
-
 function getStyled(path) {
@@ -32,3 +22,2 @@ if (!path.node.source.value === "react-emotion") {
   }
-
   var hasStyled = path.node.specifiers.filter(function (s) {
@@ -45,5 +34,4 @@ return s.type === "ImportDefaultSpecifier";
 }
-
-var buildImport = (0, _template["default"])("\n  import styled from '@emotion/styled';\n");
-var buildImportEmotionReact = (0, _template["default"])("\n  import { css as css2 } from '@emotion/react';\n");
+var buildImport = (0, _template["default"])("\n  import styled from \"@emotion/styled\";\n");
+var buildImportEmotionReact = (0, _template["default"])("\n  import { css as css2 } from \"@emotion/react\";\n");
 var CSS_LOCAL_NAME = "css";
@@ -58,30 +46,16 @@ var STYLED_LOCAL_NAME = "styled";
 }];
-
 function visitor(_ref) {
   var t = _ref.types;
-
-  var source = function source(value, original, replacement) {
-    return t.stringLiteral(replace(value, original, replacement));
-  };
-
   var root;
-  var emotionStyledImported = false;
-  var emotionReactImported = false;
   var filterTags = [];
   var MAP_STYLED_VARS = {};
-  var MAP_CSS_LIST = {}; // let cssList = [];
-
+  var MAP_CSS_LIST = {};
   var emotionStyledImportDeclaration = buildImport();
   var emotionReactImportDeclaration = buildImportEmotionReact();
-
   function insertEmotionReact() {
     root.unshiftContainer("body", emotionReactImportDeclaration);
-    emotionReactImported = true;
   }
-
   function insertEmotionStyled() {
     root.unshiftContainer("body", emotionStyledImportDeclaration);
-    emotionStyledImported = true;
   }
-
   return {
@@ -93,3 +67,3 @@ visitor: {
         },
-        exit: function exit(path) {
+        exit: function exit() {
           /**
@@ -99,4 +73,4 @@ * Only rename all css which are embedded to styled component
            */
-          var cssListKeys = Object.keys(MAP_CSS_LIST); // console.log(">>", cssListKeys, MAP_STYLED_VARS);
-
+          var cssListKeys = Object.keys(MAP_CSS_LIST);
+          // console.log(">>", cssListKeys, MAP_STYLED_VARS);
           var cssList = cssListKeys.map(function (key) {
@@ -113,7 +87,5 @@ return {
             var _t$path$scope$block$b, _t$path$scope$block$b2;
-
             if ((_t$path$scope$block$b = t.path.scope.block.body.body[0]) !== null && _t$path$scope$block$b !== void 0 && _t$path$scope$block$b.argument.tag) {
               t.path.scope.block.body.body[0].argument.tag.name = "css2";
             }
-
             if ((_t$path$scope$block$b2 = t.path.scope.block.body.body[0]) !== null && _t$path$scope$block$b2 !== void 0 && _t$path$scope$block$b2.argument.callee) {
@@ -123,11 +95,9 @@ t.path.scope.block.body.body[0].argument.callee.name = "css2";
           });
-
           if (filterTags.length) {
             insertEmotionReact();
           }
+
           /**
            * Cleanups
            */
-
-
           MAP_CSS_LIST = {};
@@ -139,3 +109,2 @@ MAP_STYLED_VARS = {};
         var _path$node$body, _path$node$body2, _path$node$body2$tag;
-
         /**
@@ -146,3 +115,2 @@ * Collects all emotion `css` calls
           var _path$parent$id;
-
           var cssVarName = path === null || path === void 0 ? void 0 : (_path$parent$id = path.parent.id) === null || _path$parent$id === void 0 ? void 0 : _path$parent$id.name;
@@ -156,3 +124,2 @@ MAP_CSS_LIST[cssVarName] = {
         var _path$parent$id2, _path$scope$block$bod, _path$scope$block$bod2, _path$scope$block$bod3, _path$scope$block$bod4, _path$scope$block$bod5, _path$scope$block$bod6, _path$scope$block$bod7, _path$scope$block$bod8, _path$scope$block$bod9, _path$scope$block$bod10, _path$scope$block$bod11;
-
         /**
@@ -162,6 +129,6 @@ * Collects all emotion `css` calls
         var cssVarName = path === null || path === void 0 ? void 0 : (_path$parent$id2 = path.parent.id) === null || _path$parent$id2 === void 0 ? void 0 : _path$parent$id2.name;
+
         /**
          * Handle transpiled version of emotion css call...
          */
-
         if (((_path$scope$block$bod = path.scope.block.body) === null || _path$scope$block$bod === void 0 ? void 0 : (_path$scope$block$bod2 = _path$scope$block$bod.body[0]) === null || _path$scope$block$bod2 === void 0 ? void 0 : (_path$scope$block$bod3 = _path$scope$block$bod2.argument) === null || _path$scope$block$bod3 === void 0 ? void 0 : (_path$scope$block$bod4 = _path$scope$block$bod3.callee) === null || _path$scope$block$bod4 === void 0 ? void 0 : _path$scope$block$bod4.name) === CSS_LOCAL_NAME) {
@@ -172,7 +139,6 @@ MAP_CSS_LIST[cssVarName] = {
         }
+
         /**
          * Handle normal css call with template expression
          */
-
-
         if (((_path$scope$block$bod5 = path.scope.block.body) === null || _path$scope$block$bod5 === void 0 ? void 0 : (_path$scope$block$bod6 = _path$scope$block$bod5.body[0]) === null || _path$scope$block$bod6 === void 0 ? void 0 : (_path$scope$block$bod7 = _path$scope$block$bod6.argument) === null || _path$scope$block$bod7 === void 0 ? void 0 : _path$scope$block$bod7.type) === "TaggedTemplateExpression" && ((_path$scope$block$bod8 = path.scope.block.body) === null || _path$scope$block$bod8 === void 0 ? void 0 : (_path$scope$block$bod9 = _path$scope$block$bod8.body[0]) === null || _path$scope$block$bod9 === void 0 ? void 0 : (_path$scope$block$bod10 = _path$scope$block$bod9.argument) === null || _path$scope$block$bod10 === void 0 ? void 0 : (_path$scope$block$bod11 = _path$scope$block$bod10.tag) === null || _path$scope$block$bod11 === void 0 ? void 0 : _path$scope$block$bod11.name) === CSS_LOCAL_NAME) {
@@ -186,5 +152,4 @@ MAP_CSS_LIST[cssVarName] = {
         var _path$node$tag$object;
-
         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) {
-          var templateVars = path.node.quasi.expressions.map(function (exp) {
+          path.node.quasi.expressions.map(function (exp) {
             return exp.name;
@@ -199,5 +164,4 @@ }).forEach(function (expName) {
       },
-      ImportDeclaration: function ImportDeclaration(path, state) {
+      ImportDeclaration: function ImportDeclaration(path) {
         var importPackageName = path.node.source.value;
-
         if (importPackageName === "emotion") {
@@ -207,6 +171,4 @@ path.node.source = t.stringLiteral("@emotion/css");
           var _path$node$specifiers, _path$node$specifiers2, _styledDefaultNode$lo;
-
           var cssLocalName = (_path$node$specifiers = path.node.specifiers.find(function (s) {
             var _s$imported;
-
             return ((_s$imported = s.imported) === null || _s$imported === void 0 ? void 0 : _s$imported.name) === "css";
@@ -218,2 +180,3 @@ })) === null || _path$node$specifiers === void 0 ? void 0 : (_path$node$specifiers2 = _path$node$specifiers.local) === null || _path$node$specifiers2 === void 0 ? void 0 : _path$node$specifiers2.name;
           var styledLocalName = styledDefaultNode === null || styledDefaultNode === void 0 ? void 0 : (_styledDefaultNode$lo = styledDefaultNode.local) === null || _styledDefaultNode$lo === void 0 ? void 0 : _styledDefaultNode$lo.name;
+
           /**
@@ -223,10 +186,7 @@ * Anticipate custom local import name
            */
-
           CSS_LOCAL_NAME = cssLocalName || "css";
           STYLED_LOCAL_NAME = styledLocalName || "styled";
-
           var _getStyled = getStyled(path),
-              hasStyled = _getStyled.hasStyled,
-              nonStyled = _getStyled.nonStyled;
-
+            hasStyled = _getStyled.hasStyled,
+            nonStyled = _getStyled.nonStyled;
           if (nonStyled.length) {
@@ -237,2 +197,3 @@ path.node.specifiers = path.node.specifiers.filter(function (s) {
           }
+
           /**
@@ -242,17 +203,9 @@ * if there is only exactly one default import styled
            */
-
-
-          var a = 0;
-
           if (!nonStyled.length && hasStyled.length) {
-            a = 1;
             path.node.source = t.stringLiteral("@emotion/styled");
             return;
           }
-
           if (hasStyled.length) {
-            a = 2;
             insertEmotionStyled();
           }
-
           path.node.source = t.stringLiteral("@emotion/css");
@@ -263,3 +216,2 @@ } else if (importPackageName === "@emotion/styled") {
           });
-
           if (!_styledDefaultNode) {
@@ -282,3 +234,3 @@ /**
       },
-      CallExpression: function CallExpression(path, state) {
+      CallExpression: function CallExpression(path) {
         /**
@@ -297,8 +249,5 @@ * Collect all styled's arguments with form of styled(a, b, c, ...)
         }
-
         REP.forEach(function (_ref2) {
-          var original = _ref2.original,
-              replacement = _ref2.replacement;
+          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)) {
@@ -312,6 +261,7 @@ /**
               return;
-            } // path.node.arguments = [
+            }
+
+            // path.node.arguments = [
             //   source(node.arguments[0].value, original, replacement),
             // ];
-
           }
@@ -318,0 +268,0 @@ });

lib/index.spec.js

@@ -6,3 +6,2 @@ "use strict";
 });
-
 require("./babel.spec");

package.json

 {
   "name": "babel-plugin-emotion-rename",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.18",
   "description": "Babel plugin to rename old Emotion 9 import to new Emotion 10+ import",
@@ -9,3 +9,3 @@ "main": "lib/index",
     "test:babel": "node src/index.spec.js",
-    "tmp": "babel --config-file=./babel-example.config.js examples/. -d examples-dist/.",
+    "tmp": "babel --config-file=./babel-example.config.js examples/src/. -d examples/out/.",
     "test": "npm-run-all test:*",
@@ -20,3 +20,3 @@ "prepublish": "npm run build"
     "type": "git",
-    "url": "https://github.com/laat/babel-plugin-transform-rename-import.git"
+    "url": "https://github.com/antonybudianto/babel-plugin-emotion-rename.git"
   },
@@ -34,2 +34,3 @@ "dependencies": {
     "assert-simple-tap": "^3.0.0",
+    "eslint": "^8.28.0",
     "npm-run-all": "^4.0.2",
@@ -36,0 +37,0 @@ "prettier": "^2.0.1"

readme.md

@@ -6,8 +6,19 @@ # babel-plugin-emotion-rename [![npm][npm-image]][npm-url]
 
-> replace import sources
+> Automatically rename legacy emotion imports to new supported emotion versions
 
+## How it works
+
+- Scan all imports, try to rename legacy import from `emotion` / `react-emotion` to `@emotion/css`
+- If it used styled, add additional new import `@emotion/styled`
+- If the emotion.css is used within styled, swap with css method from `@emotion/react`
+
+### Compatibility:
+
+- Legacy v9 to v11
+- Some things may not be working, please checkout with caution!
+
 ## Install
 
 ```
-$ npm install --save babel-plugin-emotion-rename
+$ npm install --save-dev babel-plugin-emotion-rename
 ```
@@ -19,8 +30,12 @@
 {
-  "plugins": [["emotion-rename", { }]]
+  "plugins": ["babel-plugin-emotion-rename"]
 }
 ```
 
+## Codemod
+
+- Codemod CLI coming soon, so that we can drop runtime transpilation step.
+
 ## License
 
 MIT

No alert changes

Improved metrics

Number of lines in readme file

40

increased by60%

Worsened metrics

Total package byte prevSize

18535

decreased by-0.87%

Dev dependency count

10

increased by11.11%

Lines of code

276

decreased by-4.83%

No dependency changes