fix(transformer/styled-components): remove unnecessary whitespace around block comments in CSS minification #13379
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
A-transformer
Member
Author
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
CodSpeed Instrumentation Performance ReportMerging #13379 will improve performances by 3.36%Comparing Summary
Benchmarks breakdown
Footnotes |
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR fixes CSS minification in the styled-components transformer by improving whitespace handling around block comments. The change ensures unnecessary whitespace is properly removed when block comments appear before CSS delimiters like {, }, ,, and ;.
Key changes:
- Refactored whitespace insertion logic to be more predictable and comment-aware
- Simplified the decision-making process for when to insert/remove spaces
- Added comprehensive test cases covering various comment scenarios
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
crates/oxc_transformer/src/plugins/styled_components.rs |
Refactored CSS minification logic with new whitespace handling approach and helper function |
tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/input.js |
Added test cases with block comments in various CSS contexts |
tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/minify-comments/output.js |
Expected minified output showing proper whitespace removal around comments |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
overlookmotel
force-pushed
the
08-29-fix_transformer_styled-components_remove_unnecessary_whitespace_around_block_comments_in_css_minification
branch
from
fe2e345 to
dd95896
Compare
Contributor
Merge activity
|
graphite-app bot
pushed a commit
that referenced
this pull request
Aug 29, 2025
…und block comments in CSS minification (#13379) Previously we included whitespace around block comments when the following character means it could have been removed. e.g.: Input: ```js styled.div`.a /* blah */ { color: blue }` ``` Previous output post-minification: ```js styled.div`.a {color:blue}` ``` After this PR: ```js styled.div`.a{color:blue}` ``` This is achieved by a significant change to how spaces are inserted. Previous logic: When encountering whitespace, determine whether to print a space or not based on what came before it, and what's after it. Problem is that this doesn't work correctly when the whitespace is followed by a block comment, because next char is `/` (start of the comment) - whereas what you really want to know is what's *after* the comment. New logic: When encountering whitespace, print a space if the preceding character isn't `:`, `;`, etc. Don't take into account what the next char is. But later on when encounter e.g. `{`, check if previous character is a space, and if so, remove it. So in the case of `.a /* blah */ {}`, a space gets printed after `.a`, but then it gets deleted again when `{` is found after the comment. This also has the benefit of making the code simpler.
graphite-app
bot
force-pushed
the
08-29-fix_transformer_styled-components_remove_unnecessary_whitespace_around_block_comments_in_css_minification
branch
from
dd95896 to
1cf9b20
Compare
graphite-app bot
pushed a commit
that referenced
this pull request
Aug 29, 2025
…n CSS minification (#13380) The change in approach to whitespace in #13379 means we can remove more escaped line breaks (`\r` and `\n`). Previously when processing `\r\n`, the next character after `\r` was seen as `\`, and therefore a space was unnecessarily inserted. Now we only look backwards, not forwards, so this problem goes away. We just treat `\r` and `\n` like any other whitespace.
…und block comments in CSS minification (#13379) Previously we included whitespace around block comments when the following character means it could have been removed. e.g.: Input: ```js styled.div`.a /* blah */ { color: blue }` ``` Previous output post-minification: ```js styled.div`.a {color:blue}` ``` After this PR: ```js styled.div`.a{color:blue}` ``` This is achieved by a significant change to how spaces are inserted. Previous logic: When encountering whitespace, determine whether to print a space or not based on what came before it, and what's after it. Problem is that this doesn't work correctly when the whitespace is followed by a block comment, because next char is `/` (start of the comment) - whereas what you really want to know is what's *after* the comment. New logic: When encountering whitespace, print a space if the preceding character isn't `:`, `;`, etc. Don't take into account what the next char is. But later on when encounter e.g. `{`, check if previous character is a space, and if so, remove it. So in the case of `.a /* blah */ {}`, a space gets printed after `.a`, but then it gets deleted again when `{` is found after the comment. This also has the benefit of making the code simpler.
graphite-app
bot
force-pushed
the
08-29-fix_transformer_styled-components_remove_unnecessary_whitespace_around_block_comments_in_css_minification
branch
from
1cf9b20 to
6dc5b70
Compare
graphite-app bot
pushed a commit
that referenced
this pull request
Aug 29, 2025
…n CSS minification (#13380) The change in approach to whitespace in #13379 means we can remove more escaped line breaks (`\r` and `\n`). Previously when processing `\r\n`, the next character after `\r` was seen as `\`, and therefore a space was unnecessarily inserted. Now we only look backwards, not forwards, so this problem goes away. We just treat `\r` and `\n` like any other whitespace.
graphite-app
bot
deleted the
08-29-fix_transformer_styled-components_remove_unnecessary_whitespace_around_block_comments_in_css_minification
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Previously we included whitespace around block comments when the following character means it could have been removed. e.g.:
Input:
Previous output post-minification:
After this PR:
This is achieved by a significant change to how spaces are inserted.
Previous logic: When encountering whitespace, determine whether to print a space or not based on what came before it, and what's after it. Problem is that this doesn't work correctly when the whitespace is followed by a block comment, because next char is
/(start of the comment) - whereas what you really want to know is what's after the comment.New logic: When encountering whitespace, print a space if the preceding character isn't
:,;, etc. Don't take into account what the next char is. But later on when encounter e.g.{, check if previous character is a space, and if so, remove it. So in the case of.a /* blah */ {}, a space gets printed after.a, but then it gets deleted again when{is found after the comment.This also has the benefit of making the code simpler.