Make cssPropOptimization's default always true (regardless of the…

… `@emotion/react` import presence) (#2080)
emotion-js · Nov 9, 2020 · b7d2137 · b7d2137
1 parent 688586d
commit b7d2137
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 28 deletions.
diff --git a/.changeset/slow-tables-shave.md b/.changeset/slow-tables-shave.md
@@ -0,0 +1,5 @@
+---
+'@emotion/babel-plugin': major
+---
+
+`cssPropOptimization` defaults now to `true` regardless of the `@emotion/react` import presence.
diff --git a/docs/css-prop.mdx b/docs/css-prop.mdx
@@ -46,7 +46,7 @@ If you are using the compatible React version (`>=16.14.0`) then you can opt int
       { "runtime": "automatic", "importSource": "@emotion/react" }
     ]
   ],
-  "plugins": [["@emotion/babel-plugin", { "cssPropOptimization": true }]]
+  "plugins": ["@emotion/babel-plugin"]
 }
 ```
 
@@ -67,7 +67,7 @@ In case you want to use the new JSX runtimes with [Next.js](https://nextjs.org/)
       }
     ]
   ],
-  "plugins": [["@emotion/babel-plugin", { "cssPropOptimization": true }]]
+  "plugins": ["@emotion/babel-plugin"]
 }
 ```
 

diff --git a/packages/babel-plugin/README.md b/packages/babel-plugin/README.md
@@ -293,7 +293,7 @@ const H1 = /*#__PURE__*/ styled('h1', {
 
 ### `cssPropOptimization`
 
-`boolean`, defaults to `true` if an import from `@emotion/react` is found in a file.
+`boolean`, defaults to `true`.
 
 This option assumes that you are using something to make `@emotion/react`'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.
 

diff --git a/packages/babel-plugin/src/index.js b/packages/babel-plugin/src/index.js
@@ -148,22 +148,22 @@ export default function(babel: *, options: *) {
       },
       Program(path: *, state: *) {
         let macros = {}
-        let jsxCoreImports: Array<{
+        let jsxReactImports: Array<{
           importSource: string,
           export: string,
           cssExport: string
         }> = [
           { importSource: '@emotion/react', export: 'jsx', cssExport: 'css' }
         ]
-        state.jsxCoreImport = jsxCoreImports[0]
+        state.jsxReactImport = jsxReactImports[0]
         Object.keys(state.opts.importMap || {}).forEach(importSource => {
           let value = state.opts.importMap[importSource]
           let transformers = {}
           Object.keys(value).forEach(localExportName => {
             let { canonicalImport, ...options } = value[localExportName]
             let [packageName, exportName] = canonicalImport
             if (packageName === '@emotion/react' && exportName === 'jsx') {
-              jsxCoreImports.push({
+              jsxReactImports.push({
                 importSource,
                 export: localExportName,
                 cssExport: getCssExport('jsx', importSource, value)
@@ -191,7 +191,9 @@ export default function(babel: *, options: *) {
             ) {
               // this is supposed to override defaultOptions value
               // and let correct value to be set if coming in options
-              extraOptions = { styledBaseImport: undefined }
+              extraOptions = {
+                styledBaseImport: undefined
+              }
             }
 
             let [exportTransformer, defaultOptions] =
@@ -202,7 +204,11 @@ export default function(babel: *, options: *) {
 
             transformers[localExportName] = [
               exportTransformer,
-              { ...defaultOptions, ...extraOptions, ...options }
+              {
+                ...defaultOptions,
+                ...extraOptions,
+                ...options
+              }
             ]
           })
           macros[importSource] = createTransformerMacro(transformers, {
@@ -217,26 +223,28 @@ export default function(babel: *, options: *) {
           '@emotion/css': vanillaEmotionMacro,
           ...macros
         }
-        if (state.opts.cssPropOptimization === undefined) {
-          for (const node of path.node.body) {
-            if (t.isImportDeclaration(node)) {
-              let jsxCoreImport = jsxCoreImports.find(
-                thing =>
-                  node.source.value === thing.importSource &&
-                  node.specifiers.some(
-                    x =>
-                      t.isImportSpecifier(x) && x.imported.name === thing.export
-                  )
-              )
-              if (jsxCoreImport) {
-                state.transformCssProp = true
-                state.jsxCoreImport = jsxCoreImport
-                break
-              }
+
+        for (const node of path.node.body) {
+          if (t.isImportDeclaration(node)) {
+            let jsxReactImport = jsxReactImports.find(
+              thing =>
+                node.source.value === thing.importSource &&
+                node.specifiers.some(
+                  x =>
+                    t.isImportSpecifier(x) && x.imported.name === thing.export
+                )
+            )
+            if (jsxReactImport) {
+              state.jsxReactImport = jsxReactImport
+              break
             }
           }
+        }
+
+        if (state.opts.cssPropOptimization === false) {
+          state.transformCssProp = false
         } else {
-          state.transformCssProp = state.opts.cssPropOptimization
+          state.transformCssProp = true
         }
 
         if (state.opts.sourceMap === false) {
@@ -262,7 +270,7 @@ export default function(babel: *, options: *) {
               state,
               babel,
               path,
-              cssImport: state.jsxCoreImport
+              cssImport: state.jsxReactImport
             })
           }
         }

diff --git a/scripts/babel-preset-emotion-dev/src/index.js b/scripts/babel-preset-emotion-dev/src/index.js
@@ -31,8 +31,7 @@ module.exports = (api, options = {}) => {
       options.useEmotionPlugin && [
         require.resolve('@emotion/babel-plugin'),
         {
-          ...('sourceMap' in options && { sourceMap: options.sourceMap }),
-          ...(options.runtime === 'automatic' && { cssPropOptimization: true })
+          ...('sourceMap' in options && { sourceMap: options.sourceMap })
         }
       ]
     ].filter(Boolean)