diff --git a/packages/styled-components/__tests__/__snapshots__/wasm.test.ts.snap b/packages/styled-components/__tests__/__snapshots__/wasm.test.ts.snap index 7acd1850e..108ca1ac6 100644 --- a/packages/styled-components/__tests__/__snapshots__/wasm.test.ts.snap +++ b/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);}\`; diff --git a/packages/styled-components/transform/src/visitors/minify/css.rs b/packages/styled-components/transform/src/visitors/minify/css.rs index 8fdc1d419..431a0d66c 100644 --- a/packages/styled-components/transform/src/visitors/minify/css.rs +++ b/packages/styled-components/transform/src/visitors/minify/css.rs @@ -65,7 +65,7 @@ fn strip_line_comment(line: impl AsRef) -> 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] diff --git a/packages/styled-components/transform/tests/fixtures/issue-615/code.js b/packages/styled-components/transform/tests/fixtures/issue-615/code.js new file mode 100644 index 000000000..29674e3e8 --- /dev/null +++ b/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 +`; diff --git a/packages/styled-components/transform/tests/fixtures/issue-615/config.json b/packages/styled-components/transform/tests/fixtures/issue-615/config.json new file mode 100644 index 000000000..5cc132f1e --- /dev/null +++ b/packages/styled-components/transform/tests/fixtures/issue-615/config.json @@ -0,0 +1,4 @@ +{ + "ssr": false, + "displayName": false +} diff --git a/packages/styled-components/transform/tests/fixtures/issue-615/output.js b/packages/styled-components/transform/tests/fixtures/issue-615/output.js new file mode 100644 index 000000000..f66ddeb51 --- /dev/null +++ b/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);