diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index 2a0b6d4ea..912f76092 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -230,7 +230,10 @@ const visited = Symbol('visited') const defaultImportedNames = { styled: 'styled', - css: 'css' + css: 'css', + keyframes: 'keyframes', + injectGlobal: 'injectGlobal', + fontFace: 'fontFace' } export default function(babel) { @@ -250,7 +253,16 @@ export default function(babel) { ({ source, imported, specifiers }) => { if (source.indexOf('emotion') !== -1) { const importedNames = specifiers - .filter(v => ['default', 'css'].includes(v.imported)) + .filter( + v => + [ + 'default', + 'css', + 'keyframes', + 'injectGlobal', + 'fontFace' + ].indexOf(v.imported) !== -1 + ) .reduce( (acc, { imported, local }) => ({ ...acc, @@ -383,49 +395,37 @@ export default function(babel) { ) ) } else if (t.isIdentifier(path.node.tag)) { - if (path.node.tag.name === state.importedNames.css) { - replaceCssWithCallExpression( - path, - t.identifier(state.importedNames.css), - state, - t - ) - } else if (path.node.tag.name === 'keyframes') { + if ( + path.node.tag.name === state.importedNames.css || + path.node.tag === state.cssPropIdentifier + ) { + replaceCssWithCallExpression(path, path.node.tag, state, t) + } else if (path.node.tag.name === state.importedNames.keyframes) { replaceCssWithCallExpression( path, - t.identifier('keyframes'), + path.node.tag, state, t, (name, hash, src) => `@keyframes ${name}-${hash} { ${src} }` ) - } else if (path.node.tag.name === 'fontFace') { + } else if (path.node.tag.name === state.importedNames.fontFace) { replaceCssWithCallExpression( path, - t.identifier('fontFace'), + path.node.tag, state, t, (name, hash, src) => `@font-face {${src}}`, true ) - } else if (path.node.tag.name === 'injectGlobal') { + } else if (path.node.tag.name === state.importedNames.injectGlobal) { replaceCssWithCallExpression( path, - t.identifier('injectGlobal'), + path.node.tag, state, t, (name, hash, src) => src, true ) - } else if ( - state.cssPropIdentifier && - path.node.tag === state.cssPropIdentifier - ) { - replaceCssWithCallExpression( - path, - state.cssPropIdentifier, - state, - t - ) } } } diff --git a/packages/babel-plugin-emotion/test/__snapshots__/font-face.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/font-face.test.js.snap index 08ffd1491..db6ceb00c 100644 --- a/packages/babel-plugin-emotion/test/__snapshots__/font-face.test.js.snap +++ b/packages/babel-plugin-emotion/test/__snapshots__/font-face.test.js.snap @@ -54,6 +54,25 @@ fontFace([], [], function createEmotionStyledRules() { });" `; +exports[`fontFace babel inline dynamic change import 1`] = ` +" +import { fontFace as f } from 'emotion'; +f([], [], function createEmotionStyledRules() { + return [{ + 'fontFamily': 'MyHelvetica', + 'src': 'local(\\"Helvetica Neue Bold\\"),\\\\n local(\\"HelveticaNeue-Bold\\"),\\\\n url(MgOpenModernaBold.ttf)', + 'fontWeight': 'bold' + }]; +}); +fontFace\` + font-family: MyHelvetica; + src: local(\\"Helvetica Neue Bold\\"), + local(\\"HelveticaNeue-Bold\\"), + url(MgOpenModernaBold.ttf); + font-weight: bold; + \`;" +`; + exports[`fontFace babel inline interpolation 1`] = ` " fontFace([], [fontFamilyName], function createEmotionStyledRules(x0) { @@ -64,3 +83,21 @@ fontFace([], [fontFamilyName], function createEmotionStyledRules(x0) { }]; });" `; + +exports[`fontFace babel inline static change import 1`] = ` +" +f([], [], function createEmotionStyledRules() { + return [{ + \\"fontFamily\\": \\"MyHelvetica\\", + \\"src\\": \\"local(\\\\\\"Helvetica Neue Bold\\\\\\"),\\\\n local(\\\\\\"HelveticaNeue-Bold\\\\\\"),\\\\n url(MgOpenModernaBold.ttf)\\", + \\"fontWeight\\": \\"bold\\" + }]; +}); +fontFace\` + font-family: MyHelvetica; + src: local(\\"Helvetica Neue Bold\\"), + local(\\"HelveticaNeue-Bold\\"), + url(MgOpenModernaBold.ttf); + font-weight: bold; + \`;" +`; diff --git a/packages/babel-plugin-emotion/test/__snapshots__/inject-global.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/inject-global.test.js.snap index 0aae8ac1a..e7fa118f7 100644 --- a/packages/babel-plugin-emotion/test/__snapshots__/inject-global.test.js.snap +++ b/packages/babel-plugin-emotion/test/__snapshots__/inject-global.test.js.snap @@ -57,6 +57,37 @@ injectGlobal([], [display], function createEmotionStyledRules(x0) { });" `; +exports[`babel injectGlobal inline dynamic change import 1`] = ` +" +import { injectGlobal as inject } from 'emotion'; +inject([], [], function createEmotionStyledRules() { + return [{ + 'body': { + 'margin': '0', + 'padding': '0', + '& > div': { + 'display': '-webkit-box; display: -ms-flexbox; display: flex' + } + }, + 'html': { + 'background': 'green' + } + }]; +}); +injectGlobal\` + body { + margin: 0; + padding: 0; + & > div { + display: flex; + } + } + html { + background: green; + } + \`;" +`; + exports[`babel injectGlobal inline injectGlobal basic 1`] = ` " injectGlobal([], [], function createEmotionStyledRules() { @@ -93,3 +124,33 @@ injectGlobal([], [display], function createEmotionStyledRules(x0) { }]; });" `; + +exports[`babel injectGlobal inline static change import 1`] = ` +" +inject([], [], function createEmotionStyledRules() { + return [{ + \\"body\\": { + \\"margin\\": \\"0\\", + \\"padding\\": \\"0\\", + \\"& > div\\": { + \\"display\\": \\"-webkit-box; display: -ms-flexbox; display: flex\\" + } + }, + \\"html\\": { + \\"background\\": \\"green\\" + } + }]; +}); +injectGlobal\` + body { + margin: 0; + padding: 0; + & > div { + display: flex; + } + } + html { + background: green; + } + \`;" +`; diff --git a/packages/babel-plugin-emotion/test/__snapshots__/keyframes.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/keyframes.test.js.snap index adb87d248..9312f01c0 100644 --- a/packages/babel-plugin-emotion/test/__snapshots__/keyframes.test.js.snap +++ b/packages/babel-plugin-emotion/test/__snapshots__/keyframes.test.js.snap @@ -76,3 +76,52 @@ const rotate360 = /*#__PURE__*/keyframes([], [endingRotation], function createEm }]; });" `; + +exports[`babel keyframes inline static change import 1`] = ` +" +const rotate360 = /*#__PURE__*/frames([], [], function createEmotionStyledRules() { + return [{ + \\"from\\": { + \\"WebkitTransform\\": \\"rotate(0deg)\\", + \\"transform\\": \\"rotate(0deg)\\" + }, + \\"to\\": { + \\"WebkitTransform\\": \\"rotate(360deg)\\", + \\"transform\\": \\"rotate(360deg)\\" + } + }]; +}); +const rotate3601 = keyframes\` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + \`;" +`; + +exports[`babel keyframes inline static change import 2`] = ` +" +import { keyframes as frames } from 'emotion'; +const rotate360 = /*#__PURE__*/frames([], [], function createEmotionStyledRules() { + return [{ + 'from': { + 'WebkitTransform': 'rotate(0deg)', + 'transform': 'rotate(0deg)' + }, + 'to': { + 'WebkitTransform': 'rotate(360deg)', + 'transform': 'rotate(360deg)' + } + }]; +}); +const rotate3601 = keyframes\` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + \`;" +`; diff --git a/packages/babel-plugin-emotion/test/font-face.test.js b/packages/babel-plugin-emotion/test/font-face.test.js index fb1e378e5..15f1beb1e 100644 --- a/packages/babel-plugin-emotion/test/font-face.test.js +++ b/packages/babel-plugin-emotion/test/font-face.test.js @@ -36,6 +36,49 @@ describe('fontFace babel', () => { }) expect(code).toMatchSnapshot() }) + test('static change import', () => { + const basic = ` + f\` + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; + \`; + fontFace\` + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; + \`;` + const { code } = babel.transform(basic, { + plugins: [[plugin, { importedNames: { fontFace: 'f' } }]] + }) + expect(code).toMatchSnapshot() + }) + test('dynamic change import', () => { + const basic = ` + import { fontFace as f } from 'emotion'; + f\` + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; + \`; + fontFace\` + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; + \`;` + const { code } = babel.transform(basic, { + plugins: [[plugin]] + }) + expect(code).toMatchSnapshot() + }) }) describe('extract', () => { test('basic', () => { diff --git a/packages/babel-plugin-emotion/test/inject-global.test.js b/packages/babel-plugin-emotion/test/inject-global.test.js index ada48c583..497f3ddf8 100644 --- a/packages/babel-plugin-emotion/test/inject-global.test.js +++ b/packages/babel-plugin-emotion/test/inject-global.test.js @@ -47,6 +47,69 @@ describe('babel injectGlobal', () => { }) expect(code).toMatchSnapshot() }) + test('static change import', () => { + const basic = ` + inject\` + body { + margin: 0; + padding: 0; + & > div { + display: flex; + } + } + html { + background: green; + } + \`; + injectGlobal\` + body { + margin: 0; + padding: 0; + & > div { + display: flex; + } + } + html { + background: green; + } + \`;` + const { code } = babel.transform(basic, { + plugins: [[plugin, { importedNames: { injectGlobal: 'inject' } }]] + }) + expect(code).toMatchSnapshot() + }) + test('dynamic change import', () => { + const basic = ` + import { injectGlobal as inject } from 'emotion' + inject\` + body { + margin: 0; + padding: 0; + & > div { + display: flex; + } + } + html { + background: green; + } + \`; + injectGlobal\` + body { + margin: 0; + padding: 0; + & > div { + display: flex; + } + } + html { + background: green; + } + \`;` + const { code } = babel.transform(basic, { + plugins: [[plugin]] + }) + expect(code).toMatchSnapshot() + }) }) describe('extract', () => { test('injectGlobal basic', () => { diff --git a/packages/babel-plugin-emotion/test/keyframes.test.js b/packages/babel-plugin-emotion/test/keyframes.test.js index 5f7593c59..be77a855f 100644 --- a/packages/babel-plugin-emotion/test/keyframes.test.js +++ b/packages/babel-plugin-emotion/test/keyframes.test.js @@ -38,6 +38,53 @@ describe('babel keyframes', () => { }) expect(code).toMatchSnapshot() }) + test('static change import', () => { + const basic = ` + const rotate360 = frames\` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + \`; + const rotate3601 = keyframes\` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + \`;` + const { code } = babel.transform(basic, { + plugins: [[plugin, { importedNames: { keyframes: 'frames' } }]] + }) + expect(code).toMatchSnapshot() + }) + test('static change import', () => { + const basic = ` + import { keyframes as frames } from 'emotion' + const rotate360 = frames\` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + \`; + const rotate3601 = keyframes\` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + \`;` + const { code } = babel.transform(basic, { + plugins: [[plugin]] + }) + expect(code).toMatchSnapshot() + }) }) describe('extract', () => { test('keyframes basic', () => {