babel-plugin-emotion-rename
Advanced tools
Comparing version 1.0.0-beta.17 to 1.0.0-beta.18
"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"); |
@@ -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 @@ }); |
@@ -6,3 +6,2 @@ "use strict"; | ||
}); | ||
require("./babel.spec"); |
{ | ||
"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" |
@@ -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 |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
40
18535
10
276