Repository: styled-components/babel-plugin-styled-components (js)

Issue:
//-style comments are mangled by the plugin
When using line comments, they get their newline stripped by the minification and they become an erroneous selector.

<strike>I was also not able to turn off minify with the plugin options.</strike> (config error)

I propose that minification be disabled until #26 lands, that will be much more useful and correct.

Pull request:
Workaround for line comments
fixes #29 

Patch:
diff --git a/src/visitors/minify.js b/src/visitors/minify.js
index 4bb1b4c..2b88c89 100644
--- a/src/visitors/minify.js
+++ b/src/visitors/minify.js
@@ -2,12 +2,22 @@ import * as t from 'babel-types'
 import { useMinify } from '../utils/options'
 import { isStyled, isHelper } from '../utils/detectors'
 
+const minify = (linebreak) => {
+  const regex = new RegExp(linebreak + '\\s*', 'g')
+  return (code) => code.split(regex).filter(line => line.length > 0).map((line) => {
+    return line.indexOf('//') === -1 ? line : line + '\n';
+  }).join('')
+}
+
+const minifyRaw = minify('(?:\\\\r|\\\\n|\\r|\\n)')
+const minifyCooked = minify('[\\r\\n]')
+
 export default (path, state) => {
   if (useMinify(state) && (isStyled(path.node.tag, state) || isHelper(path.node.tag, state))) {
     const templateLiteral = path.node.quasi
     for (let element of templateLiteral.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, '')
+      element.value.raw = minifyRaw(element.value.raw)
+      element.value.cooked = minifyCooked(element.value.cooked)
     }
   }
 }


Test patch:
diff --git a/test/fixtures/08-minify-css-to-use-with-transpilation/after.js b/test/fixtures/08-minify-css-to-use-with-transpilation/after.js
index 4e4f961..c645c62 100644
--- a/test/fixtures/08-minify-css-to-use-with-transpilation/after.js
+++ b/test/fixtures/08-minify-css-to-use-with-transpilation/after.js
@@ -3,7 +3,8 @@
 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;}']);
+    _templateObject4 = _taggedTemplateLiteral(['// comment\ncolor: red;'], ['// comment\ncolor: red;']),
+    _templateObject5 = _taggedTemplateLiteral(['&:hover {color: blue;}'], ['&:hover {color: blue;}']);
 
 var _styledComponents = require('styled-components');
 
@@ -23,4 +24,6 @@ var SpecialCharacters = _styledComponents2.default.div(_templateObject3, functio
   return props.text;
 });
 
-var Parens = _styledComponents2.default.div(_templateObject4);
+var Comment = _styledComponents2.default.div(_templateObject4);
+
+var Parens = _styledComponents2.default.div(_templateObject5);
diff --git a/test/fixtures/08-minify-css-to-use-with-transpilation/before.js b/test/fixtures/08-minify-css-to-use-with-transpilation/before.js
index 71dc3a3..92c613e 100644
--- a/test/fixtures/08-minify-css-to-use-with-transpilation/before.js
+++ b/test/fixtures/08-minify-css-to-use-with-transpilation/before.js
@@ -12,6 +12,11 @@ const SpecialCharacters = styled.div`
   content: "  ${props => props.text}  ";\n color: red;
 `;
 
+const Comment = styled.div`
+  // comment
+  color: red;
+`
+
 const Parens = styled.div`
   &:hover {
     color: blue;
diff --git a/test/fixtures/09-minify-css-to-use-without-transpilation/after.js b/test/fixtures/09-minify-css-to-use-without-transpilation/after.js
index c512356..aeb6094 100644
--- a/test/fixtures/09-minify-css-to-use-without-transpilation/after.js
+++ b/test/fixtures/09-minify-css-to-use-without-transpilation/after.js
@@ -6,4 +6,7 @@ const Interpolation = styled.div`content: "  ${ props => props.text }  ";`;
 
 const SpecialCharacters = styled.div`content: "  ${ props => props.text }  ";color: red;`;
 
+const Comment = styled.div`width: 100%;// comment
+color: red;`;
+
 const Parens = styled.div`&:hover {color: blue;}color: red;`;
diff --git a/test/fixtures/09-minify-css-to-use-without-transpilation/before.js b/test/fixtures/09-minify-css-to-use-without-transpilation/before.js
index f3de450..4a93290 100644
--- a/test/fixtures/09-minify-css-to-use-without-transpilation/before.js
+++ b/test/fixtures/09-minify-css-to-use-without-transpilation/before.js
@@ -12,6 +12,12 @@ const SpecialCharacters = styled.div`
   content: "  ${props => props.text}  ";\n color: red;
 `;
 
+const Comment = styled.div`
+  width: 100%;
+  // comment
+  color: red;
+`;
+
 const Parens = styled.div`
   &:hover {
     color: blue;