fix single line comments + interpolation issues

this one was a doozy... I did a few things here:

1. Each injected placeholder corresponding to an expression now
   has a unique index that can be tracked.

2. After all the cleanup is completed, I do a diff on which
   indices were removed.

3. That gets passed up the chain to the main minify function, which
   then removes the appropriate expressions from the template literal
   without culling correct ones.

Author: quantizor

src/css/placeholderUtils.js

@@ -1,12 +1,14 @@
 // The capture group makes sure that the split contains the interpolation index
-const placeholderRegex = /__PLACEHOLDER_(\d+?)__/
+export const placeholderRegex = /(?:__PLACEHOLDER_(\d+)__)/g
 
 // Alternative regex that splits without a capture group
-const placeholderNonCapturingRegex = /__PLACEHOLDER_(?:\d+?)__/
+const placeholderNonCapturingRegex = /__PLACEHOLDER_(?:\d+)__/g
 
 // Generates a placeholder from an index
 export const makePlaceholder = index => `__PLACEHOLDER_${index}__`
 
 // Splits CSS by placeholders
-export const splitByPlaceholders = (css, capture = true) =>
-  css.split(capture ? placeholderRegex : placeholderNonCapturingRegex)
+export const splitByPlaceholders = ([css, ...rest], capture = true) => [
+  css.split(capture ? placeholderRegex : placeholderNonCapturingRegex),
+  ...rest,
+]

src/minify/index.js

@@ -1,11 +1,18 @@
-import { makePlaceholder, splitByPlaceholders } from '../css/placeholderUtils'
+import difference from 'lodash/difference'
 
-let i = 0
+import {
+  makePlaceholder,
+  placeholderRegex,
+  splitByPlaceholders,
+} from '../css/placeholderUtils'
 
-const injectUniquePlaceholders = strArr =>
-  strArr.reduce((str, val, index, arr) => {
+const injectUniquePlaceholders = strArr => {
+  let i = 0
+
+  return strArr.reduce((str, val, index, arr) => {
     return str + val + (index < arr.length - 1 ? makePlaceholder(i++) : '')
   }, '')
+}
 
 const makeMultilineCommentRegex = newlinePattern =>
   new RegExp('\\/\\*[^!](.|' + newlinePattern + ')*?\\*\\/', 'g')
@@ -82,7 +89,12 @@ const minify = linebreakPattern => {
       .map(stripLineComment) // Remove line comments inside text
       .join(' ') // Rejoin all lines
 
-    return compressSymbols(newCode)
+    const eliminatedExpressionIndices = difference(
+      code.match(placeholderRegex),
+      newCode.match(placeholderRegex)
+    ).map(x => parseInt(x.match(/\d+/)[0], 10))
+
+    return [compressSymbols(newCode), eliminatedExpressionIndices]
   }
 }
 

src/visitors/minify.js

@@ -10,12 +10,18 @@ export default t => (path, state) => {
     const templateLiteral = path.node.quasi
     const quasisLength = templateLiteral.quasis.length
 
-    const rawValuesMinified = minifyRawValues(
+    const [rawValuesMinified] = minifyRawValues(
       templateLiteral.quasis.map(x => x.value.raw)
     )
-    const cookedValuesMinfified = minifyCookedValues(
-      templateLiteral.quasis.map(x => x.value.cooked)
-    )
+
+    const [
+      cookedValuesMinfified,
+      eliminatedExpressionIndices,
+    ] = minifyCookedValues(templateLiteral.quasis.map(x => x.value.cooked))
+
+    eliminatedExpressionIndices.forEach((expressionIndex, iteration) => {
+      templateLiteral.expressions.splice(expressionIndex - iteration, 1)
+    })
 
     for (let i = 0; i < quasisLength; i++) {
       const element = templateLiteral.quasis[i]

src/visitors/templateLiterals/transpile.js

@@ -8,7 +8,9 @@ export default t => (path, state) => {
     } = path.node
 
     const values = t.arrayExpression(
-      quasis.map(quasi => t.stringLiteral(quasi.value.cooked))
+      quasis
+        .filter(quasi => quasi.value.cooked !== undefined)
+        .map(quasi => t.stringLiteral(quasi.value.cooked))
     )
 
     path.replaceWith(t.callExpression(callee, [values, ...expressions]))

test/__snapshots__/index.test.js.snap

@@ -158,6 +158,45 @@ const Parens = styled(\'div\')\`&:hover{color:blue;}color:red;\`;
 const UrlComments = styled(\'div\')\`color:red;background:red;border:1px solid green;\`;"
 `;
 
+exports[`fixtures should minify single line comments with interpolations 1`] = `
+"import styled from \'styled-components/no-tags\';
+
+const Test1 = styled(\'div\').withConfig({
+  displayName: \'minify-single-line-comments-with-interpolations__Test1\',
+  componentId: \'sc-1p41dy5-0\'
+})([\'width:100%;\']);
+
+const Test2 = styled(\'div\').withConfig({
+  displayName: \'minify-single-line-comments-with-interpolations__Test2\',
+  componentId: \'sc-1p41dy5-1\'
+})([\'width:100%;\']);
+
+const Test3 = styled(\'div\').withConfig({
+  displayName: \'minify-single-line-comments-with-interpolations__Test3\',
+  componentId: \'sc-1p41dy5-2\'
+})([\'width:100%;\', \';\'], \'red\');
+
+const Test4 = styled(\'div\').withConfig({
+  displayName: \'minify-single-line-comments-with-interpolations__Test4\',
+  componentId: \'sc-1p41dy5-3\'
+})([\'width:100%;\']);
+
+const Test5 = styled(\'div\').withConfig({
+  displayName: \'minify-single-line-comments-with-interpolations__Test5\',
+  componentId: \'sc-1p41dy5-4\'
+})([\'width:100%;\']);
+
+const Test6 = styled(\'div\').withConfig({
+  displayName: \'minify-single-line-comments-with-interpolations__Test6\',
+  componentId: \'sc-1p41dy5-5\'
+})([\'background:url(\"https://google.com\");width:100%;\', \' \'], \'green\');
+
+const Test7 = styled(\'div\').withConfig({
+  displayName: \'minify-single-line-comments-with-interpolations__Test7\',
+  componentId: \'sc-1p41dy5-6\'
+})([\'background:url(\"https://google.com\");width:\', \';\', \'  height:\', \';\'], p => p.props.width, \'green\', p => p.props.height);"
+`;
+
 exports[`fixtures should not use private api if not required 1`] = `
 "import styled from \'styled-components/no-tags\';
 

test/fixtures/minify-single-line-comments-with-interpolations/index.js

@@ -1,6 +1,40 @@
 import styled from 'styled-components'
 
-const Simple = styled.div`
+const Test1 = styled.div`
   width: 100%;
   // color: ${'red'};
 `
+
+const Test2 = styled.div`
+  width: 100%;
+  // color: pale${'red'};
+`
+
+const Test3 = styled.div`
+  width: 100%;
+  // color
+  ${'red'};
+`
+
+const Test4 = styled.div`
+  width: 100%;
+  // color: ${'red'}-blue;
+`
+
+const Test5 = styled.div`
+  width: 100%;
+  // color: ${'red'}${'blue'};
+`
+
+const Test6 = styled.div`
+  background: url("https://google.com");
+  width: 100%;
+  ${'green'} // color: ${'red'}${'blue'};
+`
+
+const Test7 = styled.div`
+  background: url("https://google.com");
+  width: ${p => p.props.width};
+  ${'green'} // color: ${'red'}${'blue'};
+  height: ${p => p.props.height};
+`