[css] Move CSS property value parsing to CSSProperty

This allows us to access the information the parsing information
across the codebase. That significantly simplifies reasoning about
value (computations) for CSS debugging tools to be added.

Bug: 373554278
Change-Id: I351b3c42b74c35c089e40a00d8e6096bfad9cf7e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6219313
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>

Author: pfaffe

front_end/core/sdk/CSSMatchedStyles.ts

@@ -9,6 +9,7 @@ import {CSSMetadata, cssMetadata, CSSWideKeyword} from './CSSMetadata.js';
 import type {CSSModel} from './CSSModel.js';
 import {CSSProperty} from './CSSProperty.js';
 import * as PropertyParser from './CSSPropertyParser.js';
+import {BaseVariableMatcher} from './CSSPropertyParserMatchers.js';
 import {
   CSSFontPaletteValuesRule,
   CSSKeyframesRule,
@@ -1166,7 +1167,7 @@ class DOMInheritanceCascade {
     const record = sccRecord.add(nodeCascade, variableName);
 
     const matching = PropertyParser.BottomUpTreeMatching.walk(
-        ast, [new PropertyParser.VariableMatcher((match: PropertyParser.VariableMatch) => {
+        ast, [new BaseVariableMatcher(match => {
           const parentStyle = definedValue.declaration.style;
           const nodeCascade = this.#styleToNodeCascade.get(parentStyle);
           if (!nodeCascade) {

front_end/core/sdk/CSSProperty.ts

@@ -7,10 +7,35 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Common from '../common/common.js';
 import * as HostModule from '../host/host.js';
 import * as Platform from '../platform/platform.js';
+import * as Root from '../root/root.js';
 
+import type {CSSMatchedStyles} from './CSSMatchedStyles.js';
 import {cssMetadata, GridAreaRowRegex} from './CSSMetadata.js';
 import type {Edit} from './CSSModel.js';
-import {stripComments} from './CSSPropertyParser.js';
+import {type BottomUpTreeMatching, matchDeclaration, stripComments} from './CSSPropertyParser.js';
+import {
+  AnchorFunctionMatcher,
+  AngleMatcher,
+  AutoBaseMatcher,
+  BezierMatcher,
+  ColorMatcher,
+  ColorMixMatcher,
+  CSSWideKeywordMatcher,
+  FlexGridMatcher,
+  FontMatcher,
+  GridTemplateMatcher,
+  LengthMatcher,
+  LightDarkColorMatcher,
+  LinearGradientMatcher,
+  LinkableNameMatcher,
+  PositionAnchorMatcher,
+  PositionTryMatcher,
+  SelectFunctionMatcher,
+  ShadowMatcher,
+  StringMatcher,
+  URLMatcher,
+  VariableMatcher
+} from './CSSPropertyParserMatchers.js';
 import type {CSSStyleDeclaration} from './CSSStyleDeclaration.js';
 
 export const enum Events {
@@ -88,6 +113,39 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return result;
   }
 
+  parseValue(matchedStyles: CSSMatchedStyles, computedStyles: Map<string, string>|null): BottomUpTreeMatching|null {
+    if (!this.parsedOk) {
+      return null;
+    }
+    const matchers = [
+      new VariableMatcher(matchedStyles, this.ownerStyle),
+      new ColorMatcher(() => computedStyles?.get('color') ?? null),
+      new ColorMixMatcher(),
+      new URLMatcher(),
+      new AngleMatcher(),
+      new LinkableNameMatcher(),
+      new BezierMatcher(),
+      new StringMatcher(),
+      new ShadowMatcher(),
+      new CSSWideKeywordMatcher(this, matchedStyles),
+      new LightDarkColorMatcher(),
+      new GridTemplateMatcher(),
+      new LinearGradientMatcher(),
+      new AnchorFunctionMatcher(),
+      new PositionAnchorMatcher(),
+      new FlexGridMatcher(),
+      new PositionTryMatcher(),
+      new LengthMatcher(),
+      new SelectFunctionMatcher(),
+      new AutoBaseMatcher(),
+    ];
+
+    if (Root.Runtime.experiments.isEnabled('font-editor')) {
+      matchers.push(new FontMatcher());
+    }
+    return matchDeclaration(this.name, this.value, matchers);
+  }
+
   private ensureRanges(): void {
     if (this.#nameRangeInternal && this.#valueRangeInternal) {
       return;

front_end/core/sdk/CSSPropertyParser.test.ts

@@ -117,11 +117,11 @@ describe('CSSPropertyParser', () => {
 
     const matchedResult = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [matcher]);
     const matchedNode = TreeSearch.find(ast, n => matchedResult.getMatch(n) instanceof matcher.matchType);
-    const match = matchedNode && matchedResult.getMatch(matchedNode);
+    const match = (matchedNode && matchedResult.getMatch(matchedNode) as T | undefined) ?? null;
 
     return {
       ast,
-      match: match instanceof matcher.matchType ? match : null,
+      match,
       text: Printer.walk(ast).get(),
     };
   }
@@ -491,7 +491,7 @@ describe('CSSPropertyParser', () => {
                of ['var(--a)', 'var(--a, 123)', 'var(--a, calc(1+1))', 'var(--a, var(--b))', 'var(--a, var(--b, 123))',
                    'var(--a, a b c)']) {
         const {ast, match, text} =
-            matchSingleValue('width', succeed, new SDK.CSSPropertyParser.VariableMatcher(() => ''));
+            matchSingleValue('width', succeed, new SDK.CSSPropertyParserMatchers.BaseVariableMatcher(() => ''));
 
         assert.exists(ast, succeed);
         assert.exists(match, text);
@@ -502,7 +502,8 @@ describe('CSSPropertyParser', () => {
         assert.strictEqual(match.fallback.map(n => ast.text(n)).join(' '), fallback.join(', '));
       }
       for (const fail of ['var', 'var(--a, 123, 123)', 'var(a)', 'var(--a']) {
-        const {match, text} = matchSingleValue('width', fail, new SDK.CSSPropertyParser.VariableMatcher(() => ''));
+        const {match, text} =
+            matchSingleValue('width', fail, new SDK.CSSPropertyParserMatchers.BaseVariableMatcher(() => ''));
 
         assert.isNull(match, text);
       }

front_end/core/sdk/CSSPropertyParser.ts

@@ -5,6 +5,8 @@
 import type * as Platform from '../../core/platform/platform.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 
+import {TextMatcher} from './CSSPropertyParserMatchers.js';
+
 const globalValues = new Set<string>(['inherit', 'initial', 'unset']);
 
 const tagRegexp = /[\x20-\x7E]{4}/;
@@ -495,104 +497,6 @@ export namespace ASTUtils {
   }
 }
 
-export class VariableMatch implements Match {
-  constructor(
-      readonly text: string,
-      readonly node: CodeMirror.SyntaxNode,
-      readonly name: string,
-      readonly fallback: CodeMirror.SyntaxNode[],
-      readonly matching: BottomUpTreeMatching,
-      readonly computedTextCallback: (match: VariableMatch, matching: BottomUpTreeMatching) => string | null,
-  ) {
-  }
-
-  computedText(): string|null {
-    return this.computedTextCallback(this, this.matching);
-  }
-}
-
-// clang-format off
-export class VariableMatcher extends matcherBase(VariableMatch) {
-  // clang-format on
-  readonly #computedTextCallback: (match: VariableMatch, matching: BottomUpTreeMatching) => string | null;
-  constructor(computedTextCallback: (match: VariableMatch, matching: BottomUpTreeMatching) => string | null) {
-    super();
-    this.#computedTextCallback = computedTextCallback;
-  }
-
-  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): VariableMatch|null {
-    const callee = node.getChild('Callee');
-    const args = node.getChild('ArgList');
-    if (node.name !== 'CallExpression' || !callee || (matching.ast.text(callee) !== 'var') || !args) {
-      return null;
-    }
-
-    const [lparenNode, nameNode, ...fallbackOrRParenNodes] = ASTUtils.children(args);
-
-    if (lparenNode?.name !== '(' || nameNode?.name !== 'VariableName') {
-      return null;
-    }
-
-    if (fallbackOrRParenNodes.length <= 1 && fallbackOrRParenNodes[0]?.name !== ')') {
-      return null;
-    }
-
-    let fallback: CodeMirror.SyntaxNode[] = [];
-    if (fallbackOrRParenNodes.length > 1) {
-      if (fallbackOrRParenNodes.shift()?.name !== ',') {
-        return null;
-      }
-      if (fallbackOrRParenNodes.pop()?.name !== ')') {
-        return null;
-      }
-      fallback = fallbackOrRParenNodes;
-      if (fallback.length === 0) {
-        return null;
-      }
-      if (fallback.some(n => n.name === ',')) {
-        return null;
-      }
-    }
-
-    const varName = matching.ast.text(nameNode);
-    if (!varName.startsWith('--')) {
-      return null;
-    }
-
-    return new VariableMatch(matching.ast.text(node), node, varName, fallback, matching, this.#computedTextCallback);
-  }
-}
-
-export class TextMatch implements Match {
-  computedText?: () => string;
-  constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode) {
-    if (node.name === 'Comment') {
-      this.computedText = () => '';
-    }
-  }
-  render(): Node[] {
-    return [document.createTextNode(this.text)];
-  }
-}
-
-// clang-format off
-class TextMatcher extends matcherBase(TextMatch) {
-  // clang-format on
-  override accepts(): boolean {
-    return true;
-  }
-  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): TextMatch|null {
-    if (!node.firstChild || node.name === 'NumberLiteral' /* may have a Unit child */) {
-      // Leaf node, just emit text
-      const text = matching.ast.text(node);
-      if (text.length) {
-        return new TextMatch(text, node);
-      }
-    }
-    return null;
-  }
-}
-
 function declaration(rule: string): CodeMirror.SyntaxNode|null {
   return cssParser.parse(rule).topNode.getChild('RuleSet')?.getChild('Block')?.getChild('Declaration') ?? null;
 }
@@ -648,6 +552,13 @@ export function tokenizePropertyName(name: string): string|null {
   return nodeText(propertyName, rule);
 }
 
+export function matchDeclaration(name: string, value: string, matchers: Matcher<Match>[]): BottomUpTreeMatching|null {
+  const ast = tokenizeDeclaration(name, value);
+  const matchedResult = ast && BottomUpTreeMatching.walk(ast, matchers);
+  ast?.trailingNodes.forEach(n => matchedResult?.matchText(n));
+  return matchedResult;
+}
+
 export class TreeSearch extends TreeWalker {
   #found: CodeMirror.SyntaxNode|null = null;
   #predicate: (node: CodeMirror.SyntaxNode) => boolean;

front_end/core/sdk/CSSPropertyParserMatchers.test.ts

@@ -65,7 +65,7 @@ function injectVariableSubstitutions(variables: Record<string, string>) {
                        if (!resolvedValue) {
                          return getMatch.call(this, node);
                        }
-                       return new SDK.CSSPropertyParser.VariableMatch(
+                       return new SDK.CSSPropertyParserMatchers.BaseVariableMatch(
                            this.ast.text(node), node, resolvedValue.varName, [], this, () => resolvedValue.value);
                      });
 }