Skip to content

Commit

Permalink
Allow all imports to be configurable (#306)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emmatown
emmatown authored Sep 14, 2017
1 parent 8ac0a61 commit 1c95c3d
Show file tree
Hide file tree
Showing 7 changed files with 325 additions and 25 deletions.
50 changes: 25 additions & 25 deletions packages/babel-plugin-emotion/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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,
Expand Down Expand Up @@ -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
)
}
}
}
Expand Down
37 changes: 37 additions & 0 deletions packages/babel-plugin-emotion/test/__snapshots__/font-face.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
\`;"
`;
61 changes: 61 additions & 0 deletions packages/babel-plugin-emotion/test/__snapshots__/inject-global.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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;
}
\`;"
`;
49 changes: 49 additions & 0 deletions packages/babel-plugin-emotion/test/__snapshots__/keyframes.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
\`;"
`;
43 changes: 43 additions & 0 deletions packages/babel-plugin-emotion/test/font-face.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
63 changes: 63 additions & 0 deletions packages/babel-plugin-emotion/test/inject-global.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
Loading

0 comments on commit 1c95c3d

Please sign in to comment.