Skip to content

Commit df38b2c

Browse files
committed
fix(transformer/styled-components): remove space before line comment in CSS minification (#13371)
Previously we'd include an unnecessary space when removing a line comment in cases like: Input: ```js styled.div` .a // comment { color: red; } ` ``` Previous output post-minification: ```js styled.div`.a {color:red;}` ``` After this PR: ```js styled.div`.a{color:red;}` ``` We still include excess spaces when removing block comments (e.g. ``styled.div`.a /* */ {}` `` -> ``styled.div`.a {}` ``), but that's more complicated to fix, so leaving it for now.
1 parent a7a06b7 commit df38b2c

File tree

3 files changed

+18
-0
lines changed

3 files changed

+18
-0
lines changed

crates/oxc_transformer/src/plugins/styled_components.rs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1045,6 +1045,12 @@ fn minify_template_literal<'a>(lit: &mut TemplateLiteral<'a>, ast: AstBuilder<'a
10451045
}
10461046
// Skip line comments, but be careful not to break URLs like `https://...`
10471047
b'/' if paren_depth == 0 && (i == 0 || bytes[i - 1] != b':') => {
1048+
// Remove trailing space before comment.
1049+
// Comment will end with a line break, so space will be added again if required.
1050+
if output.last().is_some_and(|&last| last == b' ') {
1051+
output.pop();
1052+
}
1053+
10481054
let end_index =
10491055
bytes[i + 2..].iter().position(|&b| matches!(b, b'\n' | b'\r'));
10501056
if let Some(end_index) = end_index {
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
11
import styled from 'styled-components';
22

33
const Button = styled.div`${x}/* ${y} */${z}`;
4+
5+
const Foo = styled.div`
6+
.a // comment
7+
{ color: red; }
8+
`;
9+
10+
const Bar = styled.div`
11+
.a // ${123}
12+
{ color: red; }
13+
`;
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
import styled from 'styled-components';
22
const Button = styled.div`${x}${z}`;
3+
const Foo = styled.div`.a{color:red;}`;
4+
const Bar = styled.div`.a{color:red;}`;

0 commit comments

Comments
 (0)