diff --git a/crates/oxc_transformer/src/plugins/styled_components.rs b/crates/oxc_transformer/src/plugins/styled_components.rs index fbc6808a220d1..1fdb6dbb0033b 100644 --- a/crates/oxc_transformer/src/plugins/styled_components.rs +++ b/crates/oxc_transformer/src/plugins/styled_components.rs @@ -1045,6 +1045,12 @@ fn minify_template_literal<'a>(lit: &mut TemplateLiteral<'a>, ast: AstBuilder<'a } // Skip line comments, but be careful not to break URLs like `https://...` b'/' if paren_depth == 0 && (i == 0 || bytes[i - 1] != b':') => { + // Remove trailing space before comment. + // Comment will end with a line break, so space will be added again if required. + if output.last().is_some_and(|&last| last == b' ') { + output.pop(); + } + let end_index = bytes[i + 2..].iter().position(|&b| matches!(b, b'\n' | b'\r')); if let Some(end_index) = end_index { diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/input.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/input.js index 8a73f3048cba6..01adea1132422 100644 --- a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/input.js +++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/input.js @@ -1,3 +1,13 @@ import styled from 'styled-components'; const Button = styled.div`${x}/* ${y} */${z}`; + +const Foo = styled.div` + .a // comment + { color: red; } +`; + +const Bar = styled.div` + .a // ${123} + { color: red; } +`; diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/output.js index 444c1452ea385..ad12f9b999e46 100644 --- a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/output.js +++ b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/output.js @@ -1,2 +1,4 @@ import styled from 'styled-components'; const Button = styled.div`${x}${z}`; +const Foo = styled.div`.a{color:red;}`; +const Bar = styled.div`.a{color:red;}`;