Add support for @scope

csstree · Sep 27, 2023 · f85be53 · f85be53
1 parent 06a2089
commit f85be53
Show file tree

Hide file tree

Showing 12 changed files with 1,180 additions and 243 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added support for the [`@container`](https://drafts.csswg.org/css-contain-3/#container-rule) at-rule
 - Added support for the [`@starting-style`](https://drafts.csswg.org/css-transitions-2/#defining-before-change-style) at-rule
+- Added support for the [`@scope`](https://drafts.csswg.org/css-cascade-6/#scoped-styles) at-rule
 - Added support for the [`@layer`](https://drafts.csswg.org/css-cascade-5/#at-layer) at-rule
 - Added support for `layer`, `layer()` and `supports()` in the `@media` at-rule (according to [the @import rule](https://drafts.csswg.org/css-cascade-5/#at-import) in Cascading and Inheritance 5)
 - Added `Layer` and `LayerList` node types

diff --git a/data/patch.json b/data/patch.json
@@ -17,6 +17,9 @@
         "nest": {
             "prelude": "<complex-selector-list>"
         },
+        "scope": {
+            "prelude": "[ ( <scope-start> ) ]? [ to ( <scope-end> ) ]?"
+        },
         "scroll-timeline": null
     },
     "properties": {
@@ -643,6 +646,10 @@
             "comment": "https://www.w3.org/TR/css3-speech/#voice-family",
             "syntax": "male | female | neutral"
         },
+        "general-enclosed": {
+            "comment": "remove ident-token, optional any-value, brackets (see https://drafts.csswg.org/mediaqueries-5/#typedef-general-enclosed)",
+            "syntax": "[ <function-token> <any-value>? ) ] | [ ( <any-value>? ) ]"
+        },
         "generic-family": {
             "comment": "added -apple-system",
             "references": [
@@ -693,6 +700,63 @@
             ],
             "syntax": "none | <custom-ident>"
         },
+        "scope-start": {
+            "syntax": "<forgiving-selector-list>"
+        },
+        "scope-end": {
+            "syntax": "<forgiving-selector-list>"
+        },
+        "forgiving-selector-list": {
+            "syntax": "<complex-real-selector-list>"
+        },
+        "forgiving-relative-selector-list": {
+            "syntax": "<relative-real-selector-list>"
+        },
+        "selector-list": {
+            "syntax": "<complex-selector-list>"
+        },
+        "complex-real-selector-list": {
+            "syntax": "<complex-real-selector>#"
+        },
+        "simple-selector-list": {
+            "syntax": "<simple-selector>#"
+        },
+        "relative-real-selector-list": {
+            "syntax": "<relative-real-selector>#"
+        },
+        "complex-selector": {
+            "syntax": "<complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*"
+        },
+        "complex-selector-unit": {
+            "syntax": "[ <compound-selector>? <pseudo-compound-selector>* ]!"
+        },
+        "complex-real-selector": {
+            "syntax": "<compound-selector> [ <combinator>? <compound-selector> ]*"
+        },
+        "relative-real-selector": {
+            "syntax": "<combinator>? <complex-real-selector>"
+        },
+        "compound-selector": {
+            "syntax": "[ <type-selector>? <subclass-selector>* ]!"
+        },
+        "pseudo-compound-selector": {
+            "syntax": " <pseudo-element-selector> <pseudo-class-selector>*"
+        },
+        "simple-selector": {
+            "syntax": "<type-selector> | <subclass-selector>"
+        },
+        "combinator": {
+            "syntax": "'>' | '+' | '~' | [ '|' '|' ]"
+        },
+        "id-selector": {
+            "syntax": "<hash-token>"
+        },
+        "pseudo-element-selector": {
+            "syntax": "':' <pseudo-class-selector> | <legacy-pseudo-element-selector>"
+        },
+        "legacy-pseudo-element-selector": {
+            "syntax": " ':' [before | after | first-line | first-letter]"
+        },
         "single-animation-composition": {
             "comment": "missed definition",
             "references": [

diff --git a/fixtures/ast/atrule/atrule/scope.json b/fixtures/ast/atrule/atrule/scope.json
@@ -0,0 +1,168 @@
+{
+    "base syntax": {
+        "source": "@scope (a) to (b) { c {} }",
+        "generate": "@scope (a) to (b){c{}}",
+        "ast": {
+            "type": "Atrule",
+            "name": "scope",
+            "prelude": {
+                "type": "AtrulePrelude",
+                "children": [
+                    {
+                        "type": "Scope",
+                        "root": {
+                            "type": "SelectorList",
+                            "children": [
+                                {
+                                    "type": "Selector",
+                                    "children": [
+                                        {
+                                            "type": "TypeSelector",
+                                            "name": "a"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        "limit": {
+                            "type": "SelectorList",
+                            "children": [
+                                {
+                                    "type": "Selector",
+                                    "children": [
+                                        {
+                                            "type": "TypeSelector",
+                                            "name": "b"
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    }
+                ]
+            },
+            "block": {
+                "type": "Block",
+                "children": [
+                    {
+                        "type": "Rule",
+                        "prelude": {
+                            "type": "SelectorList",
+                            "children": [
+                                {
+                                    "type": "Selector",
+                                    "children": [
+                                        {
+                                            "type": "TypeSelector",
+                                            "name": "c"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        "block": {
+                            "type": "Block",
+                            "children": []
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    "only root": {
+        "source": "@scope (root){}",
+        "ast": {
+            "type": "Atrule",
+            "name": "scope",
+            "prelude": {
+                "type": "AtrulePrelude",
+                "children": [
+                    {
+                        "type": "Scope",
+                        "root": {
+                            "type": "SelectorList",
+                            "children": [
+                                {
+                                    "type": "Selector",
+                                    "children": [
+                                        {
+                                            "type": "TypeSelector",
+                                            "name": "root"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        "limit": null
+                    }
+                ]
+            },
+            "block": {
+                "type": "Block",
+                "children": []
+            }
+        }
+    },
+    "only limit": {
+        "source": "@scope to (limit){}",
+        "ast": {
+            "type": "Atrule",
+            "name": "scope",
+            "prelude": {
+                "type": "AtrulePrelude",
+                "children": [
+                    {
+                        "type": "Scope",
+                        "root": null,
+                        "limit": {
+                            "type": "SelectorList",
+                            "children": [
+                                {
+                                    "type": "Selector",
+                                    "children": [
+                                        {
+                                            "type": "TypeSelector",
+                                            "name": "limit"
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    }
+                ]
+            },
+            "block": {
+                "type": "Block",
+                "children": []
+            }
+        }
+    },
+    "bad selectors": {
+        "source": "@scope ( .a. ) to ( .b. ) {}",
+        "generate": "@scope (.a.) to (.b.){}",
+        "ast": {
+            "type": "Atrule",
+            "name": "scope",
+            "prelude": {
+                "type": "AtrulePrelude",
+                "children": [
+                    {
+                        "type": "Scope",
+                        "root": {
+                            "type": "Raw",
+                            "value": ".a."
+                        },
+                        "limit": {
+                            "type": "Raw",
+                            "value": ".b."
+                        }
+                    }
+                ]
+            },
+            "block": {
+                "type": "Block",
+                "children": []
+            }
+        }
+    }
+}