fix(parser): don't drop @container/@layer at-rules on CSS parse (#5969)#6788
Open
TowyTowy wants to merge 1 commit into
Open
fix(parser): don't drop @container/@layer at-rules on CSS parse (#5969)#6788TowyTowy wants to merge 1 commit into
TowyTowy wants to merge 1 commit into
Conversation
The browser CSS parser only recognised nestable at-rules (@container, @layer, ...) when the CSSOM reported a falsy rule `type`. That happened to work in Chrome, where the legacy `CSSRule.type` is `0` for newer at-rules, but engines that expose a real numeric type (jsdom reports `17` for `CSSContainerRule`) fell through every branch and the whole rule — selectors, styles and condition — was silently discarded. Detect nestable at-rules via `getNestableAtRule` regardless of the numeric `type`. `getNestableAtRule` already matches only when the rule's `cssText` starts with the exact `@<name>`, so normal style/keyframe rules are unaffected. The parsed condition keeps the container name and its query separated by a space, so the exported CSS is valid again (e.g. `@container somename (min-width: 300px){...}`). Fixes GrapesJS#5969 Co-Authored-By: Claude Fable 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
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.
Problem
Closes #5969.
@container(and other nestable at-rules like@layer) are silently dropped by the CSS parser on engines that expose a real numericCSSRule.type.parseNodeinBrowserParserCssonly entered the nestable-at-rule branch when the legacytypewas falsy:(!type && getNestableAtRule(node)). Chrome reportstype === 0for these newer rules so it happened to work there, but any engine that returns a numeric type (jsdom returns17forCSSContainerRule) fell through every branch and the entire rule — selectors, styles and condition — was discarded. When the rule survived at all, this is what produced the reported invalid export@container portable(max-width: 639px)with the missing space.Solution
Detect nestable at-rules with
getNestableAtRule(node)regardless of the numerictype.getNestableAtRuleonly matches when the rule'scssTextstarts with the exact@<name>, so normal style/keyframe rules are untouched. The parsed condition keeps the container name and query separated by a space, so the exported CSS is valid again:@container somename (min-width: 300px){...}.Tests
Parse rule with @container at-rulespec (its output no longer includesselectorsAdd: '', matching the@mediaspecs). It fails before this change (the rule is dropped) and passes after.@containerparse spec and atoCSSspec asserting the space is preserved on export.Disclosure
Prepared with assistance from Claude (AI); the change and tests were reviewed and verified locally by the author (
pnpm test,eslint,prettier --checkall clean).