Merge pull request #15 from styled-components/minify-css

Minify css

README.md

@@ -62,6 +62,22 @@ If you don't need server-side rendering, you can disable it with the `ssr` optio
 }
 ```
 
+### Minify styles
+
+By default, plugin minifies styles in template literals. This operation may potentially break your styles in some rare cases, so we recommend to keep this option enabled in development if it's enabled in the production build. You will not see the effect of minification in generated style tags, it solely affects the presentation of styles inside js code.
+
+You can disable minification if you don't need it with minify option:
+
+```JSON
+{
+  "plugins": [
+    ["styled-components", {
+      "minify": false
+    }]
+  ]
+}
+```
+
 ## License
 
 Licensed under the MIT License, Copyright © 2016 Vladimir Danchenkov and Maximilian Stoiber.

src/index.js

@@ -1,6 +1,7 @@
 import hash from './utils/hash'
 import getTarget from './utils/get-target'
 import getName from './utils/get-name'
+import minify from './utils/minify'
 
 const blockName = (file) => {
   return file.opts.basename !== 'index' ?
@@ -18,23 +19,39 @@ export default function({ types: t }) {
   return {
     visitor: {
       Program(path, state) {
-        // Default imported variable name to "styled", adjust based on import below
-        let importedVariableName = 'styled'
+        const importedVariableNames = {
+          default: 'styled',
+          css: 'css',
+          keyframes: 'keyframes'
+        }
+
+        const isStyled = (tag) => (
+          (t.isMemberExpression(tag) && tag.object.name === importedVariableNames.default) ||
+          (t.isCallExpression(tag) && tag.callee.name === importedVariableNames.default)
+        )
 
-        const isStyled = (tag) => (tag.object && tag.object.name === importedVariableName) || (tag.callee && tag.callee.name === importedVariableName)
+        const isHelper = (tag) => (
+          t.isIdentifier(tag) && (
+            tag.name === importedVariableNames.css ||
+            tag.name === importedVariableNames.keyframes
+          )
+        )
 
         path.traverse({
           ImportDeclaration(path) {
             // Is the styled-components import!
             if (path.node.source.value === 'styled-components') {
-              // If the default is imported it's at defaultImport[0], otherwise defaultImport is empty
-              const defaultImport = path.get('specifiers').find((specifier) => {
-                return specifier.isImportDefaultSpecifier() || specifier.isImportSpecifier() && specifier.node.imported.name === 'default'
+              path.get('specifiers').forEach((specifier) => {
+                let importedName
+                if (specifier.isImportDefaultSpecifier()) {
+                  importedName = 'default'
+                } else if (specifier.isImportSpecifier()) {
+                  importedName = specifier.node.imported.name
+                }
+                if (importedVariableNames.hasOwnProperty(importedName)) {
+                  importedVariableNames[importedName] = specifier.node.local.name
+                }
               })
-              if (defaultImport) {
-                // Save the imported name
-                importedVariableName = defaultImport.node.local.name
-              }
             }
           }
         })
@@ -43,17 +60,17 @@ export default function({ types: t }) {
           displayName: getOption(state.opts, 'displayName'),
           ssr: getOption(state.opts, 'ssr'),
           fileName: getOption(state.opts, 'fileName'),
-        }
-
-        if (!options.ssr && !options.displayName) {
-          return
+          minify: getOption(state.opts, 'minify')
         }
 
         path.traverse({
           TaggedTemplateExpression(path, { file }) {
             const tag = path.node.tag
+            if (options.minify && (isStyled(tag) || isHelper(tag))) {
+              minify(path.node.quasi)
+            }
 
-            if (!isStyled(tag)) return
+            if (!(isStyled(tag) && (options.ssr || options.displayName))) return
 
             // Get target
             const target = getTarget(path.node.tag)
@@ -81,7 +98,7 @@ export default function({ types: t }) {
             }
 
             const call = t.callExpression(
-              t.identifier(importedVariableName),
+              t.identifier(importedVariableNames.default),
               [ t.objectExpression(styledCallProps) ]
             )
 

src/utils/minify.js

@@ -0,0 +1,8 @@
+import * as t from 'babel-types'
+
+export default (teplateLiteral) => {
+  for (let element of teplateLiteral.quasis) {
+    element.value.raw = element.value.raw.replace(/(\\r|\\n|\r|\n)\s*/g, '')
+    element.value.cooked = element.value.cooked.replace(/[\r\n]\s*/g, '')
+  }
+}

test/fixtures/01-add-display-names/after.js

@@ -1,7 +1,7 @@
 const Test = styled({
   target: 'div',
   displayName: 'Test'
-})` width: 100%;`;
+})`width: 100%;`;
 const Test2 = styled({
   target: 'div',
   displayName: 'Test2'

test/fixtures/01-add-display-names/before.js

@@ -1,4 +1,4 @@
-const Test = styled.div` width: 100%;`;
+const Test = styled.div`width: 100%;`;
 const Test2 = styled('div')``;
 const Test3 = true ? styled.div`` : styled.div``;
 const styles = { One: styled.div`` }

test/fixtures/02-add-identifier/after.js

@@ -1,7 +1,7 @@
 const Test = styled({
   target: "div",
   identifier: "Test-137hlza"
-})` width: 100%;`;
+})`width: 100%;`;
 const Test2 = true ? styled({
   target: "div",
   identifier: "Test2-bjbly"

test/fixtures/02-add-identifier/before.js

@@ -1,4 +1,4 @@
-const Test = styled.div` width: 100%;`;
+const Test = styled.div`width: 100%;`;
 const Test2 = true ? styled.div`` : styled.div``;
 const styles = { One: styled.div`` }
 let Component;

test/fixtures/03-add-identifier-and-display-name/after.js

@@ -2,7 +2,7 @@ const Test = styled({
   target: "div",
   displayName: "Test",
   identifier: "Test-18z24ew"
-})` width: 100%;`;
+})`width: 100%;`;
 const Test2 = true ? styled({
   target: "div",
   displayName: "Test2",

test/fixtures/03-add-identifier-and-display-name/before.js

@@ -1,4 +1,4 @@
-const Test = styled.div` width: 100%;`;
+const Test = styled.div`width: 100%;`;
 const Test2 = true ? styled.div`` : styled.div``;
 const styles = { One: styled.div`` }
 let Component;

test/fixtures/04-track-the-imported-variable/after.js

@@ -4,7 +4,7 @@ const Test = s({
   target: "div",
   displayName: "Test",
   identifier: "Test-62sgar"
-})` width: 100%;`;
+})`width: 100%;`;
 const Test2 = true ? s({
   target: "div",
   displayName: "Test2",

test/fixtures/04-track-the-imported-variable/before.js

@@ -1,6 +1,6 @@
 import s from "styled-components";
 
-const Test = s.div` width: 100%;`;
+const Test = s.div`width: 100%;`;
 const Test2 = true ? s.div`` : s.div``;
 const styles = { One: s.div`` }
 let Component;

test/fixtures/05-use-file-name/after.js

@@ -4,7 +4,7 @@ const Test = styled({
   target: "div",
   displayName: "before__Test",
   identifier: "before__Test-102oti6"
-})` color: red;`;
+})`color: red;`;
 styled({
   target: "div",
   displayName: "before",

test/fixtures/05-use-file-name/before.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
 
-const Test = styled.div` color: red;`;
+const Test = styled.div`color: red;`;
 styled.div``;
 export default styled.button``;

test/fixtures/06-work-with-hoisted-default-as-import/after.js

@@ -2,5 +2,5 @@ const Test = s({
   target: 'div',
   displayName: 'before__Test',
   identifier: 'before__Test-1ex1ta1'
-})` width: 100%;`;
+})`width: 100%;`;
 import { default as s, css } from 'styled-components';

test/fixtures/06-work-with-hoisted-default-as-import/before.js

@@ -1,2 +1,2 @@
-const Test = s.div` width: 100%;`;
+const Test = s.div`width: 100%;`;
 import { default as s, css } from 'styled-components';

test/fixtures/08-minify-css-to-use-with-transpilation/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    ["../../../src", {
+      "ssr": false,
+      "displayName": false
+    }]
+  ]
+}

test/fixtures/08-minify-css-to-use-with-transpilation/after.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var _templateObject = _taggedTemplateLiteral(['width: 100%;'], ['width: 100%;']),
+    _templateObject2 = _taggedTemplateLiteral(['content: "  ', '  ";'], ['content: "  ', '  ";']),
+    _templateObject3 = _taggedTemplateLiteral(['content: "  ', '  ";color: red;'], ['content: "  ', '  ";color: red;']),
+    _templateObject4 = _taggedTemplateLiteral(['&:hover {color: blue;}'], ['&:hover {color: blue;}']);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Simple = _styledComponents2.default.div(_templateObject);
+
+var Interpolation = _styledComponents2.default.div(_templateObject2, function (props) {
+  return props.text;
+});
+
+var SpecialCharacters = _styledComponents2.default.div(_templateObject3, function (props) {
+  return props.text;
+});
+
+var Parens = _styledComponents2.default.div(_templateObject4);

test/fixtures/08-minify-css-to-use-with-transpilation/before.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const Simple = styled.div`
+  width: 100%;
+`;
+
+const Interpolation = styled.div`
+  content: "  ${props => props.text}  ";
+`;
+
+const SpecialCharacters = styled.div`
+  content: "  ${props => props.text}  ";\n color: red;
+`;
+
+const Parens = styled.div`
+  &:hover {
+    color: blue;
+  }
+`;

test/fixtures/09-minify-css-to-use-without-transpilation/.babelrc

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    ["../../../src", {
+      "ssr": false,
+      "displayName": false
+    }]
+  ]
+}

test/fixtures/09-minify-css-to-use-without-transpilation/after.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Simple = styled.div`width: 100%;`;
+
+const Interpolation = styled.div`content: "  ${ props => props.text }  ";`;
+
+const SpecialCharacters = styled.div`content: "  ${ props => props.text }  ";color: red;`;
+
+const Parens = styled.div`&:hover {color: blue;}color: red;`;

test/fixtures/09-minify-css-to-use-without-transpilation/before.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const Simple = styled.div`
+  width: 100%;
+`;
+
+const Interpolation = styled.div`
+  content: "  ${props => props.text}  ";
+`;
+
+const SpecialCharacters = styled.div`
+  content: "  ${props => props.text}  ";\n color: red;
+`;
+
+const Parens = styled.div`
+  &:hover {
+    color: blue;
+  }
+  color: red;
+`;

test/fixtures/10-minify-css-in-helpers/.babelrc

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    ["../../../src", {
+      "ssr": false,
+      "displayName": false
+    }]
+  ]
+}

test/fixtures/10-minify-css-in-helpers/after.js

@@ -0,0 +1,5 @@
+import { css, keyframes } from 'styled-components';
+
+const key = keyframes`to {transform: rotate(360deg);}`;
+
+const color = css`color: ${ theColor };`;

test/fixtures/10-minify-css-in-helpers/before.js

@@ -0,0 +1,11 @@
+import { css, keyframes } from 'styled-components';
+
+const key = keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+const color = css`
+  color: ${theColor};
+`;