fix(styled-components): strip line comments after multiline declarations

packages/styled-components/__tests__/__snapshots__/wasm.test.ts.snap

@@ -503,6 +503,20 @@ const Div = styled.div.withConfig({
 "
 `;
 
+exports[`Should load styled-components wasm plugin correctly > Should transform issue-615 correctly 1`] = `
+"import styled from "styled-components";
+const someVariable1 = "10px";
+const someVariable2 = "20px";
+const someVariable3 = "30px";
+const MyStyledComponent = styled.div([
+    \`max-height:calc( \`,
+    \` + \`,
+    \` + \`,
+    \` );\`
+], someVariable1, someVariable2, someVariable3);
+"
+`;
+
 exports[`Should load styled-components wasm plugin correctly > Should transform minify-css-in-helpers correctly 1`] = `
 "import { createGlobalStyle, css, keyframes } from "styled-components";
 const key = keyframes\`to{transform:rotate(360deg);}\`;

packages/styled-components/transform/src/visitors/minify/css.rs

@@ -65,7 +65,7 @@ fn strip_line_comment(line: impl AsRef<str>) -> String {
         !s.ends_with(':') // NOTE: This is another guard against urls, if they're not inside strings or parantheses.
             && count_occurrences(s, '\'') % 2 == 0
             && count_occurrences(s, '"') % 2 == 0
-            && count_occurrences(s, '(') == count_occurrences(s, ')')
+            && count_occurrences(s, '(') <= count_occurrences(s, ')')
     })
 }
 
@@ -192,6 +192,13 @@ mod tests {
             strip_line_comment(r#"https://test.com// comment//"#),
             r#"https://test.com"#
         );
+
+        // strips comments after multiline declarations compacted onto a closing
+        // paren line
+        assert_eq!(
+            strip_line_comment(r#"      ); // this is axaBlue with a 5% white mix"#),
+            r#"      ); "#
+        );
     }
 
     #[test]

packages/styled-components/transform/tests/fixtures/issue-615/code.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+const someVariable1 = "10px";
+const someVariable2 = "20px";
+const someVariable3 = "30px";
+
+const MyStyledComponent = styled.div`
+  max-height: calc(
+    ${someVariable1} + ${someVariable2} + ${someVariable3}
+  ); // This comment causes a parsing error
+`;

packages/styled-components/transform/tests/fixtures/issue-615/config.json

@@ -0,0 +1,4 @@
+{
+  "ssr": false,
+  "displayName": false
+}

packages/styled-components/transform/tests/fixtures/issue-615/output.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+const someVariable1 = "10px";
+const someVariable2 = "20px";
+const someVariable3 = "30px";
+const MyStyledComponent = styled.div([
+    `max-height:calc( `,
+    ` + `,
+    ` + `,
+    ` );`
+], someVariable1, someVariable2, someVariable3);