From 7362ca93084c1ed6db71b0022db84f43f0f758c1 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Sun, 10 Feb 2019 11:34:35 +1000 Subject: [PATCH 01/22] Add stuff to babel plugin readme --- packages/babel-plugin-emotion/README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/babel-plugin-emotion/README.md b/packages/babel-plugin-emotion/README.md index 398f94dbe..fa6fffd8c 100644 --- a/packages/babel-plugin-emotion/README.md +++ b/packages/babel-plugin-emotion/README.md @@ -307,6 +307,26 @@ 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. +### `importMap` + +This option allows you to re-export things from emotion packages for ...explain the reasons here and still get optimisations from babel-plugin-emotion (reword stuff) + +```js +{ + "my-package": { + "someExport": { + // this needs a better name + "canonicalImport": ["@emotion/core", "jsx"] + }, + "anotherExport": { + "canonicalImport": ["@emotion/styled", "default"], + // this option should be optional and have a better name + "baseStyledPackage": ["my-package", "anotherExport"] + } + } +} +``` + ## Babel Macros Instead of using `babel-plugin-emotion`, you can use emotion with [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros). Add `babel-plugin-macros` to your babel config (which is included in Create React App 2.0) and use the imports/packages shown below. From 6e43050bd90ad79be6652fa5c3cc6d746fed4882 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Sun, 10 Feb 2019 21:30:47 +1000 Subject: [PATCH 02/22] Refactor styled macro --- .../babel-plugin-emotion/src/styled-macro.js | 182 ++++++++++-------- 1 file changed, 102 insertions(+), 80 deletions(-) diff --git a/packages/babel-plugin-emotion/src/styled-macro.js b/packages/babel-plugin-emotion/src/styled-macro.js index a1d4ca7c5..b392c90bd 100644 --- a/packages/babel-plugin-emotion/src/styled-macro.js +++ b/packages/babel-plugin-emotion/src/styled-macro.js @@ -3,6 +3,101 @@ import { createMacro } from 'babel-plugin-macros' import { addDefault, addNamed } from '@babel/helper-module-imports' import { transformExpressionWithStyles, getStyledOptions } from './utils' +function addImport( + state: any, + importPath: string, + imported: string, + nameHint?: string +) { + let cacheKey = ['import', importPath, imported].join(':') + if (state[cacheKey] === undefined) { + let importIdentifier + if (imported === 'default') { + importIdentifier = addDefault(state.file.path, importPath, { nameHint }) + } else { + importIdentifier = addNamed(state.file.path, imported, importPath, { + nameHint + }) + } + state[cacheKey] = importIdentifier.name + } + return { + type: 'Identifier', + name: state[cacheKey] + } +} + +export let styledTransformer = ({ + state, + babel, + importPath, + reference, + options: { baseImportPath, isWeb } +}: Object) => { + let getStyledIdentifier = () => { + return addImport(state, baseImportPath, 'default', 'styled') + } + let getOriginalImportPathStyledIdentifier = () => { + return addImport(state, importPath, 'default', 'styled') + } + let t = babel.types + let isCall = false + if ( + t.isMemberExpression(reference.parent) && + reference.parent.computed === false + ) { + isCall = true + if ( + // checks if the first character is lowercase + // becasue we don't want to transform the member expression if + // it's in primitives/native + reference.parent.property.name.charCodeAt(0) > 96 + ) { + reference.parentPath.replaceWith( + t.callExpression(getStyledIdentifier(), [ + t.stringLiteral(reference.parent.property.name) + ]) + ) + } else { + reference.replaceWith(getStyledIdentifier()) + } + } else if ( + reference.parentPath && + reference.parentPath.parentPath && + t.isCallExpression(reference.parentPath) && + reference.parent.callee === reference.node + ) { + isCall = true + reference.replaceWith(getStyledIdentifier()) + } else { + reference.replaceWith(getOriginalImportPathStyledIdentifier()) + } + if (reference.parentPath && reference.parentPath.parentPath) { + const styledCallPath = reference.parentPath.parentPath + let { node } = transformExpressionWithStyles({ + path: styledCallPath, + state, + babel, + shouldLabel: false + }) + if (node && isWeb) { + // we know the argument length will be 1 since that's the only time we will have a node since it will be static + styledCallPath.node.arguments[0] = node + } + } + + if (isCall) { + reference.addComment('leading', '#__PURE__') + if (isWeb) { + reference.parentPath.node.arguments[1] = getStyledOptions( + t, + reference.parentPath, + state + ) + } + } +} + export let createStyledMacro = ({ importPath, originalImportPath = importPath, @@ -18,87 +113,14 @@ export let createStyledMacro = ({ } const t = babel.types if (references.default && references.default.length) { - let _styledIdentifier - let getStyledIdentifier = () => { - if (_styledIdentifier === undefined) { - _styledIdentifier = addDefault(state.file.path, importPath, { - nameHint: 'styled' - }) - } - return t.cloneDeep(_styledIdentifier) - } - let originalImportPathStyledIdentifier - let getOriginalImportPathStyledIdentifier = () => { - if (originalImportPathStyledIdentifier === undefined) { - originalImportPathStyledIdentifier = addDefault( - state.file.path, - originalImportPath, - { - nameHint: 'styled' - } - ) - } - return t.cloneDeep(originalImportPathStyledIdentifier) - } - if (importPath === originalImportPath) { - getOriginalImportPathStyledIdentifier = getStyledIdentifier - } references.default.forEach(reference => { - let isCall = false - if ( - t.isMemberExpression(reference.parent) && - reference.parent.computed === false - ) { - isCall = true - if ( - // checks if the first character is lowercase - // becasue we don't want to transform the member expression if - // it's in primitives/native - reference.parent.property.name.charCodeAt(0) > 96 - ) { - reference.parentPath.replaceWith( - t.callExpression(getStyledIdentifier(), [ - t.stringLiteral(reference.parent.property.name) - ]) - ) - } else { - reference.replaceWith(getStyledIdentifier()) - } - } else if ( - reference.parentPath && - reference.parentPath.parentPath && - t.isCallExpression(reference.parentPath) && - reference.parent.callee === reference.node - ) { - isCall = true - reference.replaceWith(getStyledIdentifier()) - } else { - reference.replaceWith(getOriginalImportPathStyledIdentifier()) - } - if (reference.parentPath && reference.parentPath.parentPath) { - const styledCallPath = reference.parentPath.parentPath - let { node } = transformExpressionWithStyles({ - path: styledCallPath, - state, - babel, - shouldLabel: false - }) - if (node && isWeb) { - // we know the argument length will be 1 since that's the only time we will have a node since it will be static - styledCallPath.node.arguments[0] = node - } - } - - if (isCall) { - reference.addComment('leading', '#__PURE__') - if (isWeb) { - reference.parentPath.node.arguments[1] = getStyledOptions( - t, - reference.parentPath, - state - ) - } - } + styledTransformer({ + state, + babel, + reference, + importPath: originalImportPath, + options: { baseImportPath: importPath, isWeb } + }) }) } Object.keys(references) From 5e02adb3fe72c4db45e49d8a409ecfdb1d14942c Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Sun, 10 Feb 2019 21:49:46 +1000 Subject: [PATCH 03/22] Refactor other macros --- .../babel-plugin-emotion/src/css-macro.js | 20 +++-- packages/babel-plugin-emotion/src/macro.js | 78 ++++++++++--------- .../babel-plugin-emotion/src/styled-macro.js | 32 ++------ .../src/utils/add-import.js | 25 ++++++ .../babel-plugin-emotion/src/utils/index.js | 1 + 5 files changed, 86 insertions(+), 70 deletions(-) create mode 100644 packages/babel-plugin-emotion/src/utils/add-import.js diff --git a/packages/babel-plugin-emotion/src/css-macro.js b/packages/babel-plugin-emotion/src/css-macro.js index 9a74016d3..d676ada5c 100644 --- a/packages/babel-plugin-emotion/src/css-macro.js +++ b/packages/babel-plugin-emotion/src/css-macro.js @@ -1,7 +1,7 @@ // @flow import { createMacro } from 'babel-plugin-macros' import { addDefault, addNamed } from '@babel/helper-module-imports' -import { transformExpressionWithStyles } from './utils' +import { transformExpressionWithStyles, addImport } from './utils' export const transformCssCallExpression = ({ babel, @@ -31,6 +31,11 @@ export const transformCssCallExpression = ({ } } +let coreCssTransformer = ({ state, babel, importPath, reference }) => { + reference.replaceWith(addImport(state, importPath, 'default', 'css')) + transformCssCallExpression({ babel, state, path: reference.parentPath }) +} + export default createMacro(({ references, state, babel, isEmotionCall }) => { if (!isEmotionCall) { state.emotionSourceMap = true @@ -38,13 +43,12 @@ export default createMacro(({ references, state, babel, isEmotionCall }) => { const t = babel.types if (references.default && references.default.length) { references.default.reverse().forEach(reference => { - if (!state.cssIdentifier) { - state.cssIdentifier = addDefault(reference, '@emotion/css', { - nameHint: 'css' - }) - } - reference.replaceWith(t.cloneDeep(state.cssIdentifier)) - transformCssCallExpression({ babel, state, path: reference.parentPath }) + coreCssTransformer({ + state, + babel, + importPath: '@emotion/css', + reference + }) }) } Object.keys(references) diff --git a/packages/babel-plugin-emotion/src/macro.js b/packages/babel-plugin-emotion/src/macro.js index a82c7df90..b2d637f74 100644 --- a/packages/babel-plugin-emotion/src/macro.js +++ b/packages/babel-plugin-emotion/src/macro.js @@ -1,50 +1,56 @@ // @flow -import { transformExpressionWithStyles } from './utils' -import { addNamed } from '@babel/helper-module-imports' +import { transformExpressionWithStyles, addImport } from './utils' import { createMacro } from 'babel-plugin-macros' +let createEmotionTransformer = (imported: string, isPure: boolean) => ({ + state, + babel, + importPath, + reference +}: Object) => { + const path = reference.parentPath + + reference.replaceWith(addImport(state, importPath, imported)) + if (isPure) { + path.addComment('leading', '#__PURE__') + } + let { node } = transformExpressionWithStyles({ + babel, + state, + path, + shouldLabel: true + }) + if (node) { + path.node.arguments[0] = node + } +} + +export let transformers = { + css: createEmotionTransformer('css', true), + injectGlobal: createEmotionTransformer('injectGlobal', false), + keyframes: createEmotionTransformer('keyframes', true) +} + export let createEmotionMacro = (instancePath: string) => createMacro(function macro({ references, state, babel, isEmotionCall }) { if (!isEmotionCall) { state.emotionSourceMap = true } - let t = babel.types Object.keys(references).forEach(referenceKey => { - let isPure = true - let runtimeNode = addNamed(state.file.path, referenceKey, instancePath) - - switch (referenceKey) { - case 'injectGlobal': { - isPure = false - } - // eslint-disable-next-line no-fallthrough - case 'css': - case 'keyframes': { - references[referenceKey].reverse().forEach(reference => { - const path = reference.parentPath - - reference.replaceWith(t.cloneDeep(runtimeNode)) - if (isPure) { - path.addComment('leading', '#__PURE__') - } - let { node } = transformExpressionWithStyles({ - babel, - state, - path, - shouldLabel: true - }) - if (node) { - path.node.arguments[0] = node - } - }) - break - } - default: { - references[referenceKey].reverse().forEach(reference => { - reference.replaceWith(t.cloneDeep(runtimeNode)) + if (transformers[referenceKey]) { + references[referenceKey].reverse().forEach(reference => { + transformers[referenceKey]({ + state, + babel, + reference, + importPath: instancePath }) - } + }) + } else { + references[referenceKey].reverse().forEach(reference => { + reference.replaceWith(addImport(state, instancePath, referenceKey)) + }) } }) }) diff --git a/packages/babel-plugin-emotion/src/styled-macro.js b/packages/babel-plugin-emotion/src/styled-macro.js index b392c90bd..8a939b15b 100644 --- a/packages/babel-plugin-emotion/src/styled-macro.js +++ b/packages/babel-plugin-emotion/src/styled-macro.js @@ -1,31 +1,11 @@ // @flow import { createMacro } from 'babel-plugin-macros' -import { addDefault, addNamed } from '@babel/helper-module-imports' -import { transformExpressionWithStyles, getStyledOptions } from './utils' - -function addImport( - state: any, - importPath: string, - imported: string, - nameHint?: string -) { - let cacheKey = ['import', importPath, imported].join(':') - if (state[cacheKey] === undefined) { - let importIdentifier - if (imported === 'default') { - importIdentifier = addDefault(state.file.path, importPath, { nameHint }) - } else { - importIdentifier = addNamed(state.file.path, imported, importPath, { - nameHint - }) - } - state[cacheKey] = importIdentifier.name - } - return { - type: 'Identifier', - name: state[cacheKey] - } -} +import { addNamed } from '@babel/helper-module-imports' +import { + transformExpressionWithStyles, + getStyledOptions, + addImport +} from './utils' export let styledTransformer = ({ state, diff --git a/packages/babel-plugin-emotion/src/utils/add-import.js b/packages/babel-plugin-emotion/src/utils/add-import.js new file mode 100644 index 000000000..5e94bd295 --- /dev/null +++ b/packages/babel-plugin-emotion/src/utils/add-import.js @@ -0,0 +1,25 @@ +import { addDefault, addNamed } from '@babel/helper-module-imports' + +export function addImport( + state: any, + importPath: string, + imported: string, + nameHint?: string +) { + let cacheKey = ['import', importPath, imported].join(':') + if (state[cacheKey] === undefined) { + let importIdentifier + if (imported === 'default') { + importIdentifier = addDefault(state.file.path, importPath, { nameHint }) + } else { + importIdentifier = addNamed(state.file.path, imported, importPath, { + nameHint + }) + } + state[cacheKey] = importIdentifier.name + } + return { + type: 'Identifier', + name: state[cacheKey] + } +} diff --git a/packages/babel-plugin-emotion/src/utils/index.js b/packages/babel-plugin-emotion/src/utils/index.js index 453e37526..c02549e5a 100644 --- a/packages/babel-plugin-emotion/src/utils/index.js +++ b/packages/babel-plugin-emotion/src/utils/index.js @@ -9,3 +9,4 @@ export { } from './transform-expression-with-styles' export { getStyledOptions } from './get-styled-options' export { appendStringToExpressions, joinStringLiterals } from './strings' +export { addImport } from './add-import' From 3be74108db04b2d107caead2de0d77fa63f3b448 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Sun, 10 Feb 2019 22:09:23 +1000 Subject: [PATCH 04/22] WIP more refactoring --- .../babel-plugin-emotion/src/css-macro.js | 42 ++++--------------- packages/babel-plugin-emotion/src/macro.js | 30 +++---------- .../babel-plugin-emotion/src/styled-macro.js | 32 ++------------ .../babel-plugin-emotion/src/utils/index.js | 1 + .../src/utils/transformer-macro.js | 36 ++++++++++++++++ 5 files changed, 56 insertions(+), 85 deletions(-) create mode 100644 packages/babel-plugin-emotion/src/utils/transformer-macro.js diff --git a/packages/babel-plugin-emotion/src/css-macro.js b/packages/babel-plugin-emotion/src/css-macro.js index d676ada5c..bfc8a67b2 100644 --- a/packages/babel-plugin-emotion/src/css-macro.js +++ b/packages/babel-plugin-emotion/src/css-macro.js @@ -1,7 +1,9 @@ // @flow -import { createMacro } from 'babel-plugin-macros' -import { addDefault, addNamed } from '@babel/helper-module-imports' -import { transformExpressionWithStyles, addImport } from './utils' +import { + transformExpressionWithStyles, + addImport, + createTransformerMacro +} from './utils' export const transformCssCallExpression = ({ babel, @@ -36,33 +38,7 @@ let coreCssTransformer = ({ state, babel, importPath, reference }) => { transformCssCallExpression({ babel, state, path: reference.parentPath }) } -export default createMacro(({ references, state, babel, isEmotionCall }) => { - if (!isEmotionCall) { - state.emotionSourceMap = true - } - const t = babel.types - if (references.default && references.default.length) { - references.default.reverse().forEach(reference => { - coreCssTransformer({ - state, - babel, - importPath: '@emotion/css', - reference - }) - }) - } - Object.keys(references) - .filter(x => x !== 'default') - .forEach(referenceKey => { - let runtimeNode = addNamed( - state.file.path, - referenceKey, - '@emotion/css', - { nameHint: referenceKey } - ) - - references[referenceKey].reverse().forEach(reference => { - reference.replaceWith(t.cloneDeep(runtimeNode)) - }) - }) -}) +export default createTransformerMacro( + { default: coreCssTransformer }, + '@emotion/css' +) diff --git a/packages/babel-plugin-emotion/src/macro.js b/packages/babel-plugin-emotion/src/macro.js index b2d637f74..8e0cdba62 100644 --- a/packages/babel-plugin-emotion/src/macro.js +++ b/packages/babel-plugin-emotion/src/macro.js @@ -1,6 +1,9 @@ // @flow -import { transformExpressionWithStyles, addImport } from './utils' -import { createMacro } from 'babel-plugin-macros' +import { + transformExpressionWithStyles, + addImport, + createTransformerMacro +} from './utils' let createEmotionTransformer = (imported: string, isPure: boolean) => ({ state, @@ -32,25 +35,4 @@ export let transformers = { } export let createEmotionMacro = (instancePath: string) => - createMacro(function macro({ references, state, babel, isEmotionCall }) { - if (!isEmotionCall) { - state.emotionSourceMap = true - } - - Object.keys(references).forEach(referenceKey => { - if (transformers[referenceKey]) { - references[referenceKey].reverse().forEach(reference => { - transformers[referenceKey]({ - state, - babel, - reference, - importPath: instancePath - }) - }) - } else { - references[referenceKey].reverse().forEach(reference => { - reference.replaceWith(addImport(state, instancePath, referenceKey)) - }) - } - }) - }) + createTransformerMacro(transformers, instancePath) diff --git a/packages/babel-plugin-emotion/src/styled-macro.js b/packages/babel-plugin-emotion/src/styled-macro.js index 8a939b15b..be1f49673 100644 --- a/packages/babel-plugin-emotion/src/styled-macro.js +++ b/packages/babel-plugin-emotion/src/styled-macro.js @@ -1,10 +1,9 @@ // @flow -import { createMacro } from 'babel-plugin-macros' -import { addNamed } from '@babel/helper-module-imports' import { transformExpressionWithStyles, getStyledOptions, - addImport + addImport, + createTransformerMacro } from './utils' export let styledTransformer = ({ @@ -87,29 +86,6 @@ export let createStyledMacro = ({ originalImportPath?: string, isWeb: boolean }) => - createMacro(({ references, state, babel, isEmotionCall }) => { - if (!isEmotionCall) { - state.emotionSourceMap = true - } - const t = babel.types - if (references.default && references.default.length) { - references.default.forEach(reference => { - styledTransformer({ - state, - babel, - reference, - importPath: originalImportPath, - options: { baseImportPath: importPath, isWeb } - }) - }) - } - Object.keys(references) - .filter(x => x !== 'default') - .forEach(referenceKey => { - let runtimeNode = addNamed(state.file.path, referenceKey, importPath) - - references[referenceKey].reverse().forEach(reference => { - reference.replaceWith(t.cloneDeep(runtimeNode)) - }) - }) + createTransformerMacro({ default: styledTransformer }, originalImportPath, { + baseImportPath: importPath }) diff --git a/packages/babel-plugin-emotion/src/utils/index.js b/packages/babel-plugin-emotion/src/utils/index.js index c02549e5a..45c05ee22 100644 --- a/packages/babel-plugin-emotion/src/utils/index.js +++ b/packages/babel-plugin-emotion/src/utils/index.js @@ -10,3 +10,4 @@ export { export { getStyledOptions } from './get-styled-options' export { appendStringToExpressions, joinStringLiterals } from './strings' export { addImport } from './add-import' +export { createTransformerMacro } from './transformer-macro' diff --git a/packages/babel-plugin-emotion/src/utils/transformer-macro.js b/packages/babel-plugin-emotion/src/utils/transformer-macro.js new file mode 100644 index 000000000..756ce7495 --- /dev/null +++ b/packages/babel-plugin-emotion/src/utils/transformer-macro.js @@ -0,0 +1,36 @@ +// @flow +import { createMacro } from 'babel-plugin-macros' +import { addImport } from './add-import' + +type Transformer = Function + +export function createTransformerMacro( + transformers: { [key: string]: Transformer }, + importPath: string, + options?: any +) { + return createMacro(({ references, state, babel, isEmotionCall }) => { + if (!isEmotionCall) { + state.emotionSourceMap = true + } + Object.keys(references).forEach(referenceKey => { + if (transformers[referenceKey]) { + references[referenceKey].reverse().forEach(reference => { + transformers[referenceKey]({ + state, + babel, + importPath, + options, + reference + }) + }) + } else { + references[referenceKey].reverse().forEach(reference => { + reference.replaceWith( + addImport(state, importPath, referenceKey, reference.name) + ) + }) + } + }) + }) +} From 96acab59aa774a85220e81aa4d9e67706cf10c16 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Sun, 10 Feb 2019 22:14:20 +1000 Subject: [PATCH 05/22] Fix stuff --- .../__tests__/__snapshots__/styled.js.snap | 28 +++++++++---------- .../styled-macro/__snapshots__/index.js.snap | 24 ++++++++-------- packages/babel-plugin-emotion/src/index.js | 10 ++----- .../babel-plugin-emotion/src/styled-macro.js | 3 +- 4 files changed, 30 insertions(+), 35 deletions(-) diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap index d89520cb3..69a0d05cb 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap @@ -115,7 +115,7 @@ let OneLastComponent = styled.div({ import _styled from \\"@emotion/styled-base\\"; const SomeComponent = _styled(\\"div\\", { - target: \\"e4byx850\\", + target: \\"e4byx853\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"1lrxbo5\\", @@ -127,7 +127,7 @@ const SomeComponent = _styled(\\"div\\", { }); let SomeOtherComponent = _styled(\\"div\\", { - target: \\"e4byx851\\", + target: \\"e4byx852\\", label: \\"SomeOtherComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"1lrxbo5\\", @@ -139,12 +139,12 @@ let SomeOtherComponent = _styled(\\"div\\", { }); let AnotherComponent = _styled(\\"div\\", { - target: \\"e4byx852\\", + target: \\"e4byx851\\", label: \\"AnotherComponent\\" })(SomeComponent, \\"{color:green;}\\", SomeOtherComponent, \\"{color:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRaUMiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\")); let OneLastComponent = _styled(\\"div\\", { - target: \\"e4byx853\\", + target: \\"e4byx850\\", label: \\"OneLastComponent\\" })({ [SomeComponent]: { @@ -188,13 +188,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i /*#__PURE__*/ _styled('div', { shouldForwardProp: window.whatever, - target: \\"ek6pnb20\\" + target: \\"ek6pnb24\\" }, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEiLCJmaWxlIjoiZXhpc3Rpbmctb3B0aW9ucy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5zdHlsZWQoJ2RpdicsIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LCB3aW5kb3cud2hhdGV2ZXIpKClcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKWBgXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pKClcblxuc3R5bGVkKFxuICB3aW5kb3cud2hhdGV2ZXIsXG4gIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LFxuICB3aW5kb3cud2hhdGV2ZXJcbilgYFxuXG5jb25zdCBjZmcgPSB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfVxuc3R5bGVkKCdidXR0b24nLCBjZmcpKHt9KVxuIl19 */\\"); /*#__PURE__*/ _styled('div', { shouldForwardProp: window.whatever, - target: \\"ek6pnb21\\" + target: \\"ek6pnb23\\" }, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXNFIiwiZmlsZSI6ImV4aXN0aW5nLW9wdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKSgpXG5cbnN0eWxlZCgnZGl2JywgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sIHdpbmRvdy53aGF0ZXZlcilgYFxuXG5zdHlsZWQoXG4gIHdpbmRvdy53aGF0ZXZlcixcbiAgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sXG4gIHdpbmRvdy53aGF0ZXZlclxuKSgpXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pYGBcblxuY29uc3QgY2ZnID0geyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH1cbnN0eWxlZCgnYnV0dG9uJywgY2ZnKSh7fSlcbiJdfQ== */\\"); /*#__PURE__*/ @@ -206,7 +206,7 @@ _styled(window.whatever, { /*#__PURE__*/ _styled(window.whatever, { shouldForwardProp: window.whatever, - target: \\"ek6pnb23\\" + target: \\"ek6pnb21\\" }, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JDIiwiZmlsZSI6ImV4aXN0aW5nLW9wdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKSgpXG5cbnN0eWxlZCgnZGl2JywgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sIHdpbmRvdy53aGF0ZXZlcilgYFxuXG5zdHlsZWQoXG4gIHdpbmRvdy53aGF0ZXZlcixcbiAgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sXG4gIHdpbmRvdy53aGF0ZXZlclxuKSgpXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pYGBcblxuY29uc3QgY2ZnID0geyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH1cbnN0eWxlZCgnYnV0dG9uJywgY2ZnKSh7fSlcbiJdfQ== */\\"); const cfg = { @@ -215,7 +215,7 @@ const cfg = { /*#__PURE__*/ _styled('button', _extends({}, { - target: \\"ek6pnb24\\" + target: \\"ek6pnb20\\" }, cfg))(process.env.NODE_ENV === \\"production\\" ? { name: \\"0\\", styles: \\"\\" @@ -266,7 +266,7 @@ import _styled from \\"@emotion/styled-base\\"; class Thing { static SomeComponent = _styled(\\"div\\", { - target: \\"egllku90\\", + target: \\"egllku91\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"1lrxbo5\\", @@ -277,7 +277,7 @@ class Thing { map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdtQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\" }); BadIdeaComponent = _styled(\\"div\\", { - target: \\"egllku91\\", + target: \\"egllku90\\", label: \\"BadIdeaComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"d1m7sn\\", @@ -338,7 +338,7 @@ const SomeOtherComponent = styled.button\` import _styled from \\"@emotion/styled-base\\"; const SomeComponent = _styled(\\"div\\", { - target: \\"eqvttbz0\\", + target: \\"eqvttbz1\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"1lrxbo5\\", @@ -350,7 +350,7 @@ const SomeComponent = _styled(\\"div\\", { }); const SomeOtherComponent = _styled(\\"button\\", { - target: \\"eqvttbz1\\", + target: \\"eqvttbz0\\", label: \\"SomeOtherComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"bjcoli\\", @@ -482,8 +482,8 @@ otherThing() ↓ ↓ ↓ ↓ ↓ ↓ -import { otherThing as _otherThing } from \\"@emotion/styled-base\\"; -import { something as _something } from \\"@emotion/styled-base\\"; +import { otherThing as _otherThing } from \\"@emotion/styled\\"; +import { something as _something } from \\"@emotion/styled\\"; _something(); diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap index 1e5461063..62b72664b 100644 --- a/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap +++ b/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap @@ -115,7 +115,7 @@ let OneLastComponent = styled.div({ import _styled from \\"@emotion/styled-base\\"; const SomeComponent = _styled(\\"div\\", { - target: \\"e4byx850\\", + target: \\"e4byx853\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"1lrxbo5\\", @@ -127,7 +127,7 @@ const SomeComponent = _styled(\\"div\\", { }); let SomeOtherComponent = _styled(\\"div\\", { - target: \\"e4byx851\\", + target: \\"e4byx852\\", label: \\"SomeOtherComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"1lrxbo5\\", @@ -139,12 +139,12 @@ let SomeOtherComponent = _styled(\\"div\\", { }); let AnotherComponent = _styled(\\"div\\", { - target: \\"e4byx852\\", + target: \\"e4byx851\\", label: \\"AnotherComponent\\" })(SomeComponent, \\"{color:green;}\\", SomeOtherComponent, \\"{color:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRaUMiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\")); let OneLastComponent = _styled(\\"div\\", { - target: \\"e4byx853\\", + target: \\"e4byx850\\", label: \\"OneLastComponent\\" })({ [SomeComponent]: { @@ -188,13 +188,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i /*#__PURE__*/ _styled('div', { shouldForwardProp: window.whatever, - target: \\"ek6pnb20\\" + target: \\"ek6pnb24\\" }, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEiLCJmaWxlIjoiZXhpc3Rpbmctb3B0aW9ucy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkL21hY3JvJ1xuXG5zdHlsZWQoJ2RpdicsIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LCB3aW5kb3cud2hhdGV2ZXIpKClcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKWBgXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pKClcblxuc3R5bGVkKFxuICB3aW5kb3cud2hhdGV2ZXIsXG4gIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LFxuICB3aW5kb3cud2hhdGV2ZXJcbilgYFxuXG5jb25zdCBjZmcgPSB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfVxuc3R5bGVkKCdidXR0b24nLCBjZmcpKHt9KVxuIl19 */\\"); /*#__PURE__*/ _styled('div', { shouldForwardProp: window.whatever, - target: \\"ek6pnb21\\" + target: \\"ek6pnb23\\" }, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXNFIiwiZmlsZSI6ImV4aXN0aW5nLW9wdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKSgpXG5cbnN0eWxlZCgnZGl2JywgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sIHdpbmRvdy53aGF0ZXZlcilgYFxuXG5zdHlsZWQoXG4gIHdpbmRvdy53aGF0ZXZlcixcbiAgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sXG4gIHdpbmRvdy53aGF0ZXZlclxuKSgpXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pYGBcblxuY29uc3QgY2ZnID0geyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH1cbnN0eWxlZCgnYnV0dG9uJywgY2ZnKSh7fSlcbiJdfQ== */\\"); /*#__PURE__*/ @@ -206,7 +206,7 @@ _styled(window.whatever, { /*#__PURE__*/ _styled(window.whatever, { shouldForwardProp: window.whatever, - target: \\"ek6pnb23\\" + target: \\"ek6pnb21\\" }, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JDIiwiZmlsZSI6ImV4aXN0aW5nLW9wdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKSgpXG5cbnN0eWxlZCgnZGl2JywgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sIHdpbmRvdy53aGF0ZXZlcilgYFxuXG5zdHlsZWQoXG4gIHdpbmRvdy53aGF0ZXZlcixcbiAgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sXG4gIHdpbmRvdy53aGF0ZXZlclxuKSgpXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pYGBcblxuY29uc3QgY2ZnID0geyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH1cbnN0eWxlZCgnYnV0dG9uJywgY2ZnKSh7fSlcbiJdfQ== */\\"); const cfg = { @@ -215,7 +215,7 @@ const cfg = { /*#__PURE__*/ _styled('button', _extends({}, { - target: \\"ek6pnb24\\" + target: \\"ek6pnb20\\" }, cfg))(process.env.NODE_ENV === \\"production\\" ? { name: \\"0\\", styles: \\"\\" @@ -266,7 +266,7 @@ import _styled from \\"@emotion/styled-base\\"; class Thing { static SomeComponent = _styled(\\"div\\", { - target: \\"egllku90\\", + target: \\"egllku91\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"1lrxbo5\\", @@ -277,7 +277,7 @@ class Thing { map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdtQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkL21hY3JvJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\" }); BadIdeaComponent = _styled(\\"div\\", { - target: \\"egllku91\\", + target: \\"egllku90\\", label: \\"BadIdeaComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"d1m7sn\\", @@ -338,7 +338,7 @@ const SomeOtherComponent = styled.button\` import _styled from \\"@emotion/styled-base\\"; const SomeComponent = _styled(\\"div\\", { - target: \\"eqvttbz0\\", + target: \\"eqvttbz1\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"1lrxbo5\\", @@ -350,7 +350,7 @@ const SomeComponent = _styled(\\"div\\", { }); const SomeOtherComponent = _styled(\\"button\\", { - target: \\"eqvttbz1\\", + target: \\"eqvttbz0\\", label: \\"SomeOtherComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { name: \\"bjcoli\\", diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index 84a6cbdd4..b9124a560 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -2,9 +2,8 @@ import { createEmotionMacro } from './macro' import { createStyledMacro } from './styled-macro' import cssMacro, { transformCssCallExpression } from './css-macro' -import { addDefault } from '@babel/helper-module-imports' import nodePath from 'path' -import { getSourceMap, getStyledOptions } from './utils' +import { getSourceMap, getStyledOptions, addImport } from './utils' let webStyledMacro = createStyledMacro({ importPath: '@emotion/styled-base', @@ -206,14 +205,9 @@ export default function(babel: *) { sourceMap }) if (t.isCallExpression(expressionPath)) { - if (!state.cssIdentifier) { - state.cssIdentifier = addDefault(path, '@emotion/css', { - nameHint: 'css' - }) - } expressionPath .get('callee') - .replaceWith(t.cloneDeep(state.cssIdentifier)) + .replaceWith(addImport(state, '@emotion/css', 'default', 'css')) } } }, diff --git a/packages/babel-plugin-emotion/src/styled-macro.js b/packages/babel-plugin-emotion/src/styled-macro.js index be1f49673..6f9a415f7 100644 --- a/packages/babel-plugin-emotion/src/styled-macro.js +++ b/packages/babel-plugin-emotion/src/styled-macro.js @@ -87,5 +87,6 @@ export let createStyledMacro = ({ isWeb: boolean }) => createTransformerMacro({ default: styledTransformer }, originalImportPath, { - baseImportPath: importPath + baseImportPath: importPath, + isWeb }) From 33325b413598aa433826e404b18129aa5c310476 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Sun, 24 Feb 2019 20:54:19 +1000 Subject: [PATCH 06/22] WIP --- packages/babel-plugin-emotion/README.md | 4 +- .../babel-plugin-emotion/src/css-macro.js | 2 +- packages/babel-plugin-emotion/src/index.js | 66 +++++++++++++++++-- .../babel-plugin-emotion/src/styled-macro.js | 18 +++-- .../src/utils/transformer-macro.js | 16 +++-- 5 files changed, 90 insertions(+), 16 deletions(-) diff --git a/packages/babel-plugin-emotion/README.md b/packages/babel-plugin-emotion/README.md index fa6fffd8c..38f396356 100644 --- a/packages/babel-plugin-emotion/README.md +++ b/packages/babel-plugin-emotion/README.md @@ -315,10 +315,10 @@ This option allows you to re-export things from emotion packages for ...explain { "my-package": { "someExport": { - // this needs a better name - "canonicalImport": ["@emotion/core", "jsx"] + "canonicalImport": ["@emotion/css", "default"] }, "anotherExport": { + // this needs a better name "canonicalImport": ["@emotion/styled", "default"], // this option should be optional and have a better name "baseStyledPackage": ["my-package", "anotherExport"] diff --git a/packages/babel-plugin-emotion/src/css-macro.js b/packages/babel-plugin-emotion/src/css-macro.js index bfc8a67b2..d8e601119 100644 --- a/packages/babel-plugin-emotion/src/css-macro.js +++ b/packages/babel-plugin-emotion/src/css-macro.js @@ -33,7 +33,7 @@ export const transformCssCallExpression = ({ } } -let coreCssTransformer = ({ state, babel, importPath, reference }) => { +export let coreCssTransformer = ({ state, babel, importPath, reference }) => { reference.replaceWith(addImport(state, importPath, 'default', 'css')) transformCssCallExpression({ babel, state, path: reference.parentPath }) } diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index b9124a560..05a2d1007 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -1,9 +1,20 @@ // @flow -import { createEmotionMacro } from './macro' -import { createStyledMacro } from './styled-macro' -import cssMacro, { transformCssCallExpression } from './css-macro' +import { + createEmotionMacro, + transformers as vanillaTransformers +} from './macro' +import { createStyledMacro, styledTransformer } from './styled-macro' +import cssMacro, { + transformCssCallExpression, + coreCssTransformer +} from './css-macro' import nodePath from 'path' -import { getSourceMap, getStyledOptions, addImport } from './utils' +import { + getSourceMap, + getStyledOptions, + addImport, + createTransformerMacro +} from './utils' let webStyledMacro = createStyledMacro({ importPath: '@emotion/styled-base', @@ -21,6 +32,31 @@ let primitivesStyledMacro = createStyledMacro({ isWeb: false }) +let transformersSource = { + emotion: vanillaTransformers, + '@emotion/css': { + default: coreCssTransformer + }, + // this might be annoying because @emotion/core is special so gonna deal with it later + // '@emotion/core': { + // // jsx isn't included here because it's handled differently + // css: coreCssTransformer + // // TODO: maybe write transformers for keyframes and Global + // }, + '@emotion/styled': { + default: [ + styledTransformer, + { baseImportPath: '@emotion/styled-base', isWeb: true } + ] + }, + '@emotion/primitives': { + default: [styledTransformer, { isWeb: false }] + }, + '@emotion/native': { + default: [styledTransformer, { isWeb: false }] + } +} + export const macros = { createEmotionMacro, css: cssMacro, @@ -141,6 +177,28 @@ export default function(babel: *) { state.emotionInstancePaths = (state.opts.instances || []).map( instancePath => getInstancePathToCompare(instancePath, process.cwd()) ) + let macros = {} + Object.keys(state.opts.importMap).forEach(key => { + let value = state.opts.importMap[key] + let transformers = {} + Object.keys(value).forEach(localExportName => { + let { canonicalImport, ...options } = value[localExportName] + let [packageName, exportName] = canonicalImport + let packageTransformers = transformersSource[packageName] + let error = new Error( + `There is no transformer for the export '${exportName}' in package '${packageName}'` + ) + if (packageTransformers === undefined) { + throw error + } + let exportTransformer = packageTransformers[exportName] + if (packageTransformers === undefined) { + throw error + } + transformers[localExportName] = [exportTransformer, options] + }) + macros[key] = createTransformerMacro(transformers) + }) state.pluginMacros = { '@emotion/css': cssMacro, '@emotion/styled': webStyledMacro, diff --git a/packages/babel-plugin-emotion/src/styled-macro.js b/packages/babel-plugin-emotion/src/styled-macro.js index 6f9a415f7..8cb980139 100644 --- a/packages/babel-plugin-emotion/src/styled-macro.js +++ b/packages/babel-plugin-emotion/src/styled-macro.js @@ -11,7 +11,7 @@ export let styledTransformer = ({ babel, importPath, reference, - options: { baseImportPath, isWeb } + options: { baseImportPath = importPath, isWeb } }: Object) => { let getStyledIdentifier = () => { return addImport(state, baseImportPath, 'default', 'styled') @@ -86,7 +86,15 @@ export let createStyledMacro = ({ originalImportPath?: string, isWeb: boolean }) => - createTransformerMacro({ default: styledTransformer }, originalImportPath, { - baseImportPath: importPath, - isWeb - }) + createTransformerMacro( + { + default: [ + styledTransformer, + { + baseImportPath: importPath, + isWeb + } + ] + }, + originalImportPath + ) diff --git a/packages/babel-plugin-emotion/src/utils/transformer-macro.js b/packages/babel-plugin-emotion/src/utils/transformer-macro.js index 756ce7495..7120b9557 100644 --- a/packages/babel-plugin-emotion/src/utils/transformer-macro.js +++ b/packages/babel-plugin-emotion/src/utils/transformer-macro.js @@ -5,9 +5,8 @@ import { addImport } from './add-import' type Transformer = Function export function createTransformerMacro( - transformers: { [key: string]: Transformer }, - importPath: string, - options?: any + transformers: { [key: string]: Transformer | [Transformer, Object] }, + importPath: string ) { return createMacro(({ references, state, babel, isEmotionCall }) => { if (!isEmotionCall) { @@ -16,7 +15,16 @@ export function createTransformerMacro( Object.keys(references).forEach(referenceKey => { if (transformers[referenceKey]) { references[referenceKey].reverse().forEach(reference => { - transformers[referenceKey]({ + let options + let transformer + if (Array.isArray(transformers[referenceKey])) { + transformer = transformers[referenceKey][0] + options = transformers[referenceKey][1] + } else { + transformer = transformers[referenceKey] + options = {} + } + transformer({ state, babel, importPath, From a557cba19978da69ab83717d08248a231d6a7d96 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Wed, 6 Mar 2019 12:27:18 +1000 Subject: [PATCH 07/22] stuff --- packages/babel-plugin-emotion/src/index.js | 33 ++++++++++++------- .../src/utils/transformer-macro.js | 21 ++++++------ 2 files changed, 32 insertions(+), 22 deletions(-) diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index 05a2d1007..fb268ace7 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -37,12 +37,11 @@ let transformersSource = { '@emotion/css': { default: coreCssTransformer }, - // this might be annoying because @emotion/core is special so gonna deal with it later - // '@emotion/core': { - // // jsx isn't included here because it's handled differently - // css: coreCssTransformer - // // TODO: maybe write transformers for keyframes and Global - // }, + '@emotion/core': { + // jsx isn't included here because it's handled differently + css: coreCssTransformer + // TODO: maybe write transformers for keyframes and Global + }, '@emotion/styled': { default: [ styledTransformer, @@ -178,12 +177,17 @@ export default function(babel: *) { instancePath => getInstancePathToCompare(instancePath, process.cwd()) ) let macros = {} - Object.keys(state.opts.importMap).forEach(key => { - let value = state.opts.importMap[key] + let jsxCoreImports = [['@emotion/core', 'jsx']] + Object.keys(state.opts.importMap).forEach(packageName => { + let value = state.opts.importMap[packageName] let transformers = {} Object.keys(value).forEach(localExportName => { let { canonicalImport, ...options } = value[localExportName] let [packageName, exportName] = canonicalImport + if (packageName === '@emotion/core' && exportName === 'jsx') { + jsxCoreImports.push([packageName, localExportName]) + return + } let packageTransformers = transformersSource[packageName] let error = new Error( `There is no transformer for the export '${exportName}' in package '${packageName}'` @@ -197,7 +201,7 @@ export default function(babel: *) { } transformers[localExportName] = [exportTransformer, options] }) - macros[key] = createTransformerMacro(transformers) + macros[packageName] = createTransformerMacro(transformers) }) state.pluginMacros = { '@emotion/css': cssMacro, @@ -211,9 +215,14 @@ export default function(babel: *) { for (const node of path.node.body) { if ( t.isImportDeclaration(node) && - node.source.value === '@emotion/core' && - node.specifiers.some( - x => t.isImportSpecifier(x) && x.imported.name === 'jsx' + jsxCoreImports.some( + ([packageName, localImportName]) => + node.source.value === packageName && + node.specifiers.some( + x => + t.isImportSpecifier(x) && + x.imported.name === localImportName + ) ) ) { state.transformCssProp = true diff --git a/packages/babel-plugin-emotion/src/utils/transformer-macro.js b/packages/babel-plugin-emotion/src/utils/transformer-macro.js index 7120b9557..67a315313 100644 --- a/packages/babel-plugin-emotion/src/utils/transformer-macro.js +++ b/packages/babel-plugin-emotion/src/utils/transformer-macro.js @@ -12,16 +12,16 @@ export function createTransformerMacro( if (!isEmotionCall) { state.emotionSourceMap = true } - Object.keys(references).forEach(referenceKey => { - if (transformers[referenceKey]) { - references[referenceKey].reverse().forEach(reference => { + Object.keys(references).forEach(importSpecifierName => { + if (transformers[importSpecifierName]) { + references[importSpecifierName].reverse().forEach(reference => { let options let transformer - if (Array.isArray(transformers[referenceKey])) { - transformer = transformers[referenceKey][0] - options = transformers[referenceKey][1] + if (Array.isArray(transformers[importSpecifierName])) { + transformer = transformers[importSpecifierName][0] + options = transformers[importSpecifierName][1] } else { - transformer = transformers[referenceKey] + transformer = transformers[importSpecifierName] options = {} } transformer({ @@ -29,13 +29,14 @@ export function createTransformerMacro( babel, importPath, options, - reference + reference, + importSpecifierName }) }) } else { - references[referenceKey].reverse().forEach(reference => { + references[importSpecifierName].reverse().forEach(reference => { reference.replaceWith( - addImport(state, importPath, referenceKey, reference.name) + addImport(state, importPath, importSpecifierName, reference.name) ) }) } From 2f410be292d62f095ad4645c34ecbf98b0132402 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Wed, 6 Mar 2019 12:54:56 +1000 Subject: [PATCH 08/22] WIP stuff --- packages/babel-plugin-emotion/src/css-macro.js | 12 ++++++++++-- packages/babel-plugin-emotion/src/index.js | 2 +- packages/babel-plugin-emotion/src/macro.js | 13 +++++++------ .../babel-plugin-emotion/src/styled-macro.js | 16 ++++++++++++---- 4 files changed, 30 insertions(+), 13 deletions(-) diff --git a/packages/babel-plugin-emotion/src/css-macro.js b/packages/babel-plugin-emotion/src/css-macro.js index d8e601119..62e9bfcb6 100644 --- a/packages/babel-plugin-emotion/src/css-macro.js +++ b/packages/babel-plugin-emotion/src/css-macro.js @@ -33,8 +33,16 @@ export const transformCssCallExpression = ({ } } -export let coreCssTransformer = ({ state, babel, importPath, reference }) => { - reference.replaceWith(addImport(state, importPath, 'default', 'css')) +export let coreCssTransformer = ({ + state, + babel, + importPath, + reference, + importSpecifierName +}) => { + reference.replaceWith( + addImport(state, importPath, importSpecifierName, 'css') + ) transformCssCallExpression({ babel, state, path: reference.parentPath }) } diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index fb268ace7..36f4f3a30 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -178,7 +178,7 @@ export default function(babel: *) { ) let macros = {} let jsxCoreImports = [['@emotion/core', 'jsx']] - Object.keys(state.opts.importMap).forEach(packageName => { + Object.keys(state.opts.importMap || {}).forEach(packageName => { let value = state.opts.importMap[packageName] let transformers = {} Object.keys(value).forEach(localExportName => { diff --git a/packages/babel-plugin-emotion/src/macro.js b/packages/babel-plugin-emotion/src/macro.js index 8e0cdba62..e47c290a1 100644 --- a/packages/babel-plugin-emotion/src/macro.js +++ b/packages/babel-plugin-emotion/src/macro.js @@ -5,15 +5,16 @@ import { createTransformerMacro } from './utils' -let createEmotionTransformer = (imported: string, isPure: boolean) => ({ +let createEmotionTransformer = (isPure: boolean) => ({ state, babel, importPath, - reference + reference, + importSpecifierName }: Object) => { const path = reference.parentPath - reference.replaceWith(addImport(state, importPath, imported)) + reference.replaceWith(addImport(state, importPath, importSpecifierName)) if (isPure) { path.addComment('leading', '#__PURE__') } @@ -29,9 +30,9 @@ let createEmotionTransformer = (imported: string, isPure: boolean) => ({ } export let transformers = { - css: createEmotionTransformer('css', true), - injectGlobal: createEmotionTransformer('injectGlobal', false), - keyframes: createEmotionTransformer('keyframes', true) + css: createEmotionTransformer(true), + injectGlobal: createEmotionTransformer(false), + keyframes: createEmotionTransformer(true) } export let createEmotionMacro = (instancePath: string) => diff --git a/packages/babel-plugin-emotion/src/styled-macro.js b/packages/babel-plugin-emotion/src/styled-macro.js index 8cb980139..6f96a501a 100644 --- a/packages/babel-plugin-emotion/src/styled-macro.js +++ b/packages/babel-plugin-emotion/src/styled-macro.js @@ -11,13 +11,20 @@ export let styledTransformer = ({ babel, importPath, reference, - options: { baseImportPath = importPath, isWeb } + importSpecifierName, + options: { + baseImport: [ + baseImportPath = importPath, + baseImportSpecifierName = importSpecifierName + ] = [], + isWeb + } }: Object) => { let getStyledIdentifier = () => { - return addImport(state, baseImportPath, 'default', 'styled') + return addImport(state, baseImportPath, baseImportSpecifierName, 'styled') } let getOriginalImportPathStyledIdentifier = () => { - return addImport(state, importPath, 'default', 'styled') + return addImport(state, importPath, importSpecifierName, 'styled') } let t = babel.types let isCall = false @@ -80,6 +87,7 @@ export let styledTransformer = ({ export let createStyledMacro = ({ importPath, originalImportPath = importPath, + baseImportSpecifierName = 'default', isWeb }: { importPath: string, @@ -91,7 +99,7 @@ export let createStyledMacro = ({ default: [ styledTransformer, { - baseImportPath: importPath, + baseImport: [importPath, baseImportSpecifierName], isWeb } ] From 97913a528a9052d279240689e4c3e2aac1ec976a Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Mon, 11 Mar 2019 16:20:00 +1000 Subject: [PATCH 09/22] More WIP stuff --- .../__fixtures__/non-default-styled.js | 3 +++ .../__snapshots__/import-mapping.js.snap | 24 +++++++++++++++++ .../import-mapping/import-mapping.js | 26 +++++++++++++++++++ packages/babel-plugin-emotion/src/index.js | 17 +++++++++--- 4 files changed, 66 insertions(+), 4 deletions(-) create mode 100644 packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/non-default-styled.js create mode 100644 packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap create mode 100644 packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js diff --git a/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/non-default-styled.js b/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/non-default-styled.js new file mode 100644 index 000000000..318dc6ff4 --- /dev/null +++ b/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/non-default-styled.js @@ -0,0 +1,3 @@ +import { nonDefaultStyled } from 'package-one' + +let SomeComp = nonDefaultStyled.div({ color: 'hotpink' }) diff --git a/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap b/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap new file mode 100644 index 000000000..331dc99bc --- /dev/null +++ b/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap @@ -0,0 +1,24 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`import mapping non-default-styled 1`] = ` +"import { nonDefaultStyled } from 'package-one' + +let SomeComp = nonDefaultStyled.div({ color: 'hotpink' }) + + + ↓ ↓ ↓ ↓ ↓ ↓ + +import { nonDefaultStyled as _styled } from \\"package-one\\"; + +let SomeComp = _styled(\\"div\\", { + target: \\"e1nqcgbi0\\", + label: \\"SomeComp\\" +})(process.env.NODE_ENV === \\"production\\" ? { + name: \\"1lrxbo5\\", + styles: \\"color:hotpink;\\" +} : { + name: \\"1lrxbo5\\", + styles: \\"color:hotpink;\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vbi1kZWZhdWx0LXN0eWxlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZSIsImZpbGUiOiJub24tZGVmYXVsdC1zdHlsZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBub25EZWZhdWx0U3R5bGVkIH0gZnJvbSAncGFja2FnZS1vbmUnXG5cbmxldCBTb21lQ29tcCA9IG5vbkRlZmF1bHRTdHlsZWQuZGl2KHsgY29sb3I6ICdob3RwaW5rJyB9KVxuIl19 */\\" +});" +`; diff --git a/packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js b/packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js new file mode 100644 index 000000000..04ebc83dd --- /dev/null +++ b/packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js @@ -0,0 +1,26 @@ +import babelTester from 'babel-tester' +import plugin from 'babel-plugin-emotion' + +babelTester('import mapping', __dirname, { + plugins: [ + [ + plugin, + { + importMap: { + 'package-one': { + nonDefaultStyled: { + canonicalImport: ['@emotion/styled', 'default'] + }, + someCssFromCore: { + canonicalImport: ['@emotion/core', 'css'] + } + }, + 'package-two': {}, + + 'package-three': {}, + 'package-four': {} + } + } + ] + ] +}) diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index 36f4f3a30..d9632ee4b 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -195,13 +195,21 @@ export default function(babel: *) { if (packageTransformers === undefined) { throw error } - let exportTransformer = packageTransformers[exportName] + let [exportTransformer, defaultOptions] = packageTransformers[ + exportName + ] if (packageTransformers === undefined) { throw error } - transformers[localExportName] = [exportTransformer, options] + transformers[localExportName] = [ + exportTransformer, + { ...defaultOptions, ...options } + ] }) - macros[packageName] = createTransformerMacro(transformers) + macros[packageName] = createTransformerMacro( + transformers, + packageName + ) }) state.pluginMacros = { '@emotion/css': cssMacro, @@ -209,7 +217,8 @@ export default function(babel: *) { '@emotion/core': emotionCoreMacroThatsNotARealMacro, '@emotion/primitives': primitivesStyledMacro, '@emotion/native': nativeStyledMacro, - emotion: createEmotionMacro('emotion') + emotion: createEmotionMacro('emotion'), + ...macros } if (state.opts.cssPropOptimization === undefined) { for (const node of path.node.body) { From 4210defe452c89e471b2d9f2267bba1ea6d21d8c Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Thu, 11 Apr 2019 14:05:56 +1000 Subject: [PATCH 10/22] WIP --- packages/babel-plugin-emotion/src/index.js | 15 +++++++++++---- .../src/utils/transformer-macro.js | 4 +++- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index d9632ee4b..c9a43c00c 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -177,7 +177,7 @@ export default function(babel: *) { instancePath => getInstancePathToCompare(instancePath, process.cwd()) ) let macros = {} - let jsxCoreImports = [['@emotion/core', 'jsx']] + let jsxCoreImports: Array<[string, string]> = [['@emotion/core', 'jsx']] Object.keys(state.opts.importMap || {}).forEach(packageName => { let value = state.opts.importMap[packageName] let transformers = {} @@ -195,9 +195,9 @@ export default function(babel: *) { if (packageTransformers === undefined) { throw error } - let [exportTransformer, defaultOptions] = packageTransformers[ - exportName - ] + let [exportTransformer, defaultOptions] = + // $FlowFixMe + packageTransformers[exportName] if (packageTransformers === undefined) { throw error } @@ -211,6 +211,13 @@ export default function(babel: *) { packageName ) }) + // not sure about this + // jsxCoreImports.forEach(([packageName, exportName]) => { + // if (packageName) + // throw new Error( + // `You have specified that the package '${packageName}' re-exports 'jsx' from '@emotion/core' but it doesn't also re-export 'css' from '@emotion/core', 'css' is necessary for certain optimisations, please re-export it from '${moduleId}'` + // ) + // }) state.pluginMacros = { '@emotion/css': cssMacro, '@emotion/styled': webStyledMacro, diff --git a/packages/babel-plugin-emotion/src/utils/transformer-macro.js b/packages/babel-plugin-emotion/src/utils/transformer-macro.js index 67a315313..06430f221 100644 --- a/packages/babel-plugin-emotion/src/utils/transformer-macro.js +++ b/packages/babel-plugin-emotion/src/utils/transformer-macro.js @@ -8,7 +8,7 @@ export function createTransformerMacro( transformers: { [key: string]: Transformer | [Transformer, Object] }, importPath: string ) { - return createMacro(({ references, state, babel, isEmotionCall }) => { + let macro = createMacro(({ references, state, babel, isEmotionCall }) => { if (!isEmotionCall) { state.emotionSourceMap = true } @@ -42,4 +42,6 @@ export function createTransformerMacro( } }) }) + macro.transformers = transformers + return macro } From c0d70ae13fe1cf34646e6f3cd20b459a19e41e0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 7 Nov 2019 13:21:33 +0100 Subject: [PATCH 11/22] Add a changeset --- .changeset/neat-ligers-film.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/neat-ligers-film.md diff --git a/.changeset/neat-ligers-film.md b/.changeset/neat-ligers-film.md new file mode 100644 index 000000000..dfcc34ce2 --- /dev/null +++ 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) From 9542156c0677fcda7164684b775d1e5b5c3990c9 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Thu, 7 Nov 2019 23:27:31 +1000 Subject: [PATCH 12/22] Remove instances option and other things --- .changeset/giant-oranges-impress.md | 5 + packages/babel-plugin-emotion/README.md | 16 --- .../__tests__/css-requires-options.js | 29 ----- .../babel-plugin-emotion/src/css-macro.js | 6 + packages/babel-plugin-emotion/src/index.js | 104 ++++++++---------- .../babel-plugin-emotion/src/styled-macro.js | 10 +- packages/babel-preset-css-prop/src/index.js | 3 +- yarn.lock | 17 ++- 8 files changed, 75 insertions(+), 115 deletions(-) create mode 100644 .changeset/giant-oranges-impress.md diff --git a/.changeset/giant-oranges-impress.md b/.changeset/giant-oranges-impress.md new file mode 100644 index 000000000..39c05d6ae --- /dev/null +++ b/.changeset/giant-oranges-impress.md @@ -0,0 +1,5 @@ +--- +'babel-plugin-emotion': major +--- + +Removed support for the `instances` option, replace any usage of it with the `importMap` option diff --git a/packages/babel-plugin-emotion/README.md b/packages/babel-plugin-emotion/README.md index 38f396356..05e68a8c7 100644 --- a/packages/babel-plugin-emotion/README.md +++ b/packages/babel-plugin-emotion/README.md @@ -285,22 +285,6 @@ const H1 = /*#__PURE__*/ styled('h1', { `H1`'s class name attribute would be `css-hash-H1` -### `instances` - -`Array`, defaults to - -```jsx -;['emotion'] -``` - -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). - -[**Documentation**](https://emotion.sh/docs/instances) - ### `cssPropOptimization` `boolean`, defaults to `true`. diff --git a/packages/babel-plugin-emotion/__tests__/css-requires-options.js b/packages/babel-plugin-emotion/__tests__/css-requires-options.js index 2cc58247c..f955f1245 100644 --- a/packages/babel-plugin-emotion/__tests__/css-requires-options.js +++ b/packages/babel-plugin-emotion/__tests__/css-requires-options.js @@ -1,6 +1,5 @@ // @flow import { createInlineTests } from 'old-babel-tester' -import path from 'path' const inline = { 'label format with only local': { @@ -106,34 +105,6 @@ const inline = { }); `, filename: __filename - }, - - 'custom instance': { - code: ` - import {css as lol} from 'my-emotion-instance' - lol\`color:hotpink;\``, - opts: { - instances: ['my-emotion-instance'] - }, - filename: __filename - }, - 'custom instance relative': { - code: ` - import {css as lol} from './my-emotion-instance' - lol\`color:hotpink;\``, - opts: { - instances: [path.join(__dirname, './my-emotion-instance')] - }, - filename: __filename - }, - 'custom instance relative complex': { - code: ` - import {css as lol} from '../__tests__/my-emotion-instance' - lol\`color:hotpink;\``, - opts: { - instances: [path.join(__dirname, './my-emotion-instance')] - }, - filename: __filename } } createInlineTests('babel css inline', inline) diff --git a/packages/babel-plugin-emotion/src/css-macro.js b/packages/babel-plugin-emotion/src/css-macro.js index 62e9bfcb6..33ae2b954 100644 --- a/packages/babel-plugin-emotion/src/css-macro.js +++ b/packages/babel-plugin-emotion/src/css-macro.js @@ -39,6 +39,12 @@ export let coreCssTransformer = ({ importPath, reference, importSpecifierName +}: { + state: any, + babel: any, + importPath: string, + reference: any, + importSpecifierName: string }) => { reference.replaceWith( addImport(state, importPath, importSpecifierName, 'css') diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index d2e0a0411..135879abf 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -8,7 +8,6 @@ import cssMacro, { transformCssCallExpression, coreCssTransformer } from './css-macro' -import nodePath from 'path' import { getSourceMap, getStyledOptions, @@ -77,22 +76,6 @@ let emotionCoreMacroThatsNotARealMacro = ({ references, state, babel }) => { } emotionCoreMacroThatsNotARealMacro.keepImport = true -function getAbsolutePath(instancePath: string, rootPath: string) { - if (instancePath.charAt(0) === '.') { - let absoluteInstancePath = nodePath.resolve(rootPath, instancePath) - return absoluteInstancePath - } - return false -} - -function getInstancePathToCompare(instancePath: string, rootPath: string) { - let absolutePath = getAbsolutePath(instancePath, rootPath) - if (absolutePath === false) { - return instancePath - } - return absolutePath -} - export default function(babel: *) { let t = babel.types return { @@ -100,23 +83,6 @@ export default function(babel: *) { inherits: require('babel-plugin-syntax-jsx'), visitor: { ImportDeclaration(path: *, state: *) { - const hasFilepath = - path.hub.file.opts.filename && - path.hub.file.opts.filename !== 'unknown' - let dirname = hasFilepath - ? nodePath.dirname(path.hub.file.opts.filename) - : '' - - if ( - !state.pluginMacros[path.node.source.value] && - state.emotionInstancePaths.indexOf( - getInstancePathToCompare(path.node.source.value, dirname) - ) !== -1 - ) { - state.pluginMacros[path.node.source.value] = createEmotionMacro( - path.node.source.value - ) - } let pluginMacros = state.pluginMacros // most of this is from https://github.com/kentcdodds/babel-plugin-macros/blob/master/src/index.js if (pluginMacros[path.node.source.value] === undefined) { @@ -173,24 +139,29 @@ export default function(babel: *) { } }, Program(path: *, state: *) { - state.emotionInstancePaths = (state.opts.instances || []).map( - instancePath => getInstancePathToCompare(instancePath, process.cwd()) - ) let macros = {} - let jsxCoreImports: Array<[string, string]> = [['@emotion/core', 'jsx']] - Object.keys(state.opts.importMap || {}).forEach(packageName => { - let value = state.opts.importMap[packageName] + let jsxCoreImports: Array<{ + specifier: string, + export: string, + cssExport: string | null + }> = [{ specifier: '@emotion/core', export: 'jsx', cssExport: 'css' }] + Object.keys(state.opts.importMap || {}).forEach(specifierName => { + let value = state.opts.importMap[specifierName] let transformers = {} Object.keys(value).forEach(localExportName => { let { canonicalImport, ...options } = value[localExportName] let [packageName, exportName] = canonicalImport if (packageName === '@emotion/core' && exportName === 'jsx') { - jsxCoreImports.push([packageName, localExportName]) + jsxCoreImports.push({ + specifier: specifierName, + export: localExportName, + cssExport: null + }) return } let packageTransformers = transformersSource[packageName] let error = new Error( - `There is no transformer for the export '${exportName}' in package '${packageName}'` + `There is no transformer for the export '${exportName}' in '${packageName}'` ) if (packageTransformers === undefined) { throw error @@ -206,18 +177,27 @@ export default function(babel: *) { { ...defaultOptions, ...options } ] }) - macros[packageName] = createTransformerMacro( + macros[specifierName] = createTransformerMacro( transformers, - packageName + specifierName + ) + }) + jsxCoreImports.forEach(jsxCoreImport => { + let { transformers } = macros[jsxCoreImport.specifier] + for (let key in transformers) { + if (transformers[key] === coreCssTransformer) { + jsxCoreImport.cssExport = key + return + } + } + throw new Error( + `You have specified that '${ + jsxCoreImport.specifier + }' re-exports 'jsx' from '@emotion/core' but it doesn't also re-export 'css' from '@emotion/core', 'css' is necessary for certain optimisations, please re-export it from '${ + jsxCoreImport.specifier + }'` ) }) - // not sure about this - // jsxCoreImports.forEach(([packageName, exportName]) => { - // if (packageName) - // throw new Error( - // `You have specified that the package '${packageName}' re-exports 'jsx' from '@emotion/core' but it doesn't also re-export 'css' from '@emotion/core', 'css' is necessary for certain optimisations, please re-export it from '${moduleId}'` - // ) - // }) state.pluginMacros = { '@emotion/css': cssMacro, '@emotion/styled': webStyledMacro, @@ -229,9 +209,8 @@ export default function(babel: *) { } if (state.opts.cssPropOptimization === undefined) { for (const node of path.node.body) { - if ( - t.isImportDeclaration(node) && - jsxCoreImports.some( + if (t.isImportDeclaration(node)) { + let jsxCoreImport = jsxCoreImports.find( ([packageName, localImportName]) => node.source.value === packageName && node.specifiers.some( @@ -240,9 +219,11 @@ export default function(babel: *) { x.imported.name === localImportName ) ) - ) { - state.transformCssProp = true - break + if (jsxCoreImport) { + state.transformCssProp = true + state.jsxCoreImport = jsxCoreImport + break + } } } } else { @@ -289,7 +270,14 @@ export default function(babel: *) { if (t.isCallExpression(expressionPath)) { expressionPath .get('callee') - .replaceWith(addImport(state, '@emotion/css', 'default', 'css')) + .replaceWith( + addImport( + state, + state.jsxCoreImport.specifier, + state.jsxCoreImport.cssExport, + 'css' + ) + ) } } }, diff --git a/packages/babel-plugin-emotion/src/styled-macro.js b/packages/babel-plugin-emotion/src/styled-macro.js index 6f96a501a..c6ae50dcd 100644 --- a/packages/babel-plugin-emotion/src/styled-macro.js +++ b/packages/babel-plugin-emotion/src/styled-macro.js @@ -15,13 +15,13 @@ export let styledTransformer = ({ options: { baseImport: [ baseImportPath = importPath, - baseImportSpecifierName = importSpecifierName + baseImportName = importSpecifierName ] = [], isWeb } }: Object) => { let getStyledIdentifier = () => { - return addImport(state, baseImportPath, baseImportSpecifierName, 'styled') + return addImport(state, baseImportPath, baseImportName, 'styled') } let getOriginalImportPathStyledIdentifier = () => { return addImport(state, importPath, importSpecifierName, 'styled') @@ -58,6 +58,7 @@ export let styledTransformer = ({ } else { reference.replaceWith(getOriginalImportPathStyledIdentifier()) } + if (reference.parentPath && reference.parentPath.parentPath) { const styledCallPath = reference.parentPath.parentPath let { node } = transformExpressionWithStyles({ @@ -87,11 +88,12 @@ export let styledTransformer = ({ export let createStyledMacro = ({ importPath, originalImportPath = importPath, - baseImportSpecifierName = 'default', + baseImportName = 'default', isWeb }: { importPath: string, originalImportPath?: string, + baseImportName?: string, isWeb: boolean }) => createTransformerMacro( @@ -99,7 +101,7 @@ export let createStyledMacro = ({ default: [ styledTransformer, { - baseImport: [importPath, baseImportSpecifierName], + baseImport: [importPath, baseImportName], isWeb } ] diff --git a/packages/babel-preset-css-prop/src/index.js b/packages/babel-preset-css-prop/src/index.js index f04b249da..e60d91f4b 100644 --- a/packages/babel-preset-css-prop/src/index.js +++ b/packages/babel-preset-css-prop/src/index.js @@ -11,7 +11,7 @@ let pragmaName = '___EmotionJSX' export default ( api, - { pragma, sourceMap, autoLabel, labelFormat, instances, ...options } = {} + { pragma, sourceMap, autoLabel, labelFormat, ...options } = {} ) => { return { plugins: [ @@ -30,7 +30,6 @@ export default ( sourceMap, autoLabel, labelFormat, - instances, cssPropOptimization: true } ] diff --git a/yarn.lock b/yarn.lock index e2df9b917..cf016f53c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1299,6 +1299,17 @@ "@emotion/babel-plugin-jsx-pragmatic" "^0.1.4" babel-plugin-emotion "^10.0.23" +"@emotion/serialize@^0.11.14": + version "0.11.14" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.14.tgz#56a6d8d04d837cc5b0126788b2134c51353c6488" + integrity sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA== + dependencies: + "@emotion/hash" "0.7.3" + "@emotion/memoize" "0.7.3" + "@emotion/unitless" "0.7.4" + "@emotion/utils" "0.11.2" + csstype "^2.5.7" + "@gatsbyjs/relay-compiler@2.0.0-printer-fix.2": version "2.0.0-printer-fix.2" resolved "https://registry.npmjs.org/@gatsbyjs/relay-compiler/-/relay-compiler-2.0.0-printer-fix.2.tgz#214db0e6072d40ea78ad5fabdb49d56bc95f4e99" @@ -10590,12 +10601,6 @@ global-prefix@^1.0.1: version "1.0.2" resolved "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe" integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4= - dependencies: - expand-tilde "^2.0.2" - homedir-polyfill "^1.0.1" - ini "^1.3.4" - is-windows "^1.0.1" - which "^1.2.14" global@^4.3.0: version "4.4.0" From d66f1e7c01b68352ee0570eabe994e69873d86cf Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Thu, 7 Nov 2019 23:34:16 +1000 Subject: [PATCH 13/22] Fix some stuff --- package.json | 9 +- packages/babel-plugin-emotion/src/index.js | 3 + yarn.lock | 602 ++++++++++++++++----- 3 files changed, 466 insertions(+), 148 deletions(-) diff --git a/package.json b/package.json index e50824d27..fc1cc5f9c 100644 --- 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/src/index.js b/packages/babel-plugin-emotion/src/index.js index 135879abf..fbe71e375 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -183,6 +183,9 @@ export default function(babel: *) { ) }) jsxCoreImports.forEach(jsxCoreImport => { + if (jsxCoreImport.specifier === '@emotion/core') { + return + } let { transformers } = macros[jsxCoreImport.specifier] for (let key in transformers) { if (transformers[key] === coreCssTransformer) { diff --git a/yarn.lock b/yarn.lock index cf016f53c..073189f7a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23,7 +23,7 @@ dependencies: "@babel/highlight" "^7.0.0" -"@babel/core@7.5.5", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.1.2", "@babel/core@^7.4.3", "@babel/core@^7.5.5": +"@babel/core@7.5.5", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.4.3", "@babel/core@^7.5.5": version "7.5.5" resolved "https://registry.npmjs.org/@babel/core/-/core-7.5.5.tgz#17b2686ef0d6bc58f963dddd68ab669755582c30" integrity sha512-i4qoSr2KTtce0DmkuuQBV4AuQgGPUcPXMr9L5MyYAtk06z068lQ10a4O009fe5OB/DfNV+h+qqT7ddNV8UnRjg== @@ -63,6 +63,26 @@ semver "^5.4.1" source-map "^0.5.0" +"@babel/core@^7.6.4": + version "7.7.2" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.2.tgz#ea5b99693bcfc058116f42fa1dd54da412b29d91" + integrity sha512-eeD7VEZKfhK1KUXGiyPFettgF3m513f8FoBSWiQ1xTvl1RAopLs42Wp9+Ze911I6H0N9lNqJMDgoZT7gHsipeQ== + dependencies: + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.7.2" + "@babel/helpers" "^7.7.0" + "@babel/parser" "^7.7.2" + "@babel/template" "^7.7.0" + "@babel/traverse" "^7.7.2" + "@babel/types" "^7.7.2" + convert-source-map "^1.7.0" + debug "^4.1.0" + json5 "^2.1.0" + lodash "^4.17.13" + resolve "^1.3.2" + semver "^5.4.1" + source-map "^0.5.0" + "@babel/generator@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42" @@ -96,6 +116,16 @@ source-map "^0.5.0" trim-right "^1.0.1" +"@babel/generator@^7.7.2": + version "7.7.2" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.2.tgz#2f4852d04131a5e17ea4f6645488b5da66ebf3af" + integrity sha512-WthSArvAjYLz4TcbKOi88me+KmDJdKSlfwwN8CnUYn9jBkzhq0ZEPuBfkAWIvjJ3AdEV1Cf/+eSQTnp3IDJKlQ== + dependencies: + "@babel/types" "^7.7.2" + jsesc "^2.5.1" + lodash "^4.17.13" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.0.0": version "7.0.0" resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32" @@ -175,6 +205,15 @@ "@babel/template" "^7.1.0" "@babel/types" "^7.0.0" +"@babel/helper-function-name@^7.7.0": + version "7.7.0" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.0.tgz#44a5ad151cfff8ed2599c91682dda2ec2c8430a3" + integrity sha512-tDsJgMUAP00Ugv8O2aGEua5I2apkaQO7lBGUq1ocwN3G23JE5Dcq0uh3GvFTChPa4b40AWiAsLvCZOA2rdnQ7Q== + dependencies: + "@babel/helper-get-function-arity" "^7.7.0" + "@babel/template" "^7.7.0" + "@babel/types" "^7.7.0" + "@babel/helper-get-function-arity@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.44.tgz#d03ca6dd2b9f7b0b1e6b32c56c72836140db3a15" @@ -189,6 +228,13 @@ dependencies: "@babel/types" "^7.0.0" +"@babel/helper-get-function-arity@^7.7.0": + version "7.7.0" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.0.tgz#c604886bc97287a1d1398092bc666bc3d7d7aa2d" + integrity sha512-tLdojOTz4vWcEnHWHCuPN5P85JLZWbm5Fx5ZsMEMPhF3Uoe3O7awrbM2nQ04bDOUToH/2tH/ezKEOR8zEYzqyw== + dependencies: + "@babel/types" "^7.7.0" + "@babel/helper-hoist-variables@^7.4.4": version "7.4.4" resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz#0298b5f25c8c09c53102d52ac4a98f773eb2850a" @@ -210,6 +256,13 @@ dependencies: "@babel/types" "^7.0.0" +"@babel/helper-module-imports@^7.7.0": + version "7.7.0" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.0.tgz#99c095889466e5f7b6d66d98dffc58baaf42654d" + integrity sha512-Dv3hLKIC1jyfTkClvyEkYP2OlkzNvWs5+Q8WgPbxM5LMeorons7iPP91JM+DU7tRbhqA1ZeooPaMFvQrn23RHw== + dependencies: + "@babel/types" "^7.7.0" + "@babel/helper-module-transforms@^7.1.0", "@babel/helper-module-transforms@^7.4.4": version "7.5.5" resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.5.5.tgz#f84ff8a09038dcbca1fd4355661a500937165b4a" @@ -222,6 +275,18 @@ "@babel/types" "^7.5.5" lodash "^4.17.13" +"@babel/helper-module-transforms@^7.7.0": + version "7.7.0" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.7.0.tgz#154a69f0c5b8fd4d39e49750ff7ac4faa3f36786" + integrity sha512-rXEefBuheUYQyX4WjV19tuknrJFwyKw0HgzRwbkyTbB+Dshlq7eqkWbyjzToLrMZk/5wKVKdWFluiAsVkHXvuQ== + dependencies: + "@babel/helper-module-imports" "^7.7.0" + "@babel/helper-simple-access" "^7.7.0" + "@babel/helper-split-export-declaration" "^7.7.0" + "@babel/template" "^7.7.0" + "@babel/types" "^7.7.0" + lodash "^4.17.13" + "@babel/helper-optimise-call-expression@^7.0.0": version "7.0.0" resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz#a2920c5702b073c15de51106200aa8cad20497d5" @@ -270,6 +335,14 @@ "@babel/template" "^7.1.0" "@babel/types" "^7.0.0" +"@babel/helper-simple-access@^7.7.0": + version "7.7.0" + resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.7.0.tgz#97a8b6c52105d76031b86237dc1852b44837243d" + integrity sha512-AJ7IZD7Eem3zZRuj5JtzFAptBw7pMlS3y8Qv09vaBWoFsle0d1kAn5Wq6Q9MyBXITPOKnxwkZKoAm4bopmv26g== + dependencies: + "@babel/template" "^7.7.0" + "@babel/types" "^7.7.0" + "@babel/helper-split-export-declaration@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz#c0b351735e0fbcb3822c8ad8db4e583b05ebd9dc" @@ -284,6 +357,13 @@ dependencies: "@babel/types" "^7.4.4" +"@babel/helper-split-export-declaration@^7.7.0": + version "7.7.0" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.0.tgz#1365e74ea6c614deeb56ebffabd71006a0eb2300" + integrity sha512-HgYSI8rH08neWlAH3CcdkFg9qX9YsZysZI5GD8LjhQib/mM0jGOZOVkoUiiV2Hu978fRtjtsGsW6w0pKHUWtqA== + dependencies: + "@babel/types" "^7.7.0" + "@babel/helper-wrap-function@^7.1.0": version "7.2.0" resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa" @@ -303,6 +383,15 @@ "@babel/traverse" "^7.5.5" "@babel/types" "^7.5.5" +"@babel/helpers@^7.7.0": + version "7.7.0" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.0.tgz#359bb5ac3b4726f7c1fde0ec75f64b3f4275d60b" + integrity sha512-VnNwL4YOhbejHb7x/b5F39Zdg5vIQpUUNzJwx0ww1EcVRt41bbGRZWhAURrfY32T5zTT3qwNOQFWpn+P0i0a2g== + dependencies: + "@babel/template" "^7.7.0" + "@babel/traverse" "^7.7.0" + "@babel/types" "^7.7.0" + "@babel/highlight@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5" @@ -331,6 +420,11 @@ resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.3.4.tgz#a43357e4bbf4b92a437fb9e465c192848287f27c" integrity sha512-tXZCqWtlOOP4wgCp6RjRvLmfuhnqTLy9VHwRochJBCP2nDm27JnnuFEnXFASVyQNHk36jD1tAammsCEEqgscIQ== +"@babel/parser@^7.7.0", "@babel/parser@^7.7.2": + version "7.7.2" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.2.tgz#ea8334dc77416bfd9473eb470fd00d8245b3943b" + integrity sha512-DDaR5e0g4ZTb9aP7cpSZLkACEBdoLGwJDWgHtBhrGX7Q1RjhdoMOfexICj5cqTAtpowjGQWfcvfnQG7G2kAB5w== + "@babel/plugin-external-helpers@^7.0.0": version "7.2.0" resolved "https://registry.npmjs.org/@babel/plugin-external-helpers/-/plugin-external-helpers-7.2.0.tgz#7f4cb7dee651cd380d2034847d914288467a6be4" @@ -641,7 +735,7 @@ "@babel/helper-plugin-utils" "^7.0.0" babel-plugin-dynamic-import-node "^2.3.0" -"@babel/plugin-transform-modules-commonjs@^7.0.0", "@babel/plugin-transform-modules-commonjs@^7.2.0", "@babel/plugin-transform-modules-commonjs@^7.4.4", "@babel/plugin-transform-modules-commonjs@^7.5.0": +"@babel/plugin-transform-modules-commonjs@^7.0.0", "@babel/plugin-transform-modules-commonjs@^7.2.0", "@babel/plugin-transform-modules-commonjs@^7.5.0": version "7.5.0" resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.5.0.tgz#425127e6045231360858eeaa47a71d75eded7a74" integrity sha512-xmHq0B+ytyrWJvQTc5OWAC4ii6Dhr0s22STOoydokG51JjWhyYo5mRPXoi+ZmtHQhZZwuXNN+GG5jy5UZZJxIQ== @@ -660,6 +754,16 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/helper-simple-access" "^7.1.0" +"@babel/plugin-transform-modules-commonjs@^7.6.0": + version "7.7.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.7.0.tgz#3e5ffb4fd8c947feede69cbe24c9554ab4113fe3" + integrity sha512-KEMyWNNWnjOom8vR/1+d+Ocz/mILZG/eyHHO06OuBQ2aNhxT62fr4y6fGOplRx+CxCSp3IFwesL8WdINfY/3kg== + dependencies: + "@babel/helper-module-transforms" "^7.7.0" + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/helper-simple-access" "^7.7.0" + babel-plugin-dynamic-import-node "^2.3.0" + "@babel/plugin-transform-modules-systemjs@^7.3.4", "@babel/plugin-transform-modules-systemjs@^7.5.0": version "7.5.0" resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.5.0.tgz#e75266a13ef94202db2a0620977756f51d52d249" @@ -768,7 +872,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" -"@babel/plugin-transform-runtime@^7.0.0", "@babel/plugin-transform-runtime@^7.2.0": +"@babel/plugin-transform-runtime@^7.0.0": version "7.5.5" resolved "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.5.5.tgz#a6331afbfc59189d2135b2e09474457a8e3d28bc" integrity sha512-6Xmeidsun5rkwnGfMOp6/z9nSzWpHFNVr2Jx7kwoq4mVatQfQx5S56drBgEHF+XQbKOdIaOiMIINvp/kAwMN+w== @@ -998,6 +1102,13 @@ dependencies: regenerator-runtime "^0.13.2" +"@babel/runtime@^7.6.3": + version "7.7.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a" + integrity sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/template@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f" @@ -1026,6 +1137,15 @@ "@babel/parser" "^7.2.2" "@babel/types" "^7.2.2" +"@babel/template@^7.7.0": + version "7.7.0" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.0.tgz#4fadc1b8e734d97f56de39c77de76f2562e597d0" + integrity sha512-OKcwSYOW1mhWbnTBgQY5lvg1Fxg+VyfQGjcBduZFljfc044J5iDlnDSfhQ867O17XHiSCxYHUxHg2b7ryitbUQ== + dependencies: + "@babel/code-frame" "^7.0.0" + "@babel/parser" "^7.7.0" + "@babel/types" "^7.7.0" + "@babel/traverse@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.44.tgz#a970a2c45477ad18017e2e465a0606feee0d2966" @@ -1072,6 +1192,21 @@ globals "^11.1.0" lodash "^4.17.11" +"@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2": + version "7.7.2" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.2.tgz#ef0a65e07a2f3c550967366b3d9b62a2dcbeae09" + integrity sha512-TM01cXib2+rgIZrGJOLaHV/iZUAxf4A0dt5auY6KNZ+cm6aschuJGqKJM3ROTt3raPUdIDk9siAufIFEleRwtw== + dependencies: + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.7.2" + "@babel/helper-function-name" "^7.7.0" + "@babel/helper-split-export-declaration" "^7.7.0" + "@babel/parser" "^7.7.2" + "@babel/types" "^7.7.2" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.13" + "@babel/types@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757" @@ -1099,6 +1234,15 @@ lodash "^4.17.11" to-fast-properties "^2.0.0" +"@babel/types@^7.7.0", "@babel/types@^7.7.2": + version "7.7.2" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.2.tgz#550b82e5571dcd174af576e23f0adba7ffc683f7" + integrity sha512-YTf6PXoh3+eZgRCBzzP25Bugd2ngmpQVrk7kXX0i5N9BO7TFBtIgZYs7WtxtOGs8e6A4ZI7ECkbBCEHeXocvOA== + dependencies: + esutils "^2.0.2" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + "@changesets/apply-release-plan@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-0.3.0.tgz#86f259cd943891ca72a83781da52d89d1baef4ca" @@ -1838,11 +1982,32 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" +"@nodelib/fs.scandir@2.1.3": + version "2.1.3" + resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b" + integrity sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw== + dependencies: + "@nodelib/fs.stat" "2.0.3" + run-parallel "^1.1.9" + +"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3" + integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA== + "@nodelib/fs.stat@^1.1.2": version "1.1.3" resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== +"@nodelib/fs.walk@^1.2.3": + version "1.2.4" + resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976" + integrity sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ== + dependencies: + "@nodelib/fs.scandir" "2.1.3" + fastq "^1.6.0" + "@parcel/fs@^1.11.0": version "1.11.0" resolved "https://registry.npmjs.org/@parcel/fs/-/fs-1.11.0.tgz#fb8a2be038c454ad46a50dc0554c1805f13535cd" @@ -1894,16 +2059,54 @@ string-width "^2.0.0" strip-ansi "^3" -"@preconstruct/hook@^0.0.3": - version "0.0.3" - resolved "https://registry.npmjs.org/@preconstruct/hook/-/hook-0.0.3.tgz#fd5c14d6e4f7b52076973c3dc136218a1913ca3b" - integrity sha512-fezJbvdDUnrb94dneEl46XZpBijPRK7k45bhony7tiORcjgUCVALY1BWk4EJbqz0q5as6z++0D/piMlqmtZugA== +"@preconstruct/cli@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@preconstruct/cli/-/cli-1.1.0.tgz#a601f904326fc670b7411153cbd6aa34b99935d1" + integrity sha512-LCEDNII4fApiYbDAy7xae2I1PoY9eCcqz8wRakL2Fz7YGkvJE5buUeMSqwzQS/2f3F85/df5qfjYeW5P/JfdKQ== dependencies: - "@babel/core" "^7.1.2" - "@babel/plugin-transform-modules-commonjs" "^7.4.4" - "@babel/plugin-transform-runtime" "^7.2.0" + "@babel/code-frame" "^7.5.5" + "@babel/core" "^7.6.4" + "@babel/runtime" "^7.6.3" + "@preconstruct/hook" "^0.1.0" + "@rollup/plugin-alias" "^2.2.0" + "@rollup/plugin-replace" "^2.2.0" + builtin-modules "^3.1.0" + chalk "^2.4.2" + dataloader "^1.4.0" + detect-indent "^6.0.0" + enquirer "^2.3.2" + fast-deep-equal "^2.0.1" + fs-extra "^8.1.0" + globby "^10.0.1" + jest-worker "24.9.0" + magic-string "^0.25.4" + meow "^5.0.0" + micromatch "^4.0.2" + ms "^2.1.2" + npm-packlist "^1.4.6" + p-limit "^2.2.1" + parse-glob "^3.0.4" + quick-lru "^4.0.1" + resolve "^1.12.0" + resolve-from "^5.0.0" + rollup "^1.26.3" + rollup-plugin-commonjs "^10.1.0" + rollup-plugin-json "^4.0.0" + rollup-plugin-node-resolve "^5.2.0" + rollup-pluginutils "^2.8.2" + terser "^4.3.9" + v8-compile-cache "^2.1.0" + xxhash-wasm "^0.3.1" + +"@preconstruct/hook@^0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@preconstruct/hook/-/hook-0.1.0.tgz#a65b9bbbd03528f203589124fdf9ffc32841bb0b" + integrity sha512-d9wGFZmxZF/SH9xFhUy9bYZxcg+JQamc0xQw6IFgbw6BMwqQNoB06mDoY/1o+s+GhDPuWLv+7jRyvWkbsib9fQ== + dependencies: + "@babel/core" "^7.6.4" + "@babel/plugin-transform-modules-commonjs" "^7.6.0" pirates "^4.0.1" - source-map-support "^0.5.12" + source-map-support "^0.5.13" "@reach/router@^1.1.1": version "1.2.1" @@ -1916,6 +2119,21 @@ react-lifecycles-compat "^3.0.4" warning "^3.0.0" +"@rollup/plugin-alias@^2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-2.2.0.tgz#3ac52ece8b39583249884adb90fb316484389fe5" + integrity sha512-//6zmlHGbmousaatu4pBlC61gqZykLbH0c2GESBO4JgK5xFZgb/ih0zlg/5/BmTAczX5R/xsHRnsYsu4KyHV5w== + dependencies: + slash "^3.0.0" + +"@rollup/plugin-replace@^2.2.0": + version "2.2.1" + resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.2.1.tgz#94af20cb3d70cccdcec991d1f97dd373936ec544" + integrity sha512-dgq5ijT8fK18KTb1inenZ61ivTayV7pvbz2+ivT+VN20BOgJVM1fqoBETqGHKgFVm/J9BhR82mQyAtxfpPv1lQ== + dependencies: + magic-string "^0.25.2" + rollup-pluginutils "^2.6.0" + "@sailshq/lodash@^3.10.2": version "3.10.3" resolved "https://registry.npmjs.org/@sailshq/lodash/-/lodash-3.10.3.tgz#61b6fa3a5db3fe802409b0ba152bcc99e7d27a58" @@ -2002,7 +2220,7 @@ resolved "https://registry.npmjs.org/@types/debug/-/debug-0.0.29.tgz#a1e514adfbd92f03a224ba54d693111dbf1f3754" integrity sha1-oeUUrfvZLwOiJLpU1pMRHb8fN1Q= -"@types/estree@0.0.39": +"@types/estree@*", "@types/estree@0.0.39": version "0.0.39" resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== @@ -2082,7 +2300,7 @@ resolved "https://registry.npmjs.org/@types/mkdirp/-/mkdirp-0.3.29.tgz#7f2ad7ec55f914482fc9b1ec4bb1ae6028d46066" integrity sha1-fyrX7FX5FEgvybHsS7GuYCjUYGY= -"@types/node@*", "@types/node@^12.6.3": +"@types/node@*": version "12.6.9" resolved "https://registry.npmjs.org/@types/node/-/node-12.6.9.tgz#ffeee23afdc19ab16e979338e7b536fdebbbaeaf" integrity sha512-+YB9FtyxXGyD54p8rXwWaN1EWEyar5L58GlGWgtH2I9rGmLGBQcw63+0jw+ujqVavNuO47S1ByAjm9zdHMnskw== @@ -2635,11 +2853,16 @@ acorn@^5.0.0, acorn@^5.5.0, acorn@^5.5.3, acorn@^5.6.2: resolved "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279" integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw== -acorn@^6.0.1, acorn@^6.0.7, acorn@^6.1.1, acorn@^6.2.0, acorn@^6.2.1: +acorn@^6.0.1, acorn@^6.0.7, acorn@^6.1.1, acorn@^6.2.1: version "6.2.1" resolved "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz#3ed8422d6dec09e6121cc7a843ca86a330a86b51" integrity sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q== +acorn@^7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c" + integrity sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ== + address@1.0.3: version "1.0.3" resolved "https://registry.npmjs.org/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9" @@ -3076,6 +3299,11 @@ array-union@^1.0.1, array-union@^1.0.2: dependencies: array-uniq "^1.0.1" +array-union@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d" + integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw== + array-uniq@^1.0.1, array-uniq@^1.0.2: version "1.0.3" resolved "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6" @@ -5018,6 +5246,13 @@ braces@^2.3.1, braces@^2.3.2: split-string "^3.0.2" to-regex "^3.0.1" +braces@^3.0.1: + version "3.0.2" + resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" + integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== + dependencies: + fill-range "^7.0.1" + breakword@^1.0.3: version "1.0.3" resolved "https://registry.npmjs.org/breakword/-/breakword-1.0.3.tgz#71e091bbb78bb4ef003cf3ed2b2e062c6927f7dd" @@ -6374,6 +6609,13 @@ convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, dependencies: safe-buffer "~5.1.1" +convert-source-map@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" + integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA== + dependencies: + safe-buffer "~5.1.1" + cookie-signature@1.0.6: version "1.0.6" resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c" @@ -6571,14 +6813,6 @@ cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.4, cross-spawn@^6.0.5: shebang-command "^1.2.0" which "^1.2.9" -cross-spawn@^4.0.2: - version "4.0.2" - resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41" - integrity sha1-e5JHYhwjrf3ThWAEqCPL45dCTUE= - dependencies: - lru-cache "^4.0.1" - which "^1.2.9" - crypt@~0.0.1: version "0.0.2" resolved "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b" @@ -7490,11 +7724,6 @@ diff@^3.2.0: resolved "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA== -diff@^4.0.1: - version "4.0.1" - resolved "https://registry.npmjs.org/diff/-/diff-4.0.1.tgz#0c667cb467ebbb5cea7f14f135cc2dba7780a8ff" - integrity sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q== - diffable-html@^2.0.0: version "2.1.0" resolved "https://registry.npmjs.org/diffable-html/-/diffable-html-2.1.0.tgz#0d4c2de115ac58f904aab1b72e6649cefca5f025" @@ -7526,6 +7755,13 @@ dir-glob@^2.0.0, dir-glob@^2.2.2: dependencies: path-type "^3.0.0" +dir-glob@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f" + integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA== + dependencies: + path-type "^4.0.0" + discontinuous-range@1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a" @@ -7960,6 +8196,13 @@ enquirer@^2.3.0: dependencies: ansi-colors "^3.2.1" +enquirer@^2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.2.tgz#1c30284907cadff5ed2404bd8396036dd3da070e" + integrity sha512-PLhTMPUXlnaIv9D3Cq3/Zr1xb7soeDDgunobyCmYLUG19n24dvC8i+ZZgm2DekGpDnx7JvFSHV7lxfM58PMtbA== + dependencies: + ansi-colors "^3.2.1" + entities@1.0: version "1.0.0" resolved "https://registry.npmjs.org/entities/-/entities-1.0.0.tgz#b2987aa3821347fcde642b24fdfc9e4fb712bf26" @@ -8885,7 +9128,7 @@ expand-template@^2.0.3: resolved "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c" integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg== -expand-tilde@^2.0.0, expand-tilde@^2.0.2: +expand-tilde@^2.0.0: version "2.0.2" resolved "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502" integrity sha1-l+gBqgUt8CRU3kawK/YhZCzchQI= @@ -9130,6 +9373,17 @@ fast-glob@^2.0.2, fast-glob@^2.2.2, fast-glob@^2.2.6: merge2 "^1.2.3" micromatch "^3.1.10" +fast-glob@^3.0.3: + version "3.1.0" + resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.1.0.tgz#77375a7e3e6f6fc9b18f061cddd28b8d1eec75ae" + integrity sha512-TrUz3THiq2Vy3bjfQUB2wNyPdGBeGmdjbzzBLhfHN4YFurYptCKwGq/TfiRavbGywFRzY6U2CdmQ1zmsY5yYaw== + dependencies: + "@nodelib/fs.stat" "^2.0.2" + "@nodelib/fs.walk" "^1.2.3" + glob-parent "^5.1.0" + merge2 "^1.3.0" + micromatch "^4.0.2" + fast-json-stable-stringify@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2" @@ -9145,6 +9399,13 @@ fastparse@^1.1.1: resolved "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9" integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ== +fastq@^1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.6.0.tgz#4ec8a38f4ac25f21492673adb7eae9cfef47d1c2" + integrity sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA== + dependencies: + reusify "^1.0.0" + fault@^1.0.1: version "1.0.3" resolved "https://registry.npmjs.org/fault/-/fault-1.0.3.tgz#4da88cf979b6b792b4e13c7ec836767725170b7e" @@ -9427,6 +9688,13 @@ fill-range@^4.0.0: repeat-string "^1.6.1" to-regex-range "^2.1.0" +fill-range@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" + integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== + dependencies: + to-regex-range "^5.0.1" + finalhandler@1.1.2, finalhandler@~1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d" @@ -10564,6 +10832,13 @@ glob-parent@^3.1.0: is-glob "^3.1.0" path-dirname "^1.0.0" +glob-parent@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2" + integrity sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw== + dependencies: + is-glob "^4.0.1" + glob-to-regexp@^0.3.0: version "0.3.0" resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab" @@ -10641,6 +10916,20 @@ globby@8.0.1: pify "^3.0.0" slash "^1.0.0" +globby@^10.0.1: + version "10.0.1" + resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.1.tgz#4782c34cb75dd683351335c5829cc3420e606b22" + integrity sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A== + dependencies: + "@types/glob" "^7.1.1" + array-union "^2.1.0" + dir-glob "^3.0.1" + fast-glob "^3.0.3" + glob "^7.1.3" + ignore "^5.1.1" + merge2 "^1.2.3" + slash "^3.0.0" + globby@^5.0.0: version "5.0.0" resolved "https://registry.npmjs.org/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d" @@ -11656,6 +11945,11 @@ ignore@^4.0.3, ignore@^4.0.6: resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== +ignore@^5.1.1: + version "5.1.4" + resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.4.tgz#84b7b3dbe64552b6ef0eca99f6743dbec6d97adf" + integrity sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A== + image-size@^0.4.0: version "0.4.0" resolved "https://registry.npmjs.org/image-size/-/image-size-0.4.0.tgz#d4b4e1f61952e4cbc1cea9a6b0c915fecb707510" @@ -11973,18 +12267,6 @@ inquirer@^6.2.0, inquirer@^6.2.2: strip-ansi "^5.1.0" through "^2.3.6" -install-packages@^0.2.5: - version "0.2.5" - resolved "https://registry.npmjs.org/install-packages/-/install-packages-0.2.5.tgz#b50bfe3c2a36081850ba0d8c661fa6f11caeaa9e" - integrity sha512-K+rnxKcem/Aa5+FPInrjoGLbsalo41ELmxay9sGpDvaFjGglbEGOaB/NefquzWGzMxPfJoaep7cYd0OEG9AOsA== - dependencies: - chalk "^2.3.2" - command-exists "^1.2.6" - cross-spawn "^4.0.2" - joycon "^2.1.1" - parse-package-name "^0.1.0" - resolve "^1.7.1" - internal-ip@1.2.0: version "1.2.0" resolved "https://registry.npmjs.org/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c" @@ -12322,7 +12604,7 @@ is-glob@^3.1.0: dependencies: is-extglob "^2.1.0" -is-glob@^4.0.0: +is-glob@^4.0.0, is-glob@^4.0.1: version "4.0.1" resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc" integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg== @@ -12423,6 +12705,11 @@ is-number@^4.0.0: resolved "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff" integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ== +is-number@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" + integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== + is-obj@^1.0.0, is-obj@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f" @@ -13774,12 +14061,12 @@ jest-worker@23.2.0, jest-worker@^23.2.0: dependencies: merge-stream "^1.0.1" -jest-worker@24.0.0: - version "24.0.0" - resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-24.0.0.tgz#3d3483b077bf04f412f47654a27bba7e947f8b6d" - integrity sha512-s64/OThpfQvoCeHG963MiEZOAAxu8kHsaL/rCMF7lpdzo7vgF0CtPml9hfguOMgykgH/eOm4jFP4ibfHLruytg== +jest-worker@24.9.0: + version "24.9.0" + resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5" + integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw== dependencies: - merge-stream "^1.0.1" + merge-stream "^2.0.0" supports-color "^6.1.0" jest-worker@^24.6.0: @@ -13846,11 +14133,6 @@ jimp@^0.6.4: "@jimp/types" "^0.6.4" core-js "^2.5.7" -joycon@^2.1.1: - version "2.2.5" - resolved "https://registry.npmjs.org/joycon/-/joycon-2.2.5.tgz#8d4cf4cbb2544d7b7583c216fcdfec19f6be1615" - integrity sha512-YqvUxoOcVPnCp0VU1/56f+iKSdvIRJYPznH22BdXV3xMk75SFXhWeJkZ8C9XxUWt1b5x2X1SxuFygW1U0FmkEQ== - jpeg-js@^0.1.1: version "0.1.2" resolved "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.1.2.tgz#135b992c0575c985cfa0f494a3227ed238583ece" @@ -14809,11 +15091,6 @@ lodash.isarray@^3.0.0: resolved "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55" integrity sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U= -lodash.isempty@^4.4.0: - version "4.4.0" - resolved "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e" - integrity sha1-b4bL7di+TsmHvpqvM8loTbGzHn4= - lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" @@ -14907,11 +15184,6 @@ lodash.mergewith@^4.6.1: resolved "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55" integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ== -lodash.omitby@^4.6.0: - version "4.6.0" - resolved "https://registry.npmjs.org/lodash.omitby/-/lodash.omitby-4.6.0.tgz#5c15ff4754ad555016b53c041311e8f079204791" - integrity sha1-XBX/R1StVVAWtTwEExHo8HkgR5E= - lodash.pad@^4.1.0: version "4.5.1" resolved "https://registry.npmjs.org/lodash.pad/-/lodash.pad-4.5.1.tgz#4330949a833a7c8da22cc20f6a26c4d59debba70" @@ -15170,13 +15442,20 @@ magic-string@^0.22.4: dependencies: vlq "^0.2.2" -magic-string@^0.25.1, magic-string@^0.25.2, magic-string@^0.25.3: +magic-string@^0.25.2, magic-string@^0.25.3: version "0.25.3" resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz#34b8d2a2c7fec9d9bdf9929a3fd81d271ef35be9" integrity sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA== dependencies: sourcemap-codec "^1.4.4" +magic-string@^0.25.4: + version "0.25.4" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.4.tgz#325b8a0a79fc423db109b77fd5a19183b7ba5143" + integrity sha512-oycWO9nEVAP2RVPbIoDoA4Y7LFIJ3xRYov93gAyJhZkET1tNuB0u7uWkZS2LpBWTJUWnmau/To8ECWRC+jKNfw== + dependencies: + sourcemap-codec "^1.4.4" + make-dir@^1.0.0, make-dir@^1.2.0: version "1.3.0" resolved "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c" @@ -15495,11 +15774,21 @@ merge-stream@^1.0.1: dependencies: readable-stream "^2.0.1" +merge-stream@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" + integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w== + merge2@^1.2.3: version "1.2.4" resolved "https://registry.npmjs.org/merge2/-/merge2-1.2.4.tgz#c9269589e6885a60cf80605d9522d4b67ca646e3" integrity sha512-FYE8xI+6pjFOhokZu0We3S5NKCirLbCzSh2Usf3qEyr4X8U+0jNg9P8RZ4qz+V2UoECLVwSyzU3LxXBaLGtD3A== +merge2@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81" + integrity sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw== + merge@^1.2.0: version "1.2.1" resolved "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145" @@ -15726,6 +16015,14 @@ micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8: snapdragon "^0.8.1" to-regex "^3.0.2" +micromatch@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259" + integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q== + dependencies: + braces "^3.0.1" + picomatch "^2.0.5" + miller-rabin@^4.0.0: version "4.0.1" resolved "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d" @@ -15980,7 +16277,7 @@ ms@2.1.1: resolved "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a" integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg== -ms@^2.0.0, ms@^2.1.1: +ms@^2.0.0, ms@^2.1.1, ms@^2.1.2: version "2.1.2" resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== @@ -16461,6 +16758,14 @@ npm-packlist@^1.1.12, npm-packlist@^1.1.6, npm-packlist@^1.4.4: ignore-walk "^3.0.1" npm-bundled "^1.0.1" +npm-packlist@^1.4.6: + version "1.4.6" + resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.6.tgz#53ba3ed11f8523079f1457376dd379ee4ea42ff4" + integrity sha512-u65uQdb+qwtGvEJh/DgQgW1Xg7sqeNbmxYyrvlNznaVTjV3E5P6F/EFjM+BVHXl7JJlsdG8A64M0XI8FI/IOlg== + dependencies: + ignore-walk "^3.0.1" + npm-bundled "^1.0.1" + npm-path@^2.0.2: version "2.0.4" resolved "https://registry.npmjs.org/npm-path/-/npm-path-2.0.4.tgz#c641347a5ff9d6a09e4d9bce5580c4f505278e64" @@ -17146,6 +17451,13 @@ p-limit@^2.0.0, p-limit@^2.2.0: dependencies: p-try "^2.0.0" +p-limit@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537" + integrity sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg== + dependencies: + p-try "^2.0.0" + p-locate@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43" @@ -17475,11 +17787,6 @@ parse-numeric-range@^0.0.2: resolved "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-0.0.2.tgz#b4f09d413c7adbcd987f6e9233c7b4b210c938e4" integrity sha1-tPCdQTx6282Yf26SM8e0shDJOOQ= -parse-package-name@^0.1.0: - version "0.1.0" - resolved "https://registry.npmjs.org/parse-package-name/-/parse-package-name-0.1.0.tgz#3f44dd838feb4c2be4bf318bae4477d7706bade4" - integrity sha1-P0Tdg4/rTCvkvzGLrkR313BrreQ= - parse-passwd@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6" @@ -17658,6 +17965,11 @@ path-type@^3.0.0: dependencies: pify "^3.0.0" +path-type@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" + integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== + pbkdf2@^3.0.3: version "3.0.17" resolved "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6" @@ -17704,6 +18016,11 @@ physical-cpu-count@^2.0.0: resolved "https://registry.npmjs.org/physical-cpu-count/-/physical-cpu-count-2.0.0.tgz#18de2f97e4bf7a9551ad7511942b5496f7aba660" integrity sha1-GN4vl+S/epVRrXURlCtUlverpmA= +picomatch@^2.0.5: + version "2.1.1" + resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.1.1.tgz#ecdfbea7704adb5fe6fb47f9866c4c0e15e905c5" + integrity sha512-OYMyqkKzK7blWO/+XZYP6w8hH0LDvkBvdvKukti+7kqYFCiEAk+gI3DWnryapc0Dau05ugGTy0foQ6mqn4AHYA== + pidtree@^0.3.0: version "0.3.0" resolved "https://registry.npmjs.org/pidtree/-/pidtree-0.3.0.tgz#f6fada10fccc9f99bf50e90d0b23d72c9ebc2e6b" @@ -18596,46 +18913,6 @@ prebuild-install@^5.3.0: tunnel-agent "^0.6.0" which-pm-runs "^1.0.0" -preconstruct@^0.0.81: - version "0.0.81" - resolved "https://registry.npmjs.org/preconstruct/-/preconstruct-0.0.81.tgz#31ca707af1d69232d9383e44ef11f60784163061" - integrity sha512-T1FTx2OF8kwKSDx9UDgM25xcAXOYkQWngmn0O+fo5yFJcZncs/MbeJ2aO+SNeAFxanZT8On2z4NdsOfLJ/pBaQ== - dependencies: - "@babel/code-frame" "^7.0.0" - "@babel/core" "^7.1.2" - "@babel/plugin-transform-runtime" "^7.2.0" - "@preconstruct/hook" "^0.0.3" - builtin-modules "^3.0.0" - chalk "^2.3.2" - dataloader "^1.4.0" - deasync "^0.1.14" - del "^3.0.0" - diff "^4.0.1" - fast-deep-equal "^2.0.1" - fs-extra "^7.0.0" - globby "^8.0.1" - inquirer "^6.2.0" - install-packages "^0.2.5" - jest-worker "24.0.0" - lodash.isempty "^4.4.0" - lodash.omitby "^4.6.0" - magic-string "^0.25.1" - meow "^5.0.0" - ms "^2.1.1" - p-limit "^2.0.0" - quick-lru "^4.0.0" - resolve "^1.10.0" - resolve-from "^4.0.0" - rollup "^1.12.2" - rollup-plugin-alias "^1.5.1" - rollup-plugin-commonjs "^10.0.0" - rollup-plugin-node-resolve "^5.0.0" - rollup-plugin-replace "^2.2.0" - rollup-pluginutils "^2.7.1" - sarcastic "^1.5.0" - terser "^3.14.1" - xxhash-wasm "^0.3.1" - prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -19078,9 +19355,9 @@ quick-lru@^1.0.0: resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8" integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g= -quick-lru@^4.0.0: +quick-lru@^4.0.1: version "4.0.1" - resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f" + resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f" integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== quote-stream@^1.0.1, quote-stream@~1.0.2: @@ -20493,7 +20770,7 @@ resolve@1.6.0: dependencies: path-parse "^1.0.5" -resolve@^1.1.5, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.3.2, resolve@^1.3.3, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.7.1, resolve@^1.8.1: +resolve@^1.1.5, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.3.3, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.8.1: version "1.12.0" resolved "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6" integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w== @@ -20570,6 +20847,11 @@ retry@^0.12.0: resolved "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b" integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs= +reusify@^1.0.0: + version "1.0.4" + resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" + integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== + rgb-regex@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1" @@ -20607,17 +20889,10 @@ ripemd160@^2.0.0, ripemd160@^2.0.1: hash-base "^3.0.0" inherits "^2.0.1" -rollup-plugin-alias@^1.5.1: - version "1.5.2" - resolved "https://registry.npmjs.org/rollup-plugin-alias/-/rollup-plugin-alias-1.5.2.tgz#f15a1cc8ee0debf74ab5c2bb68a944a66b568411" - integrity sha512-ODeZXhTxpD48sfcYLAFc1BGrsXKDj7o1CSNH3uYbdK3o0NxyMmaQPTNgW+ko+am92DLC8QSTe4kyxTuEkI5S5w== - dependencies: - slash "^3.0.0" - -rollup-plugin-commonjs@^10.0.0: - version "10.0.2" - resolved "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.0.2.tgz#61328f3a29945e2c35f2b2e824c18944fd88a54d" - integrity sha512-DxeR4QXTgTOFseYls1V7vgKbrSJmPYNdEMOs0OvH+7+89C3GiIonU9gFrE0u39Vv1KWm3wepq8KAvKugtoM2Zw== +rollup-plugin-commonjs@^10.1.0: + version "10.1.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz#417af3b54503878e084d127adf4d1caf8beb86fb" + integrity sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q== dependencies: estree-walker "^0.6.1" is-reference "^1.1.2" @@ -20625,9 +20900,16 @@ rollup-plugin-commonjs@^10.0.0: resolve "^1.11.0" rollup-pluginutils "^2.8.1" -rollup-plugin-node-resolve@^5.0.0: +rollup-plugin-json@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-json/-/rollup-plugin-json-4.0.0.tgz#a18da0a4b30bf5ca1ee76ddb1422afbb84ae2b9e" + integrity sha512-hgb8N7Cgfw5SZAkb3jf0QXii6QX/FOkiIq2M7BAQIEydjHvTyxXHQiIzZaTFgx1GK0cRCHOCBHIyEkkLdWKxow== + dependencies: + rollup-pluginutils "^2.5.0" + +rollup-plugin-node-resolve@^5.2.0: version "5.2.0" - resolved "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz#730f93d10ed202473b1fb54a5997a7db8c6d8523" + resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz#730f93d10ed202473b1fb54a5997a7db8c6d8523" integrity sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw== dependencies: "@types/resolve" "0.0.8" @@ -20636,29 +20918,28 @@ rollup-plugin-node-resolve@^5.0.0: resolve "^1.11.1" rollup-pluginutils "^2.8.1" -rollup-plugin-replace@^2.2.0: - version "2.2.0" - resolved "https://registry.npmjs.org/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz#f41ae5372e11e7a217cde349c8b5d5fd115e70e3" - integrity sha512-/5bxtUPkDHyBJAKketb4NfaeZjL5yLZdeUihSfbF2PQMz+rSTEb8ARKoOl3UBT4m7/X+QOXJo3sLTcq+yMMYTA== +rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.8.2: + version "2.8.2" + resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e" + integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ== dependencies: - magic-string "^0.25.2" - rollup-pluginutils "^2.6.0" + estree-walker "^0.6.1" -rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.7.1, rollup-pluginutils@^2.8.1: +rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.1: version "2.8.1" resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.1.tgz#8fa6dd0697344938ef26c2c09d2488ce9e33ce97" integrity sha512-J5oAoysWar6GuZo0s+3bZ6sVZAC0pfqKz68De7ZgDi5z63jOVZn1uJL/+z1jeKHNbGII8kAyHF5q8LnxSX5lQg== dependencies: estree-walker "^0.6.1" -rollup@^1.12.2: - version "1.18.0" - resolved "https://registry.npmjs.org/rollup/-/rollup-1.18.0.tgz#98ea36472523ed712e20c0e996fd051882f787e6" - integrity sha512-MBAWr6ectF948gW/bs/yfi0jW7DzwI8n0tEYG/ZMQutmK+blF/Oazyhg3oPqtScCGV8bzCtL9KzlzPtTriEOJA== +rollup@^1.26.3: + version "1.26.3" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.26.3.tgz#3e71b8120a4ccc745a856e926cab0efbe0eead90" + integrity sha512-8MhY/M8gnv3Q/pQQSWYWzbeJ5J1C5anCNY5BK1kV8Yzw9RFS0FF4lbLt+uyPO3wLKWXSXrhAL5pWL85TZAh+Sw== dependencies: - "@types/estree" "0.0.39" - "@types/node" "^12.6.3" - acorn "^6.2.0" + "@types/estree" "*" + "@types/node" "*" + acorn "^7.1.0" rst-selector-parser@^2.2.3: version "2.2.3" @@ -20690,6 +20971,11 @@ run-node@^1.0.0: resolved "https://registry.npmjs.org/run-node/-/run-node-1.0.0.tgz#46b50b946a2aa2d4947ae1d886e9856fd9cabe5e" integrity sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A== +run-parallel@^1.1.9: + version "1.1.9" + resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679" + integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q== + run-queue@^1.0.0, run-queue@^1.0.3: version "1.0.3" resolved "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47" @@ -20810,11 +21096,6 @@ sanitize-html@^1.18.2: srcset "^1.0.0" xtend "^4.0.1" -sarcastic@^1.5.0: - version "1.5.0" - resolved "https://registry.npmjs.org/sarcastic/-/sarcastic-1.5.0.tgz#1e87e75bb64e856d3f34d1f5a391c3abecf8c7c1" - integrity sha512-j7zmeNbABvOGXzt11WIm7nITPJ0exX/IL0sV9GZHNSsrFEjadfK5Z3GfBEelc6/VoEp17i/JEw3UuzyJNvgZNw== - sax@>=0.6.0, sax@^1.2.1, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4: version "1.2.4" resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -21484,7 +21765,15 @@ source-map-support@^0.4.15: dependencies: source-map "^0.5.6" -source-map-support@^0.5.12, source-map-support@^0.5.6, source-map-support@^0.5.9, source-map-support@~0.5.10, source-map-support@~0.5.12: +source-map-support@^0.5.13: + version "0.5.16" + resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042" + integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ== + dependencies: + buffer-from "^1.0.0" + source-map "^0.6.0" + +source-map-support@^0.5.6, source-map-support@^0.5.9, source-map-support@~0.5.10, source-map-support@~0.5.12: version "0.5.13" resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932" integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w== @@ -22408,7 +22697,7 @@ terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.4.1: webpack-sources "^1.4.0" worker-farm "^1.7.0" -terser@^3.14.1, terser@^3.17.0, terser@^3.7.3: +terser@^3.17.0, terser@^3.7.3: version "3.17.0" resolved "https://registry.npmjs.org/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2" integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ== @@ -22426,6 +22715,15 @@ terser@^4.1.2: source-map "~0.6.1" source-map-support "~0.5.12" +terser@^4.3.9: + version "4.3.9" + resolved "https://registry.yarnpkg.com/terser/-/terser-4.3.9.tgz#e4be37f80553d02645668727777687dad26bbca8" + integrity sha512-NFGMpHjlzmyOtPL+fDw3G7+6Ueh/sz4mkaUYa4lJCxOPTNzd0Uj0aZJOmsDYoSQyfuVoWDMSWTPU3huyOm2zdA== + dependencies: + commander "^2.20.0" + source-map "~0.6.1" + source-map-support "~0.5.12" + test-exclude@^4.2.1: version "4.2.3" resolved "https://registry.npmjs.org/test-exclude/-/test-exclude-4.2.3.tgz#a9a5e64474e4398339245a0a769ad7c2f4a97c20" @@ -22647,6 +22945,13 @@ to-regex-range@^2.1.0: is-number "^3.0.0" repeat-string "^1.6.1" +to-regex-range@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4" + integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ== + dependencies: + is-number "^7.0.0" + to-regex@^3.0.1, to-regex@^3.0.2: version "3.0.2" resolved "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce" @@ -23471,6 +23776,11 @@ v8-compile-cache@^2.0.0: resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz#00f7494d2ae2b688cfe2899df6ed2c54bef91dbe" integrity sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w== +v8-compile-cache@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e" + integrity sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g== + valid-url@^1.0.9: version "1.0.9" resolved "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz#1c14479b40f1397a75782f115e4086447433a200" @@ -24107,7 +24417,7 @@ which-pm-runs@^1.0.0: resolved "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb" integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs= -which@1, which@^1.2.10, which@^1.2.12, which@^1.2.14, which@^1.2.9, which@^1.3.0, which@^1.3.1: +which@1, which@^1.2.10, which@^1.2.12, which@^1.2.9, which@^1.3.0, which@^1.3.1: version "1.3.1" resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a" integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ== From 5d9d9fa99393a645ab7fd7db3af730b03ebd5ac2 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Thu, 7 Nov 2019 23:38:53 +1000 Subject: [PATCH 14/22] A bunch of FlowFixMes --- packages/core/__tests__/css.js | 2 ++ packages/emotion/test/no-babel/index.test.js | 2 +- .../primitives/test/emotion-primitives.test.js | 17 ++++++++++++++++- packages/primitives/test/no-babel/basic.test.js | 1 + 4 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/core/__tests__/css.js b/packages/core/__tests__/css.js index 37986765b..eebd55398 100644 --- a/packages/core/__tests__/css.js +++ b/packages/core/__tests__/css.js @@ -247,7 +247,9 @@ test('handles camelCased custom properties in object styles properly', () => { }) test('applies class when css prop is set to nil on wrapper component', () => { + // $FlowFixMe const Button = props => ) diff --git a/packages/emotion/test/no-babel/index.test.js b/packages/emotion/test/no-babel/index.test.js index 190173efe..332b5433b 100644 --- a/packages/emotion/test/no-babel/index.test.js +++ b/packages/emotion/test/no-babel/index.test.js @@ -133,7 +133,7 @@ describe('css', () => { expect(() => { const fontSize = '20px' const H1 = styled('h1')({ fontSize }) - + // $FlowFixMe const Thing = styled('div')({ display: 'flex', [H1]: { diff --git a/packages/primitives/test/emotion-primitives.test.js b/packages/primitives/test/emotion-primitives.test.js index a22dff397..d89044817 100644 --- a/packages/primitives/test/emotion-primitives.test.js +++ b/packages/primitives/test/emotion-primitives.test.js @@ -19,6 +19,7 @@ describe('Emotion primitives', () => { }) test('should throw an error when used invalid primitive', () => { + // $FlowFixMe expect(() => styled.TEXT({})).toThrow() }) @@ -30,6 +31,7 @@ describe('Emotion primitives', () => { ` const tree = renderer .create( + // $FlowFixMe Emotion Primitives @@ -46,6 +48,7 @@ describe('Emotion primitives', () => { const tree = renderer .create( + {/* $FlowFixMe */} Hello World ) @@ -63,6 +66,7 @@ describe('Emotion primitives', () => { render( + {/* $FlowFixMe */} Hello World @@ -79,6 +83,7 @@ describe('Emotion primitives', () => { color: props.decor })) const tree = renderer + // $FlowFixMe .create(Emotion Primitives) .toJSON() expect(tree).toMatchSnapshot() @@ -89,7 +94,10 @@ describe('Emotion primitives', () => { color: hotpink; ` const tree = renderer - .create(Emotion primitives) + .create( + // $FlowFixMe + Emotion primitives + ) .toJSON() expect(tree).toMatchSnapshot() }) @@ -101,6 +109,7 @@ describe('Emotion primitives', () => { ` const tree = renderer + // $FlowFixMe .create(Emotion Primitives) .toJSON() expect(tree).toMatchSnapshot() @@ -110,6 +119,7 @@ describe('Emotion primitives', () => { const Text = styled.Text` color: ${props => props.decor}; ` + // $FlowFixMe const Name = Text.withComponent(reactPrimitives.Text) const tree = renderer.create(Mike).toJSON() expect(tree).toMatchSnapshot() @@ -119,11 +129,13 @@ describe('Emotion primitives', () => { const Text = styled.Text` color: hotpink; ` + // $FlowFixMe const Title = () => Hello World const StyledTitle = styled(Title)` font-size: 20px; font-style: ${props => props.sty}; ` + // $FlowFixMe const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() }) @@ -144,7 +156,9 @@ describe('Emotion primitives', () => { const ViewOne = styled.View` background-color: ${props => props.color}; ` + // $FlowFixMe const treeOne = renderer.create() + // $FlowFixMe const ViewTwo = ViewOne.withComponent(reactPrimitives.Text) const treeTwo = renderer.create() @@ -158,6 +172,7 @@ describe('Emotion primitives', () => { ` const tree = renderer .create( + // $FlowFixMe Emotion Primitives From 6062999ef9e594d933d7b6c73d8e9d6611bb8725 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Fri, 8 Nov 2019 00:03:00 +1000 Subject: [PATCH 15/22] Finish implementation and add a changeset --- .changeset/stupid-radios-draw.md | 5 +++ packages/babel-plugin-emotion/README.md | 4 +- .../core-with-css-import-dynamic.js | 11 +++++ .../__tests__/__fixtures__/dynamic.js | 4 ++ .../__tests__/__snapshots__/index.js.snap | 45 +++++++++++++++++++ .../import-mapping/__fixtures__/jsx.js | 4 ++ .../import-mapping/__fixtures__/vanilla.js | 3 ++ .../__snapshots__/import-mapping.js.snap | 45 +++++++++++++++++++ .../import-mapping/import-mapping.js | 12 ++++- packages/babel-plugin-emotion/src/index.js | 25 +++++------ 10 files changed, 142 insertions(+), 16 deletions(-) create mode 100644 .changeset/stupid-radios-draw.md create mode 100644 packages/babel-plugin-emotion/__tests__/__fixtures__/core-with-css-import-dynamic.js create mode 100644 packages/babel-plugin-emotion/__tests__/__fixtures__/dynamic.js create mode 100644 packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/jsx.js create mode 100644 packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/vanilla.js diff --git a/.changeset/stupid-radios-draw.md b/.changeset/stupid-radios-draw.md new file mode 100644 index 000000000..6fd077080 --- /dev/null +++ b/.changeset/stupid-radios-draw.md @@ -0,0 +1,5 @@ +--- +'babel-plugin-emotion': 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/packages/babel-plugin-emotion/README.md b/packages/babel-plugin-emotion/README.md index 05e68a8c7..0d22b3a27 100644 --- a/packages/babel-plugin-emotion/README.md +++ b/packages/babel-plugin-emotion/README.md @@ -293,7 +293,9 @@ This option assumes that you are using something to make `@emotion/core`'s `jsx` ### `importMap` -This option allows you to re-export things from emotion packages for ...explain the reasons here and still get optimisations from babel-plugin-emotion (reword stuff) +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 + +An example config: ```js { 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 new file mode 100644 index 000000000..ad5a30281 --- /dev/null +++ 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 => ( +
+) diff --git a/packages/babel-plugin-emotion/__tests__/__fixtures__/dynamic.js b/packages/babel-plugin-emotion/__tests__/__fixtures__/dynamic.js new file mode 100644 index 000000000..46ea8509d --- /dev/null +++ b/packages/babel-plugin-emotion/__tests__/__fixtures__/dynamic.js @@ -0,0 +1,4 @@ +/** @jsx jsx */ +import { jsx } from '@emotion/core' + +const SomeComponent = props =>
diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap index f47a48294..0802db691 100644 --- 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 =>
;" `; +exports[`@emotion/babel-plugin-core core-with-css-import-dynamic 1`] = ` +"/** @jsx jsx */ +import { jsx, css } from '@emotion/core' + +const SomeComponent = props => ( +
+) + + + ↓ ↓ ↓ ↓ ↓ ↓ + +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; + +const SomeComponent = 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 = ;" `; +exports[`@emotion/babel-plugin-core dynamic 1`] = ` +"/** @jsx jsx */ +import { jsx } from '@emotion/core' + +const SomeComponent = props =>
+ + + ↓ ↓ ↓ ↓ ↓ ↓ + +import { css as _css } from \\"@emotion/core\\"; + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; + +const SomeComponent = props =>
;" +`; + exports[`@emotion/babel-plugin-core function-declaration 1`] = ` "// @flow import * as React from 'react' diff --git a/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/jsx.js b/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/jsx.js new file mode 100644 index 000000000..f84f73224 --- /dev/null +++ b/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/jsx.js @@ -0,0 +1,4 @@ +/** @jsx someJsx */ +import { someJsx } from 'package-two' + +const SomeComponent = props =>
diff --git a/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/vanilla.js b/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/vanilla.js new file mode 100644 index 000000000..81cfb6b30 --- /dev/null +++ b/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/vanilla.js @@ -0,0 +1,3 @@ +import { something } from 'package-three' + +something({ color: 'green' }) diff --git a/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap b/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap index 23e5aa99b..fcf70f9bb 100644 --- a/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap +++ b/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap @@ -1,5 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`import mapping jsx 1`] = ` +"/** @jsx someJsx */ +import { someJsx } from 'package-two' + +const SomeComponent = props =>
+ + + ↓ ↓ ↓ ↓ ↓ ↓ + +import { someCssFromCore as _css } from \\"package-two\\"; + +/** @jsx someJsx */ +import { someJsx } from 'package-two'; + +const SomeComponent = props =>
;" +`; + exports[`import mapping non-default-styled 1`] = ` "import { nonDefaultStyled } from 'package-one' @@ -25,3 +46,27 @@ let SomeComp = _styled(\\"div\\", { toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" `; + +exports[`import mapping vanilla 1`] = ` +"import { something } from 'package-three' + +something({ color: 'green' }) + + + ↓ ↓ ↓ ↓ ↓ ↓ + +import { something as _something } from \\"package-three\\"; + +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__*/ +_something(process.env.NODE_ENV === \\"production\\" ? { + name: \\"bjcoli\\", + styles: \\"color:green;\\" +} : { + name: \\"bjcoli\\", + styles: \\"color:green;\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZhbmlsbGEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEiLCJmaWxlIjoidmFuaWxsYS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHNvbWV0aGluZyB9IGZyb20gJ3BhY2thZ2UtdGhyZWUnXG5cbnNvbWV0aGluZyh7IGNvbG9yOiAnZ3JlZW4nIH0pXG4iXX0= */\\", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ +});" +`; diff --git a/packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js b/packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js index 04ebc83dd..fc7f0c912 100644 --- a/packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js +++ b/packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js @@ -10,14 +10,22 @@ babelTester('import mapping', __dirname, { 'package-one': { nonDefaultStyled: { canonicalImport: ['@emotion/styled', 'default'] + } + }, + 'package-two': { + someJsx: { + canonicalImport: ['@emotion/core', 'jsx'] }, someCssFromCore: { canonicalImport: ['@emotion/core', 'css'] } }, - 'package-two': {}, - 'package-three': {}, + 'package-three': { + something: { + canonicalImport: ['emotion', 'css'] + } + }, 'package-four': {} } } diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index fbe71e375..c891b29ea 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -160,18 +160,18 @@ export default function(babel: *) { return } let packageTransformers = transformersSource[packageName] - let error = new Error( - `There is no transformer for the export '${exportName}' in '${packageName}'` - ) + if (packageTransformers === undefined) { - throw error + throw new Error( + `There is no transformer for the export '${exportName}' in '${packageName}'` + ) } let [exportTransformer, defaultOptions] = // $FlowFixMe - packageTransformers[exportName] - if (packageTransformers === undefined) { - throw error - } + Array.isArray(packageTransformers[exportName]) + ? packageTransformers[exportName] + : [packageTransformers[exportName]] + transformers[localExportName] = [ exportTransformer, { ...defaultOptions, ...options } @@ -188,7 +188,7 @@ export default function(babel: *) { } let { transformers } = macros[jsxCoreImport.specifier] for (let key in transformers) { - if (transformers[key] === coreCssTransformer) { + if (transformers[key][0] === coreCssTransformer) { jsxCoreImport.cssExport = key return } @@ -214,12 +214,11 @@ export default function(babel: *) { for (const node of path.node.body) { if (t.isImportDeclaration(node)) { let jsxCoreImport = jsxCoreImports.find( - ([packageName, localImportName]) => - node.source.value === packageName && + thing => + node.source.value === thing.specifier && node.specifiers.some( x => - t.isImportSpecifier(x) && - x.imported.name === localImportName + t.isImportSpecifier(x) && x.imported.name === thing.export ) ) if (jsxCoreImport) { From b8c7a5d19bfc8c9e51627da8ffeaa3a39d3f4b1d Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Fri, 8 Nov 2019 00:10:59 +1000 Subject: [PATCH 16/22] Update more things --- .changeset/giant-oranges-impress.md | 3 ++- .changeset/stupid-radios-draw.md | 1 + .../__tests__/source-maps/__snapshots__/index.js.snap | 2 +- packages/babel-plugin-emotion/package.json | 1 + packages/babel-preset-css-prop/src/index.js | 5 +++-- 5 files changed, 8 insertions(+), 4 deletions(-) diff --git a/.changeset/giant-oranges-impress.md b/.changeset/giant-oranges-impress.md index 39c05d6ae..3fce83302 100644 --- a/.changeset/giant-oranges-impress.md +++ b/.changeset/giant-oranges-impress.md @@ -1,5 +1,6 @@ --- 'babel-plugin-emotion': major +'@emotion/babel-preset-css-prop': major --- -Removed support for the `instances` option, replace any usage of it with the `importMap` option +Removed support for the `instances` option, please replace any usage of it with the `importMap` option diff --git a/.changeset/stupid-radios-draw.md b/.changeset/stupid-radios-draw.md index 6fd077080..2c8893745 100644 --- a/.changeset/stupid-radios-draw.md +++ b/.changeset/stupid-radios-draw.md @@ -1,5 +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/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap index 0ff8ca51b..32a8981c5 100644 --- a/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap +++ b/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap @@ -66,7 +66,7 @@ const SomeComponent = props => ( ↓ ↓ ↓ ↓ ↓ ↓ -import _css from \\"@emotion/css\\"; +import { css as _css } from \\"@emotion/core\\"; /** @jsx jsx */ import { jsx } from '@emotion/core'; diff --git a/packages/babel-plugin-emotion/package.json b/packages/babel-plugin-emotion/package.json index 3f11498a1..69e5479d4 100644 --- a/packages/babel-plugin-emotion/package.json +++ b/packages/babel-plugin-emotion/package.json @@ -14,6 +14,7 @@ }, "dependencies": { "@babel/helper-module-imports": "^7.0.0", + "@babel/runtime": "^7.5.5", "@emotion/hash": "0.7.3", "@emotion/memoize": "0.7.3", "@emotion/serialize": "^1.0.0-next.0", diff --git a/packages/babel-preset-css-prop/src/index.js b/packages/babel-preset-css-prop/src/index.js index e60d91f4b..7e97fa9d9 100644 --- a/packages/babel-preset-css-prop/src/index.js +++ b/packages/babel-preset-css-prop/src/index.js @@ -11,7 +11,7 @@ let pragmaName = '___EmotionJSX' export default ( api, - { pragma, sourceMap, autoLabel, labelFormat, ...options } = {} + { pragma, sourceMap, autoLabel, labelFormat, importMap, ...options } = {} ) => { return { plugins: [ @@ -30,7 +30,8 @@ export default ( sourceMap, autoLabel, labelFormat, - cssPropOptimization: true + cssPropOptimization: true, + importMap } ] ] From d1eb462824c5da418f6906f8ba92bd4612504918 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Fri, 8 Nov 2019 00:12:05 +1000 Subject: [PATCH 17/22] Words --- .changeset/giant-oranges-impress.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/giant-oranges-impress.md b/.changeset/giant-oranges-impress.md index 3fce83302..f80d9a8dd 100644 --- a/.changeset/giant-oranges-impress.md +++ b/.changeset/giant-oranges-impress.md @@ -3,4 +3,4 @@ '@emotion/babel-preset-css-prop': major --- -Removed support for the `instances` option, please replace any usage of it with the `importMap` option +Removed support for the `instances` option, any usage of it should be replaced with the `importMap` option From ed0f63ed640c04b083e79f7a97e46faf50e5b8c6 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Fri, 8 Nov 2019 00:17:23 +1000 Subject: [PATCH 18/22] Remove obselete snapshots --- .../css-requires-options.js.snap | 99 ------------------- 1 file changed, 99 deletions(-) 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 index 0573c5d2d..c48bb5ad5 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap @@ -34,54 +34,6 @@ _keyframes2(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'; @@ -189,57 +141,6 @@ _keyframes2(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\\"; From 9943f1a8b0d4773fb136780b9f5842b5c9d1cc4a Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Fri, 8 Nov 2019 07:17:04 +1000 Subject: [PATCH 19/22] Fix stuff --- packages/babel-plugin-emotion/README.md | 17 +++++++----- .../styled-with-base-specified.js | 3 +++ .../__snapshots__/import-mapping.js.snap | 26 +++++++++++++++++++ .../import-mapping/import-mapping.js | 7 ++++- packages/babel-plugin-emotion/src/index.js | 15 ++++++----- .../babel-plugin-emotion/src/styled-macro.js | 16 +++++++++--- 6 files changed, 66 insertions(+), 18 deletions(-) create mode 100644 packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/styled-with-base-specified.js diff --git a/packages/babel-plugin-emotion/README.md b/packages/babel-plugin-emotion/README.md index 0d22b3a27..24cdd8ba1 100644 --- a/packages/babel-plugin-emotion/README.md +++ b/packages/babel-plugin-emotion/README.md @@ -297,17 +297,20 @@ This option allows you to tell babel-plugin-emotion what imports it should look An example config: -```js +```json { "my-package": { - "someExport": { - "canonicalImport": ["@emotion/css", "default"] - }, "anotherExport": { - // this needs a better name "canonicalImport": ["@emotion/styled", "default"], - // this option should be optional and have a better name - "baseStyledPackage": ["my-package", "anotherExport"] + "baseImport": ["my-package/base", "anotherExport"] + } + }, + "some-package": { + "someExport": { + "canonicalImport": ["@emotion/core", "css"] + }, + "thisIsTheJsxExport": { + "canonicalImport": ["@emotion/core", "jsx"] } } } diff --git a/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/styled-with-base-specified.js b/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/styled-with-base-specified.js new file mode 100644 index 000000000..f997bea80 --- /dev/null +++ b/packages/babel-plugin-emotion/__tests__/import-mapping/__fixtures__/styled-with-base-specified.js @@ -0,0 +1,3 @@ +import { nonDefaultStyled } from 'package-four' + +let SomeComp = nonDefaultStyled.div({ color: 'hotpink' }) diff --git a/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap b/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap index fcf70f9bb..f8eee0aa6 100644 --- a/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap +++ b/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap @@ -47,6 +47,32 @@ let SomeComp = _styled(\\"div\\", { });" `; +exports[`import mapping styled-with-base-specified 1`] = ` +"import { nonDefaultStyled } from 'package-four' + +let SomeComp = nonDefaultStyled.div({ color: 'hotpink' }) + + + ↓ ↓ ↓ ↓ ↓ ↓ + +import { something as _styled } from \\"package-four/base\\"; + +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).\\"; } + +let SomeComp = _styled(\\"div\\", { + target: \\"eccz39l0\\", + label: \\"SomeComp\\" +})(process.env.NODE_ENV === \\"production\\" ? { + name: \\"1lrxbo5\\", + styles: \\"color:hotpink;\\" +} : { + name: \\"1lrxbo5\\", + styles: \\"color:hotpink;\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC13aXRoLWJhc2Utc3BlY2lmaWVkLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVlIiwiZmlsZSI6InN0eWxlZC13aXRoLWJhc2Utc3BlY2lmaWVkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbm9uRGVmYXVsdFN0eWxlZCB9IGZyb20gJ3BhY2thZ2UtZm91cidcblxubGV0IFNvbWVDb21wID0gbm9uRGVmYXVsdFN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG4iXX0= */\\", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ +});" +`; + exports[`import mapping vanilla 1`] = ` "import { something } from 'package-three' diff --git a/packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js b/packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js index fc7f0c912..c603d914e 100644 --- a/packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js +++ b/packages/babel-plugin-emotion/__tests__/import-mapping/import-mapping.js @@ -26,7 +26,12 @@ babelTester('import mapping', __dirname, { canonicalImport: ['emotion', 'css'] } }, - 'package-four': {} + 'package-four': { + nonDefaultStyled: { + canonicalImport: ['@emotion/styled', 'default'], + styledBaseImport: ['package-four/base', 'something'] + } + } } } ] diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index c891b29ea..4c4287486 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -37,14 +37,17 @@ let transformersSource = { default: coreCssTransformer }, '@emotion/core': { - // jsx isn't included here because it's handled differently + // this is an empty function because this transformer is never called + // we don't run any transforms on `jsx` directly + // instead we use it as a hint to enable css prop optimization + jsx: () => {}, css: coreCssTransformer // TODO: maybe write transformers for keyframes and Global }, '@emotion/styled': { default: [ styledTransformer, - { baseImportPath: '@emotion/styled-base', isWeb: true } + { styledBaseImport: ['@emotion/styled-base', 'default'], isWeb: true } ] }, '@emotion/primitives': { @@ -144,7 +147,7 @@ export default function(babel: *) { specifier: string, export: string, cssExport: string | null - }> = [{ specifier: '@emotion/core', export: 'jsx', cssExport: 'css' }] + }> = [] Object.keys(state.opts.importMap || {}).forEach(specifierName => { let value = state.opts.importMap[specifierName] let transformers = {} @@ -166,6 +169,7 @@ export default function(babel: *) { `There is no transformer for the export '${exportName}' in '${packageName}'` ) } + let [exportTransformer, defaultOptions] = // $FlowFixMe Array.isArray(packageTransformers[exportName]) @@ -174,7 +178,7 @@ export default function(babel: *) { transformers[localExportName] = [ exportTransformer, - { ...defaultOptions, ...options } + { ...defaultOptions, styledBaseImport: undefined, ...options } ] }) macros[specifierName] = createTransformerMacro( @@ -183,9 +187,6 @@ export default function(babel: *) { ) }) jsxCoreImports.forEach(jsxCoreImport => { - if (jsxCoreImport.specifier === '@emotion/core') { - return - } let { transformers } = macros[jsxCoreImport.specifier] for (let key in transformers) { if (transformers[key][0] === coreCssTransformer) { diff --git a/packages/babel-plugin-emotion/src/styled-macro.js b/packages/babel-plugin-emotion/src/styled-macro.js index c6ae50dcd..b42237ec8 100644 --- a/packages/babel-plugin-emotion/src/styled-macro.js +++ b/packages/babel-plugin-emotion/src/styled-macro.js @@ -13,13 +13,23 @@ export let styledTransformer = ({ reference, importSpecifierName, options: { - baseImport: [ + styledBaseImport: [ baseImportPath = importPath, baseImportName = importSpecifierName ] = [], isWeb } -}: Object) => { +}: { + state: Object, + babel: Object, + importPath: string, + reference: Object, + importSpecifierName: string, + options: { + styledBaseImport?: [string, string], + isWeb: boolean + } +}) => { let getStyledIdentifier = () => { return addImport(state, baseImportPath, baseImportName, 'styled') } @@ -101,7 +111,7 @@ export let createStyledMacro = ({ default: [ styledTransformer, { - baseImport: [importPath, baseImportName], + styledBaseImport: [importPath, baseImportName], isWeb } ] From b74fc93113c425463cc5f97ce00ef99d67996e29 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Fri, 8 Nov 2019 07:17:38 +1000 Subject: [PATCH 20/22] Fix docs --- packages/babel-plugin-emotion/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-plugin-emotion/README.md b/packages/babel-plugin-emotion/README.md index 24cdd8ba1..d0496d5ff 100644 --- a/packages/babel-plugin-emotion/README.md +++ b/packages/babel-plugin-emotion/README.md @@ -302,7 +302,7 @@ An example config: "my-package": { "anotherExport": { "canonicalImport": ["@emotion/styled", "default"], - "baseImport": ["my-package/base", "anotherExport"] + "styledBaseImport": ["my-package/base", "anotherExport"] } }, "some-package": { From c05d09b49a46c97b60b378ff5ff762d48d82a8fd Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Fri, 8 Nov 2019 20:40:19 +1000 Subject: [PATCH 21/22] Fix things --- packages/babel-plugin-emotion/src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index 4c4287486..b89125b84 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -147,7 +147,7 @@ export default function(babel: *) { specifier: string, export: string, cssExport: string | null - }> = [] + }> = [{ specifier: '@emotion/core', export: 'jsx', cssExport: 'css' }] Object.keys(state.opts.importMap || {}).forEach(specifierName => { let value = state.opts.importMap[specifierName] let transformers = {} @@ -187,6 +187,7 @@ export default function(babel: *) { ) }) jsxCoreImports.forEach(jsxCoreImport => { + if (jsxCoreImport.specifier === '@emotion/core') return let { transformers } = macros[jsxCoreImport.specifier] for (let key in transformers) { if (transformers[key][0] === coreCssTransformer) { From dcc98ddf098411fc1d0d3bfeed5bb4fb8378c959 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Fri, 8 Nov 2019 20:56:09 +1000 Subject: [PATCH 22/22] Fix a bug --- packages/babel-plugin-emotion/src/index.js | 1 + .../__tests__/__fixtures__/array-css-prop.js | 3 +++ .../__tests__/__snapshots__/index.js.snap | 24 +++++++++++++++++++ .../__snapshots__/options-are-used.js.snap | 24 +++++++++++++++++++ 4 files changed, 52 insertions(+) create mode 100644 packages/babel-preset-css-prop/__tests__/__fixtures__/array-css-prop.js diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index b89125b84..55aa255ad 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -148,6 +148,7 @@ export default function(babel: *) { export: string, cssExport: string | null }> = [{ specifier: '@emotion/core', export: 'jsx', cssExport: 'css' }] + state.jsxCoreImport = jsxCoreImports[0] Object.keys(state.opts.importMap || {}).forEach(specifierName => { let value = state.opts.importMap[specifierName] let transformers = {} diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/array-css-prop.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/array-css-prop.js new file mode 100644 index 000000000..54a8dff97 --- /dev/null +++ b/packages/babel-preset-css-prop/__tests__/__fixtures__/array-css-prop.js @@ -0,0 +1,3 @@ +import * as React from 'react' + +const Component = props =>
diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap index 385243dd8..d4fee21ac 100644 --- a/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap +++ b/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap @@ -1,5 +1,29 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`@emotion/babel-preset-css-prop array-css-prop 1`] = ` +"import * as React from 'react' + +const Component = props =>
+ + + ↓ ↓ ↓ ↓ ↓ ↓ + +import { css as _css } from \\"@emotion/core\\"; + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +import * as React from 'react'; +import { jsx as ___EmotionJSX } from \\"@emotion/core\\"; + +const Component = props => ___EmotionJSX(\\"div\\", _extends({ + css: + /*#__PURE__*/ + _css([{ + color: 'green' + }], \\";label:Component;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFycmF5LWNzcy1wcm9wLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJhcnJheS1jc3MtcHJvcC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5jb25zdCBDb21wb25lbnQgPSBwcm9wcyA9PiA8ZGl2IGNzcz17W3sgY29sb3I6ICdncmVlbicgfV19IHsuLi5wcm9wc30gLz5cbiJdfQ== */\\")) +}, props));" +`; + exports[`@emotion/babel-preset-css-prop index 1`] = ` "import * as React from 'react' diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap index 3b783f381..1dafebc8a 100644 --- a/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap +++ b/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap @@ -1,5 +1,29 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`options are used array-css-prop 1`] = ` +"import * as React from 'react' + +const Component = props =>
+ + + ↓ ↓ ↓ ↓ ↓ ↓ + +import { css as _css } from \\"@emotion/core\\"; + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +import * as React from 'react'; +import { jsx as ___EmotionJSX } from \\"@emotion/core\\"; + +const Component = props => ___EmotionJSX(\\"div\\", _extends({ + css: + /*#__PURE__*/ + _css([{ + color: 'green' + }], \\";label:__fixtures__--array-css-prop--Component;\\") +}, props));" +`; + exports[`options are used index 1`] = ` "import * as React from 'react'