Patch content property definition to allow attr() (fixes #201)

CHANGELOG.md

@@ -3,7 +3,8 @@
 - Bumped `mdn-data` to `2.0.28`
 - Added support for CSS wide keywords `revert` and `revert-layer`
 - Dropped support for `expression()` the same way as CSS wide keywords
-- Patched `background-clip` definition to match [Backgrounds and Borders 4](https://drafts.csswg.org/css-backgrounds-4/#background-clip) (#190)
+- Patched `background-clip` property definition to match [Backgrounds and Borders 4](https://drafts.csswg.org/css-backgrounds-4/#background-clip) (#190)
+- Patched `content` property definition to allow `attr()` (#201)
 - Fixed definition syntax matching when a comma is expected before a `<delim-token>`
 - Added new units according to current state of [CSS Values and Units 4](https://drafts.csswg.org/css-values-4/): `rex`, `cap`, `rcap`, `rch`, `ic`, `ric`, `lh`, `rlh`, `vi`, `vb`, `sv*`, `lv*`, `dv*`
 - Added container relative length units from [CSS Containment 3](https://drafts.csswg.org/css-contain-3/#container-lengths): `cqw`, `cqh`, `cqi`, `cqb`, `cqmin`, `cqmax`

data/patch.json

@@ -601,6 +601,10 @@
             "comment": "missed; not sure we should add it, but no others except `shape` is using it so it's ok for now; https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect",
             "syntax": "<length> | auto"
         },
+        "content-list": {
+            "comment": "added attr(), see https://github.com/csstree/csstree/issues/201",
+            "syntax": "[ <string> | contents | <image> | <counter> | <quote> | <target> | <leader()> | <attr()> ]+"
+        },
         "element()": {
             "comment": "https://drafts.csswg.org/css-gcpm/#element-syntax & https://drafts.csswg.org/css-images-4/#element-notation",
             "syntax": "element( <custom-ident> , [ first | start | last | first-except ]? ) | element( <id-selector> )"

fixtures/definition-syntax-match/default-properties.json

@@ -0,0 +1,11 @@
+{
+    "<'content'>": {
+        "defaultSyntaxes": true,
+        "valid": [
+            "'test'",
+            "url(test)",
+            "attr(foo)",
+            "'(' attr(foo) ')'"
+        ]
+    }
+}

lib/__tests/definition-syntax-match.js

@@ -1,10 +1,22 @@
 import assert from 'assert';
+import { lexer } from 'css-tree';
 import prepareTokens from '../lexer/prepare-tokens.js';
 import genericSyntaxes from '../lexer/generic.js';
 import { buildMatchGraph } from '../lexer/match-graph.js';
 import { matchAsList, matchAsTree } from '../lexer/match.js';
 import * as fixture from './fixture/definition-syntax-match.js';
 
+const defaultTypes = Object.create(null);
+const defaultProperties = Object.create(null);
+
+for (const [name, def] of Object.entries(lexer.types)) {
+    defaultTypes[name] = def.match;
+}
+
+for (const [name, def] of Object.entries(lexer.properties)) {
+    defaultProperties[name] = def.match;
+}
+
 function processMatchResult(mr) {
     if (Array.isArray(mr)) {
         const array = mr.map(processMatchResult);
@@ -30,7 +42,9 @@ function processMatchResult(mr) {
 function createSyntaxTest(testName, test) {
     const syntax = test.syntax || testName;
     const matchTree = buildMatchGraph(syntax);
-    const syntaxes = { types: {}, properties: {} };
+    const syntaxes = test.defaultSyntaxes
+        ? { types: { ...defaultTypes }, properties: { ...defaultProperties} }
+        : { types: {}, properties: {} };
 
     for (const name in genericSyntaxes) {
         syntaxes.types[name] = {
@@ -56,9 +70,8 @@ function createSyntaxTest(testName, test) {
                 it(`should MATCH to "${input}"`, () => {
                     const m = matchAsList(prepareTokens(input), matchTree, syntaxes);
 
-                    assert.notStrictEqual(m.match, null);
                     assert.deepStrictEqual(
-                        m.match
+                        m.match && m.match
                             .map(x => x.token)
                             .filter(x => x !== undefined),
                         m.tokens