Fix isValidInContext to allow a declaration with a standalone {}-block

- ref: https://drafts.csswg.org/css-syntax/#consume-declaration
tabatkins · Apr 7, 2024 · 4ebbcc5 · 4ebbcc5
1 parent 454675a
commit 4ebbcc5
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 4 deletions.
diff --git a/parse-css.js b/parse-css.js
@@ -1135,13 +1135,16 @@ function isValidInContext(construct, context) {
     return true;
   }
 
-  // Exclude properties that ended up with a {}-block
-  // in their value, unless they're custom.
+  // Exclude properties that ended up with a {}-block plus 
+  // a non-whitespace component in their value, unless they're custom.
   if(construct.type == "DECLARATION") {
     if(construct.name.slice(0, 2) == "--") return true;
-    for(const val of construct.value) {
-      if(val.type == "BLOCK" && val.name == "{") return false;
+
+    const block = construct.value.find(t => t.type === "BLOCK" && t.name === "{");
+    if (block && construct.value.some(t => t.type !== "WHITESPACE" && t !== block)) {
+      return false;
     }
+
     return true;
   }
 }

diff --git a/tests.js b/tests.js
@@ -3600,6 +3600,102 @@ return [
       "important": false
     }
   },
+  {
+    "parser": "parseADeclaration",
+    "css": "foo:{}",
+    "expected": {
+      "type": "DECLARATION",
+      "name": "foo",
+      "value": [
+        {
+          "type": "BLOCK",
+          "name": "{",
+          "value": []
+        }
+      ],
+      "important": false
+    }
+  },
+  {
+    "parser": "parseADeclaration",
+    "css": "foo: {}",
+    "expected": {
+      "type": "DECLARATION",
+      "name": "foo",
+      "value": [
+        {
+          "type": "BLOCK",
+          "name": "{",
+          "value": []
+        }
+      ],
+      "important": false
+    }
+  },
+  {
+    "parser": "parseADeclaration",
+    "css": "foo:{} ",
+    "expected": {
+      "type": "DECLARATION",
+      "name": "foo",
+      "value": [
+        {
+          "type": "BLOCK",
+          "name": "{",
+          "value": []
+        }
+      ],
+      "important": false
+    }
+  },
+  {
+    "parser": "parseADeclaration",
+    "css": "foo:bar{}",
+    "expectedThrow": {
+      "name": "SyntaxError"
+    }
+  },
+  {
+    "parser": "parseADeclaration",
+    "css": "foo:{}bar",
+    "expectedThrow": {
+      "name": "SyntaxError"
+    }
+  },
+  {
+    "parser": "parseADeclaration",
+    "css": "foo:{}{}",
+    "expectedThrow": {
+      "name": "SyntaxError"
+    }
+  },
+  {
+    "parser": "parseADeclaration",
+    "css": "-foo:bar{}",
+    "expectedThrow": {
+      "name": "SyntaxError"
+    }
+  },
+  {
+    "parser": "parseADeclaration",
+    "css": "--foo:bar{}",
+    "expected": {
+      "type": "DECLARATION",
+      "name": "--foo",
+      "value": [
+        {
+          "type": "IDENT",
+          "value": "bar"
+        },
+        {
+          "type": "BLOCK",
+          "name": "{",
+          "value":  []
+        }
+      ],
+      "important": false
+    }
+  },
 
   // parseAComponentValue()
   {