Support :host and :host-context pseudo class selectors

csstree · Dec 12, 2022 · 9438d8b · 9438d8b
1 parent debb7c5
commit 9438d8b
Show file tree

Hide file tree

Showing 3 changed files with 179 additions and 1 deletion.
diff --git a/fixtures/ast/selector/functional-pseudo/host-context.json b/fixtures/ast/selector/functional-pseudo/host-context.json
@@ -0,0 +1,88 @@
+{
+    "basic": {
+        "source": ":host-context(test)",
+        "ast": {
+            "type": "PseudoClassSelector",
+            "name": "host-context",
+            "children": [
+                {
+                    "type": "Selector",
+                    "children": [
+                        {
+                            "type": "TypeSelector",
+                            "name": "test"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    "spaces around selector": {
+        "source": ":host-context(  .a.b  )",
+        "generate": ":host-context(.a.b)",
+        "ast": {
+            "type": "PseudoClassSelector",
+            "name": "host-context",
+            "children": [
+                {
+                    "type": "Selector",
+                    "children": [
+                        {
+                            "type": "ClassSelector",
+                            "name": "a"
+                        },
+                        {
+                            "type": "ClassSelector",
+                            "name": "b"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    "should be case insensitive": {
+        "source": ":hOsT-cOntexT(.a)",
+        "ast": {
+            "type": "PseudoClassSelector",
+            "name": "hOsT-cOntexT",
+            "children": [
+                {
+                    "type": "Selector",
+                    "children": [
+                        {
+                            "type": "ClassSelector",
+                            "name": "a"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    "error": [
+        {
+            "source": ":host-context(.a{)",
+            "offset": "                ^",
+            "error": "\")\" is expected"
+        },
+        {
+            "source": ":host-context(,.b)",
+            "offset": "              ^",
+            "error": "Selector is expected"
+        },
+        {
+            "source": ":host-context(.a,)",
+            "offset": "                ^",
+            "error": "\")\" is expected"
+        },
+        {
+            "source": ":host-context(var(--test))",
+            "offset": "              ^",
+            "error": "Selector is expected"
+        },
+        {
+            "source": ":host-context(foo,bar)",
+            "offset": "                 ^",
+            "error": "\")\" is expected"
+        }
+    ]
+}
diff --git a/fixtures/ast/selector/functional-pseudo/host.json b/fixtures/ast/selector/functional-pseudo/host.json
@@ -0,0 +1,88 @@
+{
+    "basic": {
+        "source": ":host(test)",
+        "ast": {
+            "type": "PseudoClassSelector",
+            "name": "host",
+            "children": [
+                {
+                    "type": "Selector",
+                    "children": [
+                        {
+                            "type": "TypeSelector",
+                            "name": "test"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    "spaces around selector": {
+        "source": ":host(  .a.b  )",
+        "generate": ":host(.a.b)",
+        "ast": {
+            "type": "PseudoClassSelector",
+            "name": "host",
+            "children": [
+                {
+                    "type": "Selector",
+                    "children": [
+                        {
+                            "type": "ClassSelector",
+                            "name": "a"
+                        },
+                        {
+                            "type": "ClassSelector",
+                            "name": "b"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    "should be case insensitive": {
+        "source": ":hOsT(.a)",
+        "ast": {
+            "type": "PseudoClassSelector",
+            "name": "hOsT",
+            "children": [
+                {
+                    "type": "Selector",
+                    "children": [
+                        {
+                            "type": "ClassSelector",
+                            "name": "a"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    "error": [
+        {
+            "source": ":host(.a{)",
+            "offset": "        ^",
+            "error": "\")\" is expected"
+        },
+        {
+            "source": ":host(,.b)",
+            "offset": "      ^",
+            "error": "Selector is expected"
+        },
+        {
+            "source": ":host(.a,)",
+            "offset": "        ^",
+            "error": "\")\" is expected"
+        },
+        {
+            "source": ":host(var(--test))",
+            "offset": "      ^",
+            "error": "Selector is expected"
+        },
+        {
+            "source": ":host(foo,bar)",
+            "offset": "         ^",
+            "error": "\")\" is expected"
+        }
+    ]
+}
diff --git a/lib/syntax/pseudo/index.js b/lib/syntax/pseudo/index.js
@@ -44,5 +44,7 @@ export default {
     'nth-last-child': nth,
     'nth-last-of-type': nth,
     'nth-of-type': nth,
-    'slotted': selector
+    'slotted': selector,
+    'host': selector,
+    'host-context': selector
 };