Make cssPropOptimization's default always true (regardless of the @emotion/react import presence) (#2080)

Author: Andarist

.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.

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"]
 }
 ```
 

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.
 

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
  })
  }
  }

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)