Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Babel 7 compatibility and change tests #440

Merged
merged 13 commits into from
Nov 4, 2017
Merged
Prev Previous commit
Next Next commit
Use module import helper to add extracted css import
emmatown committed Nov 3, 2017
commit dc7bc5cd5c7d76368140f4981ff8fba4fcf90001
8 changes: 2 additions & 6 deletions packages/babel-plugin-emotion/src/index.js
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
import fs from 'fs'
import { basename } from 'path'
import { touchSync } from 'touch'
import { addSideEffect } from '@babel/helper-module-imports'
import {
getIdentifierName,
getName,
@@ -273,12 +274,7 @@ export default function(babel) {
filenameArr.push('emotion', 'css')
const cssFilename = filenameArr.join('.')
const exists = fs.existsSync(cssFilename)
path.node.body.unshift(
t.importDeclaration(
[],
t.stringLiteral('./' + basename(cssFilename))
)
)
addSideEffect(path, './' + basename(cssFilename))
if (
exists ? fs.readFileSync(cssFilename, 'utf8') !== toWrite : true
) {
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`babel css prop extract babel 6 basic with extractStatic 1`] = `
"var _css = require(\\"emotion\\").css;
"require(\\"./emotion.emotion.css\\");

var _css = require(\\"emotion\\").css;

import \\"./emotion.css\\";
<div className={\\"css-jf1v9l\\" + \\" a\\"}></div>;


emotion.css
emotion.emotion.css
.css-jf1v9l{color:brown;}"
`;

exports[`babel css prop extract babel 7 basic with extractStatic 1`] = `
"var _css = require(\\"emotion\\").css;
"require(\\"./emotion.emotion.css\\");

var _css = require(\\"emotion\\").css;

import \\"./emotion.css\\";
<div className={\\"css-jf1v9l\\" + \\" a\\"}></div>;


emotion.css
emotion.emotion.css
.css-jf1v9l{color:brown;}"
`;

Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`babel css extract babel 6 babel css extract basic 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

\\"css-5bxlk\\";


emotion.css
emotion.emotion.css
.css-5bxlk{margin:12px 48px;color:#ffffff;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;color:blue;}"
`;

exports[`babel css extract babel 7 babel css extract basic 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

\\"css-5bxlk\\";


emotion.css
emotion.emotion.css
.css-5bxlk{margin:12px 48px;color:#ffffff;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;color:blue;}"
`;

Original file line number Diff line number Diff line change
@@ -63,22 +63,22 @@ fontFace\`
`;

exports[`fontFace extract babel 6 basic 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

undefined;


emotion.css
emotion.emotion.css
@font-face{font-family:MyHelvetica;src:local(\\"Helvetica Neue Bold\\"), local(\\"HelveticaNeue-Bold\\"), url(MgOpenModernaBold.ttf);font-weight:bold;}"
`;

exports[`fontFace extract babel 6 basic assign to variable 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

const thisWillBeUndefined = undefined;


emotion.css
emotion.emotion.css
@font-face{font-family:MyHelvetica;src:local(\\"Helvetica Neue Bold\\"), local(\\"HelveticaNeue-Bold\\"), url(MgOpenModernaBold.ttf);font-weight:bold;}"
`;

@@ -88,20 +88,22 @@ fontFace(\\"font-family:\\", fontFamilyName, \\";src:local(\\\\\\"Helvetica Neue
`;

exports[`fontFace extract babel 7 basic 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

undefined;


emotion.css
emotion.emotion.css
@font-face{font-family:MyHelvetica;src:local(\\"Helvetica Neue Bold\\"), local(\\"HelveticaNeue-Bold\\"), url(MgOpenModernaBold.ttf);font-weight:bold;}"
`;

exports[`fontFace extract babel 7 basic assign to variable 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

const thisWillBeUndefined = undefined;


emotion.css
emotion.emotion.css
@font-face{font-family:MyHelvetica;src:local(\\"Helvetica Neue Bold\\"), local(\\"HelveticaNeue-Bold\\"), url(MgOpenModernaBold.ttf);font-weight:bold;}"
`;

Original file line number Diff line number Diff line change
@@ -3,21 +3,21 @@
exports[`babel plugin fs creates and writes to the css file when it does not exist 1`] = `".css-1yfv4zm{margin:12px 48px;color:#ffffff;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;color:blue;name:class;}"`;

exports[`babel plugin fs creates and writes to the css file when it does not exist 2`] = `
"import \\"./fs.test.emotion.css\\";
"require(\\"./fs.test.emotion.css\\");

\\"css-1yfv4zm\\";"
`;

exports[`babel plugin fs does not write to the css file when it is the same as is already written 1`] = `
"import \\"./fs.test.emotion.css\\";
"require(\\"./fs.test.emotion.css\\");

\\"css-1yfv4zm\\";"
`;

exports[`babel plugin fs writes to the css file when it does exist 1`] = `".css-1yfv4zm{margin:12px 48px;color:#ffffff;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;color:blue;name:class;}"`;

exports[`babel plugin fs writes to the css file when it does exist 2`] = `
"import \\"./fs.test.emotion.css\\";
"require(\\"./fs.test.emotion.css\\");

\\"css-1yfv4zm\\";"
`;
Original file line number Diff line number Diff line change
@@ -83,7 +83,7 @@ injectGlobal\`
`;

exports[`injectGlobal extract babel 6 dynamic change import 1`] = `
"import './emotion.css';
"import './emotion.emotion.css';

import { injectGlobal as inject } from 'emotion';
undefined;
@@ -101,17 +101,17 @@ injectGlobal\`
\`;


emotion.css
emotion.emotion.css
body{margin:0;padding:0;}body > div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}html{background:green;}"
`;

exports[`injectGlobal extract babel 6 injectGlobal basic 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

undefined;


emotion.css
emotion.emotion.css
body{margin:0;padding:0;}body > div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}html{background:green;}"
`;

@@ -121,7 +121,7 @@ injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";& > div{displa
`;

exports[`injectGlobal extract babel 6 static change import 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

undefined;
injectGlobal\`
@@ -138,12 +138,12 @@ injectGlobal\`
\`;


emotion.css
emotion.emotion.css
body{margin:0;padding:0;}body > div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}html{background:green;}"
`;

exports[`injectGlobal extract babel 7 dynamic change import 1`] = `
"import \\"./emotion.css\\";
"import \\"./emotion.emotion.css\\";
import { injectGlobal as inject } from 'emotion';
undefined;
injectGlobal\`
@@ -160,23 +160,25 @@ injectGlobal\`
\`;


emotion.css
emotion.emotion.css
body{margin:0;padding:0;}body > div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}html{background:green;}"
`;

exports[`injectGlobal extract babel 7 injectGlobal basic 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

undefined;


emotion.css
emotion.emotion.css
body{margin:0;padding:0;}body > div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}html{background:green;}"
`;

exports[`injectGlobal extract babel 7 injectGlobal with interpolation 1`] = `"injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";& > div{display:none;}}html{background:green;}\\");"`;

exports[`injectGlobal extract babel 7 static change import 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

undefined;
injectGlobal\`
body {
@@ -192,6 +194,6 @@ injectGlobal\`
\`;


emotion.css
emotion.emotion.css
body{margin:0;padding:0;}body > div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}html{background:green;}"
`;
Original file line number Diff line number Diff line change
@@ -79,7 +79,7 @@ const rotate3601 = keyframes\`
`;

exports[`keyframes extract babel 6 dynamic change import 1`] = `
"import './emotion.css';
"import './emotion.emotion.css';

import { keyframes as frames } from 'emotion';
const rotate360 = 'css-rotate360-bhsghd';
@@ -93,17 +93,17 @@ const rotate3601 = keyframes\`
\`;


emotion.css
emotion.emotion.css
@-webkit-keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"
`;

exports[`keyframes extract babel 6 keyframes basic 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

const rotate360 = \\"css-rotate360-bhsghd\\";


emotion.css
emotion.emotion.css
@-webkit-keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"
`;

@@ -113,7 +113,7 @@ const rotate360 = /*#__PURE__*/keyframes(\\"from{transform:rotate(0deg);}to{tran
`;

exports[`keyframes extract babel 6 static change import 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

const rotate360 = \\"css-rotate360-bhsghd\\";
const rotate3601 = keyframes\`
@@ -126,12 +126,12 @@ const rotate3601 = keyframes\`
\`;


emotion.css
emotion.emotion.css
@-webkit-keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"
`;

exports[`keyframes extract babel 7 dynamic change import 1`] = `
"import \\"./emotion.css\\";
"import \\"./emotion.emotion.css\\";
import { keyframes as frames } from 'emotion';
const rotate360 = \\"css-rotate360-bhsghd\\";
const rotate3601 = keyframes\`
@@ -144,16 +144,17 @@ const rotate3601 = keyframes\`
\`;


emotion.css
emotion.emotion.css
@-webkit-keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"
`;

exports[`keyframes extract babel 7 keyframes basic 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

const rotate360 = \\"css-rotate360-bhsghd\\";


emotion.css
emotion.emotion.css
@-webkit-keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"
`;

@@ -164,7 +165,8 @@ keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(\\", endingRotatio
`;

exports[`keyframes extract babel 7 static change import 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");

const rotate360 = \\"css-rotate360-bhsghd\\";
const rotate3601 = keyframes\`
from {
@@ -176,6 +178,6 @@ const rotate3601 = keyframes\`
\`;


emotion.css
emotion.emotion.css
@-webkit-keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes css-rotate360-bhsghd{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"
`;
235 changes: 158 additions & 77 deletions packages/babel-plugin-emotion/test/__snapshots__/macro.test.js.snap
Original file line number Diff line number Diff line change
@@ -1,158 +1,239 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`macro babel 6 css 1`] = `
"'use strict';
"import { css as _css } from '../src';
var _src = require('../src');
/*#__PURE__*/(0, _src.css)('margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;width:', widthVar, ';');"
/*#__PURE__*/_css('margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;width:', widthVar, ';');"
`;

exports[`macro babel 6 css call with no args 1`] = `
"'use strict';
var _src = require('../src');
"import { css as _css } from '../src';
var cls1 = /*#__PURE__*/(0, _src.css)();"
const cls1 = /*#__PURE__*/_css();"
`;

exports[`macro babel 6 css inside of css 1`] = `
"'use strict';
"import { css as _css } from '../src';
var _src = require('../src');
var cls2 = /*#__PURE__*/(0, _src.css)('font-size:20px;@media (min-width:420px){color:blue;', /*#__PURE__*/(0, _src.css)('width:96px;height:96px;'), ';line-height:40px;}background:green;');"
const cls2 = /*#__PURE__*/_css('font-size:20px;@media (min-width:420px){color:blue;', /*#__PURE__*/_css('width:96px;height:96px;'), ';line-height:40px;}background:green;');"
`;

exports[`macro babel 6 css object 1`] = `
"'use strict';
var _src = require('../src');
"import { css as _css } from '../src';
var cls1 = /*#__PURE__*/(0, _src.css)({ display: 'flex' });"
const cls1 = /*#__PURE__*/_css({ display: 'flex' });"
`;

exports[`macro babel 6 flush 1`] = `
"'use strict';
"import { flush as _flush } from '../src';
var _src = require('../src');
var someOtherVar = _src.flush;"
const someOtherVar = _flush;"
`;

exports[`macro babel 6 fontFace 1`] = `
"'use strict';
var _src = require('../src');
"import { fontFace as _fontFace } from '../src';
(0, _src.fontFace)('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;');"
`;

exports[`macro babel 6 hydrate 1`] = `
"'use strict';
"import { hydrate as _hydrate } from '../src';
var _src = require('../src');
var someOtherVar = _src.hydrate;"
const someOtherVar = _hydrate;"
`;

exports[`macro babel 6 injectGlobal 1`] = `
"'use strict';
var _src = require('../src');
"import { injectGlobal as _injectGlobal } from '../src';
(0, _src.injectGlobal)('body{margin:0;padding:0;& > div{display:none;&:hover{color:green;& span{color:red;&:after{content:\\"end of line\\"}}}}}html{background:green;}');"
_injectGlobal('body{margin:0;padding:0;& > div{display:none;&:hover{color:green;& span{color:red;&:after{content:\\"end of line\\"}}}}}html{background:green;}');"
`;

exports[`macro babel 6 keyframes 1`] = `
"'use strict';
"import { keyframes as _keyframes } from '../src';
var _src = require('../src');
var rotate360 = /*#__PURE__*/(0, _src.keyframes)('from{transform:rotate(0deg);}to{transform:rotate(360deg);}');"
const rotate360 = /*#__PURE__*/_keyframes('from{transform:rotate(0deg);}to{transform:rotate(360deg);}');"
`;

exports[`macro babel 6 multiple imports 1`] = `
"'use strict';
var _src = require('../src');
"import { keyframes as _keyframes, css as _css } from '../src';
var rotate360 = /*#__PURE__*/(0, _src.keyframes)('from{transform:rotate(0deg);}to{transform:rotate(360deg);}');
var thing = /*#__PURE__*/(0, _src.css)('margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;width:', widthVar, ';');"
const rotate360 = /*#__PURE__*/_keyframes('from{transform:rotate(0deg);}to{transform:rotate(360deg);}');
const thing = /*#__PURE__*/_css('margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;width:', widthVar, ';');"
`;

exports[`macro babel 6 some import that does not exist 1`] = `
"'use strict';
"import { thisDoesNotExist as _thisDoesNotExist } from '../src';
var _src = require('../src');
var someOtherVar = _src.thisDoesNotExist;"
const someOtherVar = _thisDoesNotExist;"
`;

exports[`styled macro babel 6 css from react 1`] = `
"'use strict';
var _styled = require('./styled');
exports[`macro babel 7 css 1`] = `
"import { css as _css } from \\"../src\\";
var someCls = /*#__PURE__*/(0, _styled.css)('display:flex;');"
/*#__PURE__*/
_css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;width:\\", widthVar, \\";\\");"
`;

exports[`styled macro babel 6 object function 1`] = `
"'use strict';
exports[`macro babel 7 css call with no args 1`] = `
"import { css as _css } from \\"../src\\";
const cls1 =
/*#__PURE__*/
_css();"
`;

var _styled2 = require('./styled');
exports[`macro babel 7 css inside of css 1`] = `
"import { css as _css } from \\"../src\\";
var _styled3 = _interopRequireDefault(_styled2);
const cls2 =
/*#__PURE__*/
_css(\\"font-size:20px;@media (min-width:420px){color:blue;\\",
/*#__PURE__*/
_css(\\"width:96px;height:96px;\\"), \\";line-height:40px;}background:green;\\");"
`;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports[`macro babel 7 css object 1`] = `
"import { css as _css } from \\"../src\\";
var SomeComponent = /*#__PURE__*/(0, _styled3.default)('div')({
const cls1 =
/*#__PURE__*/
_css({
display: 'flex'
});"
`;
exports[`styled macro babel 6 object member 1`] = `
"'use strict';
exports[`macro babel 7 flush 1`] = `
"import { flush as _flush } from \\"../src\\";
const someOtherVar = _flush;"
`;
exports[`macro babel 7 fontFace 1`] = `
"import { fontFace as _fontFace } from \\"../src\\";
_fontFace(\\"font-family:MyHelvetica;src:local(\\\\\\"Helvetica Neue Bold\\\\\\"),local(\\\\\\"HelveticaNeue-Bold\\\\\\"),url(MgOpenModernaBold.ttf);font-weight:bold;\\");"
`;
exports[`macro babel 7 hydrate 1`] = `
"import { hydrate as _hydrate } from \\"../src\\";
const someOtherVar = _hydrate;"
`;
var _styled2 = require('./styled');
exports[`macro babel 7 injectGlobal 1`] = `
"import { injectGlobal as _injectGlobal } from \\"../src\\";
var _styled3 = _interopRequireDefault(_styled2);
_injectGlobal(\\"body{margin:0;padding:0;& > div{display:none;&:hover{color:green;& span{color:red;&:after{content:\\\\\\"end of line\\\\\\"}}}}}html{background:green;}\\");"
`;
exports[`macro babel 7 keyframes 1`] = `
"import { keyframes as _keyframes } from \\"../src\\";
const rotate360 =
/*#__PURE__*/
_keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(360deg);}\\");"
`;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports[`macro babel 7 multiple imports 1`] = `
"import { keyframes as _keyframes, css as _css } from \\"../src\\";
var SomeComponent = /*#__PURE__*/(0, _styled3.default)('div')({
const rotate360 =
/*#__PURE__*/
_keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(360deg);}\\");
const thing =
/*#__PURE__*/
_css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;width:\\", widthVar, \\";\\");"
`;
exports[`macro babel 7 some import that does not exist 1`] = `
"import { thisDoesNotExist as _thisDoesNotExist } from \\"../src\\";
const someOtherVar = _thisDoesNotExist;"
`;
exports[`styled macro babel 6 css from react 1`] = `
"import { css as _css } from './styled';
const someCls = /*#__PURE__*/_css('display:flex;');"
`;
exports[`styled macro babel 6 object function 1`] = `
"import _styled from './styled';
const SomeComponent = /*#__PURE__*/_styled('div')({
display: 'flex'
});"
`;
exports[`styled macro babel 6 some import that does not exist 1`] = `
"'use strict';
exports[`styled macro babel 6 object member 1`] = `
"import _styled from './styled';
const SomeComponent = /*#__PURE__*/_styled('div')({
display: 'flex'
});"
`;
var _styled = require('./styled');
exports[`styled macro babel 6 some import that does not exist 1`] = `
"import { thisDoesNotExist as _thisDoesNotExist } from './styled';
var someOtherVar = _styled.thisDoesNotExist;"
const someOtherVar = _thisDoesNotExist;"
`;
exports[`styled macro babel 6 tagged template literal function 1`] = `
"'use strict';
"import _styled from './styled';
var _styled2 = require('./styled');
const SomeComponent = /*#__PURE__*/_styled('div')('display:flex;');"
`;
var _styled3 = _interopRequireDefault(_styled2);
exports[`styled macro babel 6 tagged template literal member 1`] = `
"import _styled from './styled';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const SomeComponent = /*#__PURE__*/_styled('div')('display:flex;');"
`;
exports[`styled macro babel 7 css from react 1`] = `
"import { css as _css } from \\"./styled\\";
var SomeComponent = /*#__PURE__*/(0, _styled3.default)('div')('display:flex;');"
const someCls =
/*#__PURE__*/
_css(\\"display:flex;\\");"
`;
exports[`styled macro babel 6 tagged template literal member 1`] = `
"'use strict';
exports[`styled macro babel 7 object function 1`] = `
"import _styled from \\"./styled\\";
const SomeComponent =
/*#__PURE__*/
_styled('div')({
display: 'flex'
});"
`;
var _styled2 = require('./styled');
exports[`styled macro babel 7 object member 1`] = `
"import _styled from \\"./styled\\";
var _styled3 = _interopRequireDefault(_styled2);
const SomeComponent =
/*#__PURE__*/
_styled(\\"div\\")({
display: 'flex'
});"
`;
exports[`styled macro babel 7 some import that does not exist 1`] = `
"import { thisDoesNotExist as _thisDoesNotExist } from \\"./styled\\";
const someOtherVar = _thisDoesNotExist;"
`;
exports[`styled macro babel 7 tagged template literal function 1`] = `
"import _styled from \\"./styled\\";
const SomeComponent =
/*#__PURE__*/
_styled('div')(\\"display:flex;\\");"
`;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports[`styled macro babel 7 tagged template literal member 1`] = `
"import _styled from \\"./styled\\";
var SomeComponent = /*#__PURE__*/(0, _styled3.default)('div')('display:flex;');"
const SomeComponent =
/*#__PURE__*/
_styled(\\"div\\")(\\"display:flex;\\");"
`;

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -3,25 +3,27 @@
exports[`styled extract babel 6 basic 1`] = `"const H1 = /*#__PURE__*/styled('h1')('font-size:', fontSize + 'px', ';');"`;

exports[`styled extract babel 6 composition based on props 1`] = `
"import './emotion.css';
"require('./emotion.emotion.css');
const cls1 = 'css-cls1-1ltut9y';
const H1 = /*#__PURE__*/styled('h1')(props => {
return props.a ? cssA : cssB;
}, ';font-size:', fontSize + 'px', ';height:20px;transform:translateX(', props => props.translateX, ');');
emotion.css
emotion.emotion.css
.css-cls1-1ltut9y{width:20px;}"
`;

exports[`styled extract babel 6 config rename 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");
what(\\"h1\\", {
e: \\"css-14ksm7b\\"
})();
emotion.css
emotion.emotion.css
.css-14ksm7b{color:blue;}"
`;

@@ -54,13 +56,14 @@ const H1 = /*#__PURE__*/styled('h1')('font-size:', fontSize + 'px', ';height:20p
`;

exports[`styled extract babel 6 media query 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");
const H1 = styled(\\"h1\\", {
e: \\"css-6skbg5\\"
})();
emotion.css
emotion.emotion.css
@media print{.css-6skbg5{font-size:10pt;}}@media screen{.css-6skbg5 .child-selector{font-size:13px;}}@media screen,print{.css-6skbg5:hover + .css-6skbg5{line-height:1.2;}}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){.css-6skbg5 .child-selector{line-height:1.4;}}"
`;

@@ -69,24 +72,26 @@ exports[`styled extract babel 6 more than 10 dynamic values 1`] = `"const H1 = /
exports[`styled extract babel 6 nested 1`] = `"const H1 = /*#__PURE__*/styled('h1')('font-size:', fontSize + 'px', ';& div{color:blue;& span{color:red}}');"`;

exports[`styled extract babel 6 no dynamic 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");
styled(\\"h1\\", {
e: \\"css-14ksm7b\\"
})();
emotion.css
emotion.emotion.css
.css-14ksm7b{color:blue;}"
`;

exports[`styled extract babel 6 no use 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");
styled(\\"h1\\", {
e: \\"css-0\\"
})();
emotion.css
emotion.emotion.css
"
`;

@@ -120,13 +125,13 @@ const H1 = /*#__PURE__*/styled('h1')({
`;

exports[`styled extract babel 6 random expressions 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");
const a = () => \\"css-a-1cvrkk1\\";
/*#__PURE__*/styled(\\"h1\\")(\\"margin:12px 48px;\\", \\"css-143zpy6\\", \\";color:#ffffff;& .profile{\\", props => props.prop && a(), \\"}\\", { backgroundColor: \\"hotpink\\" }, \\";\\");
emotion.css
emotion.emotion.css
.css-a-1cvrkk1{font-size:1rem;}
.css-143zpy6{font-size:32px;}"
`;
@@ -184,13 +189,13 @@ const Figure = /*#__PURE__*/styled(\\"figure\\")({
`;

exports[`styled extract babel 6 variable import: no dynamic 1`] = `
"import './emotion.css';
"import './emotion.emotion.css';
import what from 'emotion';what('h1', {
e: 'css-14ksm7b'
})();
emotion.css
emotion.emotion.css
.css-14ksm7b{color:blue;}"
`;

@@ -201,7 +206,8 @@ styled(\\"h1\\")(\\"font-size:\\", fontSize + 'px', \\";\\");"
`;

exports[`styled extract babel 7 composition based on props 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");
const cls1 = \\"css-cls1-1ltut9y\\";
const H1 =
/*#__PURE__*/
@@ -210,18 +216,19 @@ styled(\\"h1\\")(props => {
}, \\";font-size:\\", fontSize + 'px', \\";height:20px;transform:translateX(\\", props => props.translateX, \\");\\");
emotion.css
emotion.emotion.css
.css-cls1-1ltut9y{width:20px;}"
`;

exports[`styled extract babel 7 config rename 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");
what(\\"h1\\", {
e: \\"css-14ksm7b\\"
})();
emotion.css
emotion.emotion.css
.css-14ksm7b{color:blue;}"
`;

@@ -266,13 +273,14 @@ styled(\\"h1\\")(\\"font-size:\\", fontSize + 'px', \\";height:20px;transform:tr
`;

exports[`styled extract babel 7 media query 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");
const H1 = styled(\\"h1\\", {
e: \\"css-6skbg5\\"
})();
emotion.css
emotion.emotion.css
@media print{.css-6skbg5{font-size:10pt;}}@media screen{.css-6skbg5 .child-selector{font-size:13px;}}@media screen,print{.css-6skbg5:hover + .css-6skbg5{line-height:1.2;}}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){.css-6skbg5 .child-selector{line-height:1.4;}}"
`;

@@ -289,24 +297,26 @@ styled(\\"h1\\")(\\"font-size:\\", fontSize + 'px', \\";& div{color:blue;& span{
`;

exports[`styled extract babel 7 no dynamic 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");
styled(\\"h1\\", {
e: \\"css-14ksm7b\\"
})();
emotion.css
emotion.emotion.css
.css-14ksm7b{color:blue;}"
`;

exports[`styled extract babel 7 no use 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");
styled(\\"h1\\", {
e: \\"css-0\\"
})();
emotion.css
emotion.emotion.css
"
`;

@@ -345,7 +355,7 @@ styled('h1')({
`;

exports[`styled extract babel 7 random expressions 1`] = `
"import \\"./emotion.css\\";
"require(\\"./emotion.emotion.css\\");
const a = () => \\"css-a-1cvrkk1\\";
@@ -355,7 +365,7 @@ styled(\\"h1\\")(\\"margin:12px 48px;\\", \\"css-143zpy6\\", \\";color:#ffffff;&
}, \\";\\");
emotion.css
emotion.emotion.css
.css-a-1cvrkk1{font-size:1rem;}
.css-143zpy6{font-size:32px;}"
`;
@@ -429,14 +439,14 @@ styled(\\"figure\\")({ ...defaultText
`;

exports[`styled extract babel 7 variable import: no dynamic 1`] = `
"import \\"./emotion.css\\";
"import \\"./emotion.emotion.css\\";
import what from 'emotion';
what(\\"h1\\", {
e: \\"css-14ksm7b\\"
})();
emotion.css
emotion.emotion.css
.css-14ksm7b{color:blue;}"
`;

14 changes: 7 additions & 7 deletions packages/babel-plugin-emotion/test/util.js
Original file line number Diff line number Diff line change
@@ -21,12 +21,12 @@ const createInlineTester = transform => opts => {
[
plugin,
{
filename: opts.filename || __filename,
babelrc: false,
...opts.opts
}
]
]
],
filename: opts.filename || 'emotion.js',
babelrc: false
}).code
).toMatchSnapshot()
}
@@ -49,13 +49,13 @@ const createExtractTester = transform => opts => {
[
plugin,
{
filename: opts.filename || __filename,
babelrc: false,
extractStatic: true,
...opts.opts
}
]
]
],
filename: opts.filename || 'emotion.js',
babelrc: false
})
if (extract) {
expect(
@@ -86,11 +86,11 @@ const createMacroTester = transform => opts => {
[
require('babel-macros'),
{
babelrc: false,
...opts.opts
}
]
],
babelrc: false,
filename: opts.filename || __filename
}).code
).toMatchSnapshot()