Repository navigation
Conversation
CSS @layer allows explicit cascade layer ordering. This adds support for all three forms: - Block form: @layer utilities { .class { prop: val; } } - Declaration form: @layer utilities; or @layer a, b, c; - Anonymous block: @layer { .class { prop: val; } } The parser uses `many` instead of `many1` for the selector to support anonymous layers (empty selector). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Contributor
Author
|
some tests fails only because it fails to download the compilers. |
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.
Base: yesodweb/shakespeare
masterHead: jeongoon/shakespeare
support-at-layerSummary
CSS
@layerallows explicit cascade layer ordering for better CSS organization. This PR adds support for all three valid CSS forms:@layer utilities { .class { prop: val; } }@layer utilities;or@layer a, b, c;@layer { .class { prop: val; } }Additionally, this PR enables recursive nesting of at-rules inside each other. Previously, at-rule blocks (
@media,@supports, etc.) could only contain regular CSS blocks. Modern CSS commonly requires nesting at-rules, e.g.:Changes
layerparser toText/Internal/Lucius.hsTopAtBlockto hold[TopLevel a]instead of[Block a]inText/Internal/Css.hsparseBlocksto parse nested at-rules (media,supports,layer,topAtBlock) in addition to regular blockscompressTopLevel,cssUsedIdentifiers,renderCss,cssRuntime,topLevelsToCassius, andluciusRTInternalfor recursiveTopLevelhandlingrenderCssnow supports nested indentation viagoWith indentpatterntest/Text/CssSpec.hsImplementation notes
tryfor backtracking between block and declaration forms for@layermanyinstead ofmany1for the selector to support anonymous layers (empty selector)@mediaand@supportsparsersparseBlocks→ at-rule parser path recursivelyBackwards compatibility
TopAtBlockis exported fromText.Internal.Csswhich is marked "not stable API". Code that pattern-matches onTopAtBlockwill need to update the third field from[Block a]to[TopLevel a].Test plan
@layertests cover block, declaration, multiple declaration, and anonymous forms@mediainside@layer,@layerinside@media,@supportsinside@layer,@mediainside@mediaReferences