Fix whitespace handling for media query keywords in @media rules#208
Merged
Conversation
CSS media query keywords (and, or, not, only) must be separated from
adjacent parentheses by whitespace. Without a space, `and(condition)` is
parsed as a function call rather than the keyword followed by a
media condition, making the at-rule invalid.
Add a replaceAll pass to insert the required space whenever one of
these keywords is directly followed by `(`, and expand test coverage
to include `@media all and screen {}` and related keyword combinator
patterns.
https://claude.ai/code/session_01FnNEbE8DRPAFamgWRW4B7L
Bundle ReportChanges will increase total bundle size by 46 bytes (0.27%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: formatCss-esmAssets Changed:
Files in
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #208 +/- ##
=======================================
Coverage 96.80% 96.80%
=======================================
Files 2 2
Lines 344 344
Branches 124 124
=======================================
Hits 333 333
Misses 10 10
Partials 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
This PR fixes whitespace handling in
@mediarule prelude formatting to ensure necessary spaces are preserved between media query keywords (and,or,not,only) and their following elements (parentheses or media types).Key Changes
src/lib/index.ts: Added a new regex replacement rule informat_atrule_prelude()that enforces whitespace between media/supports keywords and opening parentheses:\b(and|or|not|only)\(/gi→$1 (test/api.test.ts: Updated existing test expectation and added three new test cases to verify correct spacing forand,not, andorkeywords with parentheses, both in normal and minified modestest/atrules.test.ts: Added 8 new minification tests covering various media query scenarios:@media all and screen(keyword-to-keyword spacing)@media screen and (min-width: 100px)(keyword-to-feature spacing)@media (min-width: 100px) and (max-width: 200px)(feature-to-feature spacing)@media not (color)and@media not screen(not keyword spacing)@media only screen(only keyword spacing)@media (min-width: 100px) or (max-width: 200px)(or keyword spacing)Implementation Details
The fix uses a word boundary regex pattern (
\b) to specifically target media query keywords and ensures a space is inserted between the keyword and any following opening parenthesis. This prevents invalid CSS likeand(ornot(while maintaining proper minification by removing unnecessary spaces elsewhere in the prelude.https://claude.ai/code/session_01FnNEbE8DRPAFamgWRW4B7L