/plans: the limit bars grow in view, as they were meant to - #227
Merged
Merged
Conversation
The rule that holds the bars at zero width until the rows are seen was written `.limits:not(:global(.is-in)) .bar`. Svelte 4 cannot scope a class inside :not(), and it copied `:not(:global(.is-in))` into the stylesheet as it was; no browser parses that, so the whole rule was dropped and the bars simply sat at full width from the start. The section's state is now matched globally, `:global(html:not(.no-js) .limits:not(.is-in)) .bar`, and only the bar keeps its scoped class; the reduced-motion override gets the same selector. Checked in the compiled CSS and in the browser: before the rows are seen the bars are scaleX(0), with `is-in` they are full width, and a visitor without JavaScript sees them full width. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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
1 participant
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.
Found while checking the SvelteKit 2 upgrade (#224); present before it too.
The rule that keeps the limit bars on /plans at zero width until they scroll into view was written
.limits:not(:global(.is-in)) .bar. Svelte 4 cannot scope a class inside:not()and copied:not(:global(.is-in))into the stylesheet verbatim, so browsers dropped the rule and the bars never animated; they just sat at full width. The section's state is now matched globally (:global(html:not(.no-js) .limits:not(.is-in)) .bar) and only the bar stays scoped. The reduced-motion override uses the same selector.Checked: the compiled CSS now holds
html:not(.no-js) .limits:not(.is-in) .bar.svelte-…{transform:scaleX(0)}. In the browser the bars arescaleX(0)before the rows are seen, full width once the section getsis-in, and full width for a visitor without JavaScript.svelte-check: 0 errors.🤖 Generated with Claude Code