Repository navigation
rules: compare by meaning, not declaration order or media range notation - #157
Merged
Merged
Conversation
A stylelint pass reorders declarations and rewrites min-width as width >=, and each such rule showed as changed on both sides. ruleKey now sorts cssText's declarations and reads (min-width: x) as (width >= x), in @media only, since in @supports that is a property. cssText holds one value per longhand, so a shorthand and longhand that swap still differ, var() included. A logical property and its physical twin are two longhands whose order decides, so a rule with one keeps its order. The split skips strings and brackets: a data URI's `;` ends no declaration. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
-webkit-border-image and border-image set the same longhands with different defaults, so their swap changes the computed value yet sorted to one key, and corner-top-left-shape and corner-start-start-shape are another logical pair. A rule with either keeps its order, as logical properties do. splitTop takes the separator and replaces declarations. The gradient path now respects quotes, which only changes a bracket inside a quoted url, which it miscounted. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Open
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
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.
Refs #129
The
rules:block listed a rule as changed on both sides when a formatter only reordered its declarations or rewrote a breakpoint.ruleKeynow ignores both:cssText's declarations are sorted before comparing.(min-width: x)reads as(width >= x)and(max-width: x)as(width <= x), in@mediaonly. In@supportsthe same text is a property test.Three cases still count as changes:
var()included. Chrome'scssTextholds one value per longhand, so the two orders serialize differently.margin-leftandmargin-inline-start, or-webkit-border-imageandborder-image, set the same thing and the later wins, so sorting would hide a real change. A rule with a logical or-webkit-property keeps its order, which means reordering one still shows as a change even where it does nothing.;inside. The split skips strings and brackets, so a data URI's;ends no declaration.Not read as equal: the reversed
(60em <= width)and the two-sided(60em <= width <= 80em). They still show as changes, as they do today.Known gap, unchanged by this PR:
margin: var(--x); margin-top: 4pxandmargin: var(--y); margin-top: 4pxserialize identically in Chrome, so that change isn't seen.Testing
The
/rulesfixture proves this end to end through the CLI, intests/visual/guardrails.test.ts. A reorder, a data URI reorder and both range rewrites give no entry. A changed value and the swap,var()swap, logical swap and;-in-string rules all do. That test fails if the split is naive, if sorting ignores logical properties, or if either normalisation is removed.The fixture also gives
.toca breakpoint whose value really changes, so the "matched on some shots" output is still covered.🤖 Generated with Claude Code