Merge pull request #70 from styled-components/fix/newline-mangling

Fix newlines being mangled inside values

Author: mxstbr

src/minify/index.js

@@ -2,6 +2,7 @@ import { makePlaceholder, splitByPlaceholders } from '../css/placeholderUtils'
 
 const makeMultilineCommentRegex = newlinePattern => new RegExp('\\/\\*(.|' + newlinePattern + ')*?\\*\\/', 'g')
 const lineCommentStart = /\/\//g
+const symbolRegex = /(\s*[;:{},]\s*)/g
 
 // Counts occurences of substr inside str
 const countOccurences = (str, substr) => str.split(substr).length - 1
@@ -37,6 +38,25 @@ export const stripLineComment = line => (
   ))
 )
 
+export const compressSymbols = code => code
+  .split(symbolRegex)
+  .reduce((str, fragment, index) => {
+    // Even-indices are non-symbol fragments
+    if (index % 2 === 0) {
+      return str + fragment
+    }
+
+    // Only manipulate symbols outside of strings
+    if (
+      countOccurences(str, '\'') % 2 === 0 &&
+      countOccurences(str, '\"') % 2 === 0
+    ) {
+      return str + fragment.trim()
+    }
+
+    return str + fragment
+  }, '')
+
 // Detects lines that are exclusively line comments
 const isLineComment = line => line.trim().startsWith('//')
 
@@ -46,14 +66,14 @@ const minify = linebreakPattern => {
   const multilineCommentRegex = makeMultilineCommentRegex(linebreakPattern)
 
   return code => {
-    const lines = code
+    const newCode = code
       .replace(multilineCommentRegex, '\n') // Remove multiline comments
       .split(linebreakRegex) // Split at newlines
+      .filter(line => line.length > 0 && !isLineComment(line)) // Removes lines containing only line comments
       .map(stripLineComment) // Remove line comments inside text
+      .join(' ') // Rejoin all lines
 
-    return lines
-      .filter(line => !isLineComment(line)) // Removes lines containing only line comments
-      .join('')
+    return compressSymbols(newCode)
   }
 }
 

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

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

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

@@ -1,6 +1,6 @@
 const Test = styled.div.withConfig({
   componentId: "f15zqz-0"
-})`width: 100%;`;
+})`width:100%;`;
 const Test2 = true ? styled.div.withConfig({
   componentId: "f15zqz-1"
 })`` : styled.div.withConfig({

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

@@ -1,7 +1,7 @@
 const Test = styled.div.withConfig({
   displayName: "Test",
   componentId: "s1j54k93-0"
-})`width: 100%;`;
+})`width:100%;`;
 const Test2 = true ? styled.div.withConfig({
   displayName: "Test2",
   componentId: "s1j54k93-1"

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

@@ -3,7 +3,7 @@ import s from "styled-components";
 const Test = s.div.withConfig({
   displayName: "Test",
   componentId: "syqrfc-0"
-})`width: 100%;`;
+})`width:100%;`;
 const Test2 = true ? s.div.withConfig({
   displayName: "Test2",
   componentId: "syqrfc-1"

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

@@ -3,7 +3,7 @@ import styled from "styled-components";
 const Test = styled.div.withConfig({
   displayName: "before__Test",
   componentId: "gl3p53-0"
-})`color: red;`;
+})`color:red;`;
 styled.div.withConfig({
   displayName: "before",
   componentId: "gl3p53-1"

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

@@ -1,5 +1,5 @@
 const Test = s.div.withConfig({
   displayName: 'before__Test',
   componentId: 's2wuo7o-0'
-})`width: 100%;`;
+})`width:100%;`;
 import { default as s, css } from 'styled-components';

test/fixtures/07-not-use-private-api-if-not-required/after.js

@@ -1,3 +1,3 @@
 import styled from 'styled-components';
 
-const Test = styled.div`width: 100%;`;
+const Test = styled.div`width:100%;`;

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['width: 100%;'], ['width: 100%;']),
-    _templateObject2 = _taggedTemplateLiteral(['content: "  ', '  ";'], ['content: "  ', '  ";']),
-    _templateObject3 = _taggedTemplateLiteral(['content: "  ', '  ";color: red;'], ['content: "  ', '  ";color: red;']),
-    _templateObject4 = _taggedTemplateLiteral(['color: red;'], ['color: red;']),
-    _templateObject5 = _taggedTemplateLiteral(['&:hover {color: blue;}'], ['&:hover {color: blue;}']);
+var _templateObject = _taggedTemplateLiteral(['width:100%;'], ['width:100%;']),
+    _templateObject2 = _taggedTemplateLiteral(['content:"  ', '  ";'], ['content:"  ', '  ";']),
+    _templateObject3 = _taggedTemplateLiteral(['content:"  ', '  ";color:red;'], ['content:"  ', '  ";color:red;']),
+    _templateObject4 = _taggedTemplateLiteral(['color:red;'], ['color:red;']),
+    _templateObject5 = _taggedTemplateLiteral(['&:hover{color:blue;}'], ['&:hover{color:blue;}']);
 
 var _styledComponents = require('styled-components');
 

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

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 
-const Simple = styled.div`width: 100%;`;
+const Simple = styled.div`width:100%;`;
 
-const Interpolation = styled.div`content: "https://test.com/${props => props.endpoint}";`;
+const Interpolation = styled.div`content:"https://test.com/${props => props.endpoint}";`;
 
-const SpecialCharacters = styled.div`content: "  ${props => props.text}  ";color: red;`;
+const SpecialCharacters = styled.div`content:"  ${props => props.text}  ";color:red;`;
 
-const Comment = styled.div`width: 100%;color: red;`;
+const Comment = styled.div`width:100%;color:red;`;
 
-const Parens = styled.div`&:hover {color: blue;}color: red;`;
+const Parens = styled.div`&:hover{color:blue;}color:red;`;
 
-const UrlComments = styled.div`color: red;background: red;border: 1px solid green;`;
+const UrlComments = styled.div`color:red;background:red;border:1px solid green;`;