Repository: styled-components/babel-plugin-styled-components
Pull request #225 (2019-06-15 18:06:42)

fix css prop transpilation for stable server-side rendering


Patch:
diff --git a/src/index.js b/src/index.js
index 72c4d5b..3dd3098 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,8 +10,15 @@ export default function({ types: t }) {
   return {
     inherits: syntax,
     visitor: {
-      JSXAttribute(path, state) {
-        transpileCssProp(t)(path, state)
+      Program(path, state) {
+        path.traverse(
+          {
+            JSXAttribute(path, state) {
+              transpileCssProp(t)(path, state)
+            },
+          },
+          state
+        )
       },
       CallExpression(path, state) {
         displayNameAndId(t)(path, state)
diff --git a/src/utils/detectors.js b/src/utils/detectors.js
index 902dfeb..df19792 100644
--- a/src/utils/detectors.js
+++ b/src/utils/detectors.js
@@ -10,10 +10,10 @@ export const isValidTopLevelImport = x =>
 
 const localNameCache = {}
 
-const importLocalName = (name, state) => {
+export const importLocalName = (name, state, bypassCache = false) => {
   const cacheKey = name + state.file.opts.filename
 
-  if (localNameCache[cacheKey]) {
+  if (!bypassCache && localNameCache[cacheKey]) {
     return localNameCache[cacheKey]
   }
 
@@ -45,7 +45,9 @@ const importLocalName = (name, state) => {
       },
     },
   })
+
   localNameCache[cacheKey] = localName
+
   return localName
 }
 
diff --git a/src/visitors/transpileCssProp.js b/src/visitors/transpileCssProp.js
index 0e8e0e4..7c89c0d 100644
--- a/src/visitors/transpileCssProp.js
+++ b/src/visitors/transpileCssProp.js
@@ -1,6 +1,7 @@
 // Most of this code was taken from @satya164's babel-plugin-css-prop
 // @see https://github.com/satya164/babel-plugin-css-prop
 import { addDefault } from '@babel/helper-module-imports'
+import { importLocalName } from '../utils/detectors'
 import { useCssProp } from '../utils/options'
 
 const getName = (node, t) => {
@@ -9,9 +10,7 @@ const getName = (node, t) => {
     return `${getName(node.object, t)}.${node.property.name}`
   }
   throw path.buildCodeFrameError(
-    `Cannot infer name from node with type "${
-      node.type
-    }". Please submit an issue at github.com/styled-components/babel-plugin-styled-components with your code so we can take a look at your use case!`
+    `Cannot infer name from node with type "${node.type}". Please submit an issue at github.com/styled-components/babel-plugin-styled-components with your code so we can take a look at your use case!`
   )
 }
 
@@ -20,17 +19,22 @@ export default t => (path, state) => {
   if (path.node.name.name !== 'css') return
 
   const program = state.file.path
+
   // state.customImportName is passed through from styled-components/macro if it's used
   // since the macro also inserts the import
-  let importName = state.customImportName
-  // Insert import if it doesn't exist yet
+  let importName =
+    state.customImportName || t.identifier(importLocalName('default', state))
+
   const { bindings } = program.scope
-  if (!importName || !bindings[importName.name]) {
-    importName = addDefault(path, 'styled-components', {
-      nameHint: importName ? importName.name : 'styled',
+
+  // Insert import if it doesn't exist yet
+  if (!bindings[importName.name]) {
+    addDefault(path, 'styled-components', {
+      nameHint: 'styled',
     })
+
+    importName = t.identifier(importLocalName('default', state, true))
   }
-  if (!state.customImportName) state.customImportName = importName
 
   const elem = path.parentPath
   const name = getName(elem.node.name, t)
@@ -38,9 +42,13 @@ export default t => (path, state) => {
     'Styled' + name.replace(/^([a-z])/, (match, p1) => p1.toUpperCase())
   )
 
-  const styled = t.callExpression(importName, [
-    /^[a-z]/.test(name) ? t.stringLiteral(name) : t.identifier(name),
-  ])
+  let styled
+
+  if (/^[a-z]/.test(name)) {
+    styled = t.memberExpression(importName, t.identifier(name))
+  } else {
+    styled = t.callExpression(importName, [t.identifier(name)])
+  }
 
   let css
 


Test patch:
diff --git a/test/fixtures/transpile-css-prop-add-import/output.js b/test/fixtures/transpile-css-prop-add-import/output.js
index 9dec270..8503995 100644
--- a/test/fixtures/transpile-css-prop-add-import/output.js
+++ b/test/fixtures/transpile-css-prop-add-import/output.js
@@ -1,17 +1,5 @@
 "use strict";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n      width: 35em;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,7 +15,18 @@ var _config = _interopRequireDefault(require("../../../config"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// @flow
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n      width: 35em;\n    "]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 var _default = function _default() {
   return <_StyledDiv>
     <_Card.default>
@@ -43,4 +42,4 @@ var _default = function _default() {
 
 exports["default"] = _default;
 
-var _StyledDiv = (0, _styledComponents["default"])("div")(_templateObject());
+var _StyledDiv = _styledComponents["default"].div(_templateObject());
diff --git a/test/fixtures/transpile-css-prop-add-require/.babelrc b/test/fixtures/transpile-css-prop-add-require/.babelrc
index f60bc89..9725de2 100644
--- a/test/fixtures/transpile-css-prop-add-require/.babelrc
+++ b/test/fixtures/transpile-css-prop-add-require/.babelrc
@@ -1,6 +1,6 @@
 {
+  "presets": [["@babel/preset-env", { "modules": "commonjs" }]],
   "plugins": [
-    "transform-es2015-modules-commonjs",
     [
       "../../../src",
       {
@@ -12,4 +12,4 @@
       }
     ]
   ]
-}
\ No newline at end of file
+}
diff --git a/test/fixtures/transpile-css-prop-add-require/output.js b/test/fixtures/transpile-css-prop-add-require/output.js
index 998851f..99d7506 100644
--- a/test/fixtures/transpile-css-prop-add-require/output.js
+++ b/test/fixtures/transpile-css-prop-add-require/output.js
@@ -3,20 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = void 0;
 
-var _styledComponents = require("styled-components");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
+var _react = _interopRequireDefault(require("react"));
 
-var _react = require("react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _react2 = _interopRequireDefault(_react);
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n      width: 35em;\n    "]);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  _templateObject = function _templateObject() {
+    return data;
+  };
 
-// @flow
-exports.default = () => <_StyledDiv />;
+  return data;
+}
 
-var _StyledDiv = (0, _styledComponents2.default)("div")`
-      width: 35em;
-    `;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _default = function _default() {
+  return <_StyledDiv />;
+};
+
+exports["default"] = _default;
+
+var _StyledDiv = _styledComponents["default"].div(_templateObject());
diff --git a/test/fixtures/transpile-css-prop-all-options-on/.babelrc b/test/fixtures/transpile-css-prop-all-options-on/.babelrc
new file mode 100644
index 0000000..305378c
--- /dev/null
+++ b/test/fixtures/transpile-css-prop-all-options-on/.babelrc
@@ -0,0 +1,15 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": [
+    [
+      "../../../src",
+      {
+        "ssr": true,
+        "displayName": true,
+        "transpileTemplateLiterals": true,
+        "minify": true,
+        "cssProp": true
+      }
+    ]
+  ]
+}
diff --git a/test/fixtures/transpile-css-prop-all-options-on/code.js b/test/fixtures/transpile-css-prop-all-options-on/code.js
new file mode 100644
index 0000000..4fe8f8f
--- /dev/null
+++ b/test/fixtures/transpile-css-prop-all-options-on/code.js
@@ -0,0 +1,108 @@
+import styled from 'styled-components'
+
+/**
+ * control
+ */
+
+const Thing = styled.div`
+  color: red;
+`
+
+const Thing2 = styled(Thing)`
+  background: blue;
+`
+
+/*
+ * Basic fixtures
+ */
+
+const StaticString = p => <p css="flex: 1;">A</p>
+
+const StaticTemplate = p => (
+  <p
+    css={`
+      flex: 1;
+    `}
+  >
+    A
+  </p>
+)
+
+const ObjectProp = p => <p css={{ color: 'blue' }}>A</p>
+
+const NoChildren = p => <p css="flex: 1;" />
+
+const CssHelperProp = p => (
+  <p
+    css={css`
+      color: blue;
+    `}
+  >
+    A
+  </p>
+)
+
+/*
+ * Dynamic prop
+ */
+
+const CustomComp = p => <Paragraph css="flex: 1">H</Paragraph>
+
+const DynamicProp = p => <p css={props.cssText}>H</p>
+
+const LocalInterpolation = p => (
+  <p
+    css={`
+      background: ${props.bg};
+    `}
+  >
+    H
+  </p>
+)
+
+const FuncInterpolation = p => (
+  <p
+    css={`
+      color: ${props => props.theme.a};
+    `}
+  >
+    H
+  </p>
+)
+
+const radius = 10
+const GlobalInterpolation = p => (
+  <p
+    css={`
+      border-radius: ${radius}px;
+    `}
+  >
+    H
+  </p>
+)
+
+const LocalCssHelperProp = p => (
+  <p
+    css={css`
+      color: ${p.color};
+    `}
+  >
+    A
+  </p>
+)
+
+const DynamicCssHelperProp = p => (
+  <p
+    css={css`
+      color: ${props => props.theme.color};
+    `}
+  >
+    A
+  </p>
+)
+
+const CustomCompWithDot = p => <Button.Ghost css="flex: 1">H</Button.Ghost>
+
+const NestedCompWithDot = p => (
+  <Button.Ghost.New css="flex: 1">H</Button.Ghost.New>
+)
diff --git a/test/fixtures/transpile-css-prop-all-options-on/output.js b/test/fixtures/transpile-css-prop-all-options-on/output.js
new file mode 100644
index 0000000..8bdaf89
--- /dev/null
+++ b/test/fixtures/transpile-css-prop-all-options-on/output.js
@@ -0,0 +1,181 @@
+"use strict";
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * control
+ */
+var Thing = _styledComponents["default"].div.withConfig({
+  displayName: "code__Thing",
+  componentId: "sc-7evkve-0"
+})(["color:red;"]);
+
+var Thing2 = (0, _styledComponents["default"])(Thing).withConfig({
+  displayName: "code__Thing2",
+  componentId: "sc-7evkve-1"
+})(["background:blue;"]);
+/*
+ * Basic fixtures
+ */
+
+var StaticString = function StaticString(p) {
+  return <_StyledP>A</_StyledP>;
+};
+
+var StaticTemplate = function StaticTemplate(p) {
+  return <_StyledP2>
+    A
+  </_StyledP2>;
+};
+
+var ObjectProp = function ObjectProp(p) {
+  return <_StyledP3 _css={{
+    color: 'blue'
+  }}>A</_StyledP3>;
+};
+
+var NoChildren = function NoChildren(p) {
+  return <_StyledP4 />;
+};
+
+var CssHelperProp = function CssHelperProp(p) {
+  return <_StyledP5>
+    A
+  </_StyledP5>;
+};
+/*
+ * Dynamic prop
+ */
+
+
+var CustomComp = function CustomComp(p) {
+  return <_StyledParagraph>H</_StyledParagraph>;
+};
+
+var DynamicProp = function DynamicProp(p) {
+  return <_StyledP6 _css2={props.cssText}>H</_StyledP6>;
+};
+
+var LocalInterpolation = function LocalInterpolation(p) {
+  return <_StyledP7 _css3={props.bg}>
+    H
+  </_StyledP7>;
+};
+
+var FuncInterpolation = function FuncInterpolation(p) {
+  return <_StyledP8>
+    H
+  </_StyledP8>;
+};
+
+var radius = 10;
+
+var GlobalInterpolation = function GlobalInterpolation(p) {
+  return <_StyledP9>
+    H
+  </_StyledP9>;
+};
+
+var LocalCssHelperProp = function LocalCssHelperProp(p) {
+  return <_StyledP10 _css4={p.color}>
+    A
+  </_StyledP10>;
+};
+
+var DynamicCssHelperProp = function DynamicCssHelperProp(p) {
+  return <_StyledP11>
+    A
+  </_StyledP11>;
+};
+
+var CustomCompWithDot = function CustomCompWithDot(p) {
+  return <_StyledButtonGhost>H</_StyledButtonGhost>;
+};
+
+var NestedCompWithDot = function NestedCompWithDot(p) {
+  return <_StyledButtonGhostNew>H</_StyledButtonGhostNew>;
+};
+
+var _StyledP = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP",
+  componentId: "sc-7evkve-2"
+})(["flex:1;"]);
+
+var _StyledP2 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP2",
+  componentId: "sc-7evkve-3"
+})(["flex:1;"]);
+
+var _StyledP3 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP3",
+  componentId: "sc-7evkve-4"
+})(["", ""], function (p) {
+  return p._css;
+});
+
+var _StyledP4 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP4",
+  componentId: "sc-7evkve-5"
+})(["flex:1;"]);
+
+var _StyledP5 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP5",
+  componentId: "sc-7evkve-6"
+})(["color:blue;"]);
+
+var _StyledParagraph = (0, _styledComponents["default"])(Paragraph).withConfig({
+  displayName: "code___StyledParagraph",
+  componentId: "sc-7evkve-7"
+})(["flex:1"]);
+
+var _StyledP6 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP6",
+  componentId: "sc-7evkve-8"
+})(["", ""], function (p) {
+  return p._css2;
+});
+
+var _StyledP7 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP7",
+  componentId: "sc-7evkve-9"
+})(["background:", ";"], function (p) {
+  return p._css3;
+});
+
+var _StyledP8 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP8",
+  componentId: "sc-7evkve-10"
+})(["color:", ";"], function (props) {
+  return props.theme.a;
+});
+
+var _StyledP9 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP9",
+  componentId: "sc-7evkve-11"
+})(["border-radius:", "px;"], radius);
+
+var _StyledP10 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP10",
+  componentId: "sc-7evkve-12"
+})(["color:", ";"], function (p) {
+  return p._css4;
+});
+
+var _StyledP11 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP11",
+  componentId: "sc-7evkve-13"
+})(["color:", ";"], function (props) {
+  return props.theme.color;
+});
+
+var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost).withConfig({
+  displayName: "code___StyledButtonGhost",
+  componentId: "sc-7evkve-14"
+})(["flex:1"]);
+
+var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New).withConfig({
+  displayName: "code___StyledButtonGhostNew",
+  componentId: "sc-7evkve-15"
+})(["flex:1"]);
diff --git a/test/fixtures/transpile-css-prop/output.js b/test/fixtures/transpile-css-prop/output.js
index 623bae8..fe8a977 100644
--- a/test/fixtures/transpile-css-prop/output.js
+++ b/test/fixtures/transpile-css-prop/output.js
@@ -1,37 +1,11 @@
 "use strict";
 
-function _templateObject17() {
-  var data = _taggedTemplateLiteral(["flex: 1"]);
-
-  _templateObject17 = function _templateObject17() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject16() {
-  var data = _taggedTemplateLiteral(["flex: 1"]);
-
-  _templateObject16 = function _templateObject16() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject15() {
-  var data = _taggedTemplateLiteral(["\n      color: ", ";\n    "]);
-
-  _templateObject15 = function _templateObject15() {
-    return data;
-  };
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-  return data;
-}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _templateObject14() {
-  var data = _taggedTemplateLiteral(["\n      color: ", ";\n    "]);
+  var data = _taggedTemplateLiteral(["flex: 1"]);
 
   _templateObject14 = function _templateObject14() {
     return data;
@@ -41,7 +15,7 @@ function _templateObject14() {
 }
 
 function _templateObject13() {
-  var data = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n    "]);
+  var data = _taggedTemplateLiteral(["flex: 1"]);
 
   _templateObject13 = function _templateObject13() {
     return data;
@@ -61,7 +35,7 @@ function _templateObject12() {
 }
 
 function _templateObject11() {
-  var data = _taggedTemplateLiteral(["\n      background: ", ";\n    "]);
+  var data = _taggedTemplateLiteral(["\n      color: ", ";\n    "]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -71,7 +45,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = _taggedTemplateLiteral(["", ""]);
+  var data = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n    "]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -81,7 +55,7 @@ function _templateObject10() {
 }
 
 function _templateObject9() {
-  var data = _taggedTemplateLiteral(["flex: 1"]);
+  var data = _taggedTemplateLiteral(["\n      color: ", ";\n    "]);
 
   _templateObject9 = function _templateObject9() {
     return data;
@@ -91,7 +65,7 @@ function _templateObject9() {
 }
 
 function _templateObject8() {
-  var data = _taggedTemplateLiteral(["\n      color: blue;\n    "]);
+  var data = _taggedTemplateLiteral(["\n      background: ", ";\n    "]);
 
   _templateObject8 = function _templateObject8() {
     return data;
@@ -101,7 +75,7 @@ function _templateObject8() {
 }
 
 function _templateObject7() {
-  var data = _taggedTemplateLiteral(["flex: 1;"]);
+  var data = _taggedTemplateLiteral(["", ""]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -111,7 +85,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = _taggedTemplateLiteral(["", ""]);
+  var data = _taggedTemplateLiteral(["flex: 1"]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -121,7 +95,7 @@ function _templateObject6() {
 }
 
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n      flex: 1;\n    "]);
+  var data = _taggedTemplateLiteral(["\n      color: blue;\n    "]);
 
   _templateObject5 = function _templateObject5() {
     return data;
@@ -140,12 +114,8 @@ function _templateObject4() {
   return data;
 }
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n      color: ", ";\n    "]);
+  var data = _taggedTemplateLiteral(["", ""]);
 
   _templateObject3 = function _templateObject3() {
     return data;
@@ -155,7 +125,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n      color: ", ";\n    "]);
+  var data = _taggedTemplateLiteral(["\n      flex: 1;\n    "]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -165,7 +135,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n      color: blue;\n    "]);
+  var data = _taggedTemplateLiteral(["flex: 1;"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -257,42 +227,42 @@ var NestedCompWithDot = function NestedCompWithDot(p) {
   return <_StyledButtonGhostNew>H</_StyledButtonGhostNew>;
 };
 
-var _StyledP = (0, _styledComponents["default"])("p")(_templateObject4());
+var _StyledP = _styledComponents["default"].p(_templateObject());
 
-var _StyledP2 = (0, _styledComponents["default"])("p")(_templateObject5());
+var _StyledP2 = _styledComponents["default"].p(_templateObject2());
 
-var _StyledP3 = (0, _styledComponents["default"])("p")(_templateObject6(), function (p) {
+var _StyledP3 = _styledComponents["default"].p(_templateObject3(), function (p) {
   return p._css;
 });
 
-var _StyledP4 = (0, _styledComponents["default"])("p")(_templateObject7());
+var _StyledP4 = _styledComponents["default"].p(_templateObject4());
 
-var _StyledP5 = (0, _styledComponents["default"])("p")(_templateObject8());
+var _StyledP5 = _styledComponents["default"].p(_templateObject5());
 
-var _StyledParagraph = (0, _styledComponents["default"])(Paragraph)(_templateObject9());
+var _StyledParagraph = (0, _styledComponents["default"])(Paragraph)(_templateObject6());
 
-var _StyledP6 = (0, _styledComponents["default"])("p")(_templateObject10(), function (p) {
+var _StyledP6 = _styledComponents["default"].p(_templateObject7(), function (p) {
   return p._css2;
 });
 
-var _StyledP7 = (0, _styledComponents["default"])("p")(_templateObject11(), function (p) {
+var _StyledP7 = _styledComponents["default"].p(_templateObject8(), function (p) {
   return p._css3;
 });
 
-var _StyledP8 = (0, _styledComponents["default"])("p")(_templateObject12(), function (props) {
+var _StyledP8 = _styledComponents["default"].p(_templateObject9(), function (props) {
   return props.theme.a;
 });
 
-var _StyledP9 = (0, _styledComponents["default"])("p")(_templateObject13(), radius);
+var _StyledP9 = _styledComponents["default"].p(_templateObject10(), radius);
 
-var _StyledP10 = (0, _styledComponents["default"])("p")(_templateObject14(), function (p) {
+var _StyledP10 = _styledComponents["default"].p(_templateObject11(), function (p) {
   return p._css4;
 });
 
-var _StyledP11 = (0, _styledComponents["default"])("p")(_templateObject15(), function (props) {
+var _StyledP11 = _styledComponents["default"].p(_templateObject12(), function (props) {
   return props.theme.color;
 });
 
-var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost)(_templateObject16());
+var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost)(_templateObject13());
 
-var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New)(_templateObject17());
+var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New)(_templateObject14());
diff --git a/test/index.test.js b/test/index.test.js
index 8676471..c4b7fe0 100644
--- a/test/index.test.js
+++ b/test/index.test.js
@@ -1,5 +1,4 @@
 import path from 'path'
-import fs from 'fs'
 import { create } from 'babel-test'
 import { toMatchFile } from 'jest-file-snapshot'