Add import mapping to babel plugin (#1220)

* Add stuff to babel plugin readme * Refactor styled macro * Refactor other macros * WIP more refactoring * Fix stuff * WIP * stuff * WIP stuff * More WIP stuff * WIP * Add a changeset * Remove instances option and other things * Fix some stuff * A bunch of FlowFixMes * Finish implementation and add a changeset * Update more things * Words * Remove obselete snapshots * Fix stuff * Fix docs * Fix things * Fix a bug
emotion-js · Nov 8, 2019 · c5b12d9 · c5b12d9
1 parent 794d4c1
commit c5b12d9
Show file tree

Hide file tree

Showing 36 changed files with 1,205 additions and 571 deletions.
diff --git a/.changeset/giant-oranges-impress.md b/.changeset/giant-oranges-impress.md
@@ -0,0 +1,6 @@
+---
+'babel-plugin-emotion': major
+'@emotion/babel-preset-css-prop': major
+---
+
+Removed support for the `instances` option, any usage of it should be replaced with the `importMap` option
diff --git a/.changeset/neat-ligers-film.md b/.changeset/neat-ligers-film.md
@@ -0,0 +1,5 @@
+---
+'babel-plugin-emotion': patch
+---
+
+Fix issue with not updating referenced import when bailing out on already transpiled vanilla emotion nodes (a regression introduced in #1602)
diff --git a/.changeset/stupid-radios-draw.md b/.changeset/stupid-radios-draw.md
@@ -0,0 +1,6 @@
+---
+'babel-plugin-emotion': minor
+'@emotion/babel-preset-css-prop': minor
+---
+
+Added the `importMap` option which allows you to tell babel-plugin-emotion what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms
diff --git a/package.json b/package.json
@@ -61,7 +61,12 @@
     ],
     "parser": "babel-eslint",
     "rules": {
-      "prettier/prettier": ["error", {"parser": "flow"}],
+      "prettier/prettier": [
+        "error",
+        {
+          "parser": "flow"
+        }
+      ],
       "react/prop-types": 0,
       "react/no-unused-prop-types": 0,
       "standard/computed-property-even-spacing": 0,
@@ -174,6 +179,7 @@
     "@manypkg/cli": "^0.5.2",
     "@mdx-js/mdx": "^1.1.0",
     "@mdx-js/react": "^1.0.27",
+    "@preconstruct/cli": "^1.1.0",
     "@testing-library/react": "^9.3.2",
     "@types/jest": "^23.0.2",
     "@types/node": "^10.11.4",
@@ -231,7 +237,6 @@
     "npm-run-all": "^4.0.2",
     "opencollective": "^1.0.3",
     "polished": "^1.2.1",
-    "preconstruct": "^0.0.81",
     "prettier": "1.14.3",
     "puppeteer": "^1.6.0",
     "raf": "^3.4.0",

diff --git a/packages/babel-plugin-emotion/README.md b/packages/babel-plugin-emotion/README.md
@@ -285,27 +285,36 @@ const H1 = /*#__PURE__*/ styled('h1', {
 
 `H1`'s class name attribute would be `css-hash-H1`
 
-### `instances`
-
-`Array<string>`, defaults to
+### `cssPropOptimization`
 
-```jsx
-;['emotion']
-```
+`boolean`, defaults to `true`.
 
-This option allows `babel-plugin-emotion` to know which imports to treat as
-emotion imports and transform as such. This option is **only** required if you
-use a custom instance of emotion created with `create-emotion` or you're
-importing emotion from somewhere other than the paths above. Relative paths are
-resolved relative to `process.cwd()`(the current working directory).
+This option assumes that you are using something to make `@emotion/core`'s `jsx` function work for all jsx. If you are not doing so and you do not want such optimizations to occur, disable this option.
 
-[**Documentation**](https://emotion.sh/docs/instances)
+### `importMap`
 
-### `cssPropOptimization`
+This option allows you to tell babel-plugin-emotion what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms
 
-`boolean`, defaults to `true`.
+An example config:
 
-This option assumes that you are using something to make `@emotion/core`'s `jsx` function work for all jsx. If you are not doing so and you do not want such optimizations to occur, disable this option.
+```json
+{
+  "my-package": {
+    "anotherExport": {
+      "canonicalImport": ["@emotion/styled", "default"],
+      "styledBaseImport": ["my-package/base", "anotherExport"]
+    }
+  },
+  "some-package": {
+    "someExport": {
+      "canonicalImport": ["@emotion/core", "css"]
+    },
+    "thisIsTheJsxExport": {
+      "canonicalImport": ["@emotion/core", "jsx"]
+    }
+  }
+}
+```
 
 ## Babel Macros
 

diff --git a/packages/babel-plugin-emotion/__tests__/__fixtures__/core-with-css-import-dynamic.js b/packages/babel-plugin-emotion/__tests__/__fixtures__/core-with-css-import-dynamic.js
@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+
+const SomeComponent = props => (
+  <div
+    css={css`
+      color: ${window};
+    `}
+    {...props}
+  />
+)
diff --git a/packages/babel-plugin-emotion/__tests__/__fixtures__/dynamic.js b/packages/babel-plugin-emotion/__tests__/__fixtures__/dynamic.js
@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+
+const SomeComponent = props => <div css={{ color: window }} {...props} />
diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap
@@ -11,7 +11,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() {
 
 let someCls =
 /*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
+_css2(process.env.NODE_ENV === \\"production\\" ? {
   name: \\"1jwq1yt-someCls\\",
   styles: \\"color:hotpink;;label:someCls;\\"
 } : {
@@ -23,7 +23,7 @@ _css(process.env.NODE_ENV === \\"production\\" ? {
 
 let rotate360 =
 /*#__PURE__*/
-_keyframes(process.env.NODE_ENV === \\"production\\" ? {
+_keyframes2(process.env.NODE_ENV === \\"production\\" ? {
   name: \\"1k98dea-rotate360\\",
   styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\"
 } : {
@@ -34,54 +34,6 @@ _keyframes(process.env.NODE_ENV === \\"production\\" ? {
 });"
 `;
 
-exports[`babel css inline babel 6 custom instance 1`] = `
-"import { css as _css } from 'my-emotion-instance';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return 'You have tried to stringify object returned from \`css\` function. It isn\\\\'t supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).'; }
-
-/*#__PURE__*/_css(process.env.NODE_ENV === 'production' ? {
-    name: '1lrxbo5',
-    styles: 'color:hotpink;'
-} : {
-    name: '1lrxbo5',
-    styles: 'color:hotpink;',
-    map: '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICdteS1lbW90aW9uLWluc3RhbmNlJ1xuICAgIGxvbGBjb2xvcjpob3RwaW5rO2AiXX0= */',
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 6 custom instance relative 1`] = `
-"import { css as _css } from './my-emotion-instance';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return 'You have tried to stringify object returned from \`css\` function. It isn\\\\'t supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).'; }
-
-/*#__PURE__*/_css(process.env.NODE_ENV === 'production' ? {
-    name: '1lrxbo5',
-    styles: 'color:hotpink;'
-} : {
-    name: '1lrxbo5',
-    styles: 'color:hotpink;',
-    map: '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICcuL215LWVtb3Rpb24taW5zdGFuY2UnXG4gICAgbG9sYGNvbG9yOmhvdHBpbms7YCJdfQ== */',
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 6 custom instance relative complex 1`] = `
-"import { css as _css } from '../__tests__/my-emotion-instance';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return 'You have tried to stringify object returned from \`css\` function. It isn\\\\'t supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).'; }
-
-/*#__PURE__*/_css(process.env.NODE_ENV === 'production' ? {
-    name: '1lrxbo5',
-    styles: 'color:hotpink;'
-} : {
-    name: '1lrxbo5',
-    styles: 'color:hotpink;',
-    map: '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICcuLi9fX3Rlc3RzX18vbXktZW1vdGlvbi1pbnN0YW5jZSdcbiAgICBsb2xgY29sb3I6aG90cGluaztgIl19 */',
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
 exports[`babel css inline babel 6 label format with dirname, filename, and local 1`] = `
 "import { css as _css } from 'emotion';
 
@@ -166,7 +118,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() {
 
 let someCls =
 /*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
+_css2(process.env.NODE_ENV === \\"production\\" ? {
   name: \\"1jwq1yt-someCls\\",
   styles: \\"color:hotpink;;label:someCls;\\"
 } : {
@@ -178,7 +130,7 @@ _css(process.env.NODE_ENV === \\"production\\" ? {
 
 let rotate360 =
 /*#__PURE__*/
-_keyframes(process.env.NODE_ENV === \\"production\\" ? {
+_keyframes2(process.env.NODE_ENV === \\"production\\" ? {
   name: \\"1k98dea-rotate360\\",
   styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\"
 } : {
@@ -189,57 +141,6 @@ _keyframes(process.env.NODE_ENV === \\"production\\" ? {
 });"
 `;
 
-exports[`babel css inline babel 7 custom instance 1`] = `
-"import { css as _css } from \\"my-emotion-instance\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
-  name: \\"1lrxbo5\\",
-  styles: \\"color:hotpink;\\"
-} : {
-  name: \\"1lrxbo5\\",
-  styles: \\"color:hotpink;\\",
-  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICdteS1lbW90aW9uLWluc3RhbmNlJ1xuICAgIGxvbGBjb2xvcjpob3RwaW5rO2AiXX0= */\\",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 7 custom instance relative 1`] = `
-"import { css as _css } from \\"./my-emotion-instance\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
-  name: \\"1lrxbo5\\",
-  styles: \\"color:hotpink;\\"
-} : {
-  name: \\"1lrxbo5\\",
-  styles: \\"color:hotpink;\\",
-  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICcuL215LWVtb3Rpb24taW5zdGFuY2UnXG4gICAgbG9sYGNvbG9yOmhvdHBpbms7YCJdfQ== */\\",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 7 custom instance relative complex 1`] = `
-"import { css as _css } from \\"../__tests__/my-emotion-instance\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
-  name: \\"1lrxbo5\\",
-  styles: \\"color:hotpink;\\"
-} : {
-  name: \\"1lrxbo5\\",
-  styles: \\"color:hotpink;\\",
-  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICcuLi9fX3Rlc3RzX18vbXktZW1vdGlvbi1pbnN0YW5jZSdcbiAgICBsb2xgY29sb3I6aG90cGluaztgIl19 */\\",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
 exports[`babel css inline babel 7 label format with dirname, filename, and local 1`] = `
 "import { css as _css } from \\"emotion\\";
 

diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap
@@ -34,6 +34,30 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
 const SomeComponent = props => <div css={_ref} {...props} />;"
 `;
 
+exports[`@emotion/babel-plugin-core core-with-css-import-dynamic 1`] = `
+"/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+
+const SomeComponent = props => (
+  <div
+    css={css\`
+      color: \${window};
+    \`}
+    {...props}
+  />
+)
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+
+const SomeComponent = props => <div css={
+/*#__PURE__*/
+css(\\"color:\\", window, \\";;label:SomeComponent;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvcmUtd2l0aC1jc3MtaW1wb3J0LWR5bmFtaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1kiLCJmaWxlIjoiY29yZS13aXRoLWNzcy1pbXBvcnQtZHluYW1pYy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHsganN4LCBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gcHJvcHMgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXtjc3NgXG4gICAgICBjb2xvcjogJHt3aW5kb3d9O1xuICAgIGB9XG4gICAgey4uLnByb3BzfVxuICAvPlxuKVxuIl19 */\\"))} {...props} />;"
+`;
+
 exports[`@emotion/babel-plugin-core does-not-change-other-props 1`] = `
 "/** @jsx jsx */
 import { jsx } from '@emotion/core'
@@ -50,6 +74,27 @@ const Svg = <rect style={{
 }} />;"
 `;
 
+exports[`@emotion/babel-plugin-core dynamic 1`] = `
+"/** @jsx jsx */
+import { jsx } from '@emotion/core'
+
+const SomeComponent = props => <div css={{ color: window }} {...props} />
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css as _css } from \\"@emotion/core\\";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+
+const SomeComponent = props => <div css={
+/*#__PURE__*/
+_css({
+  color: window
+}, \\";label:SomeComponent;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImR5bmFtaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR29DIiwiZmlsZSI6ImR5bmFtaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBwcm9wcyA9PiA8ZGl2IGNzcz17eyBjb2xvcjogd2luZG93IH19IHsuLi5wcm9wc30gLz5cbiJdfQ== */\\"))} {...props} />;"
+`;
+
 exports[`@emotion/babel-plugin-core function-declaration 1`] = `
 "// @flow
 import * as React from 'react'