Upgrade dependencies

Author: cdoublev

__tests__/value.js

@@ -4017,7 +4017,7 @@ describe('<style-feature>', () => {
         expect(parse('<style-feature>', 'color: green !important', false, containerRule)).toMatchObject({
             important: true,
             name: 'color',
-            types: ['<declaration>', '<style-feature>'],
+            types: ['<declaration>', '<style-feature-plain>', '<style-feature>'],
             value: keyword('green', ['<named-color>', '<color-base>', '<color>', 'color']),
         })
     })
@@ -4044,6 +4044,8 @@ describe('<style-feature>', () => {
             ['width: interpolate(0, 0: 1px)'],
             ['width: toggle(1px)'],
             ['width: calc-interpolate(0, 0: random(1px, 1px), 1: 1px * sibling-count())'],
+            // Arbitrary substitution of range values
+            ['var(--custom) < 1px'],
         ]
         valid.forEach(([input, expected = input]) =>
             expect(parse('<style-feature>', input, true, containerRule)).toBe(expected))

lib/parse/configure.js

@@ -1,4 +1,6 @@
 
+const { enter } = require('../utils/context.js')
+
 /**
  * @param {object} node
  * @returns {object}
@@ -17,6 +19,15 @@ function disableWhiteSpace({ context, ...props }) {
     return { ...props, context: { ...context, separator: '' } }
 }
 
+/**
+ * @param {object} node
+ * @returns {object}
+ */
+function enterStyleRule(node) {
+    const { context, ...props } = node
+    return { context: enter(node, '@style'), ...props }
+}
+
 /**
  * @param {object} node
  * @returns {object}
@@ -35,6 +46,7 @@ module.exports = {
     '<mf-comparison>': disableWhiteSpace,
     '<page-selector>': disableWhiteSpace,
     '<pt-name-and-class-selector>': disableWhiteSpace,
+    '<style-feature>': enterStyleRule,
     '<supports-feature>': setStrictParsing,
     '<syntax-component>': disableWhiteSpace,
     '<urange>': disableWhiteSpace,

lib/parse/parser.js

@@ -949,6 +949,9 @@ function parseStyleSheet(input, context, allowImport = false) {
  * @returns {SyntaxError|object|null}
  */
 function parseCSSArbitrarySubstitution(input, context) {
+    if (input.types[0] !== '<function>') {
+        return null
+    }
     const { definition: { cascading, elemental } } = getRule(context)
     for (const { cascade, element, name, type = `<${name}()>` } of substitutions.arbitrary) {
         if (!elemental && (element || (cascade && !cascading))) {
@@ -973,17 +976,15 @@ function parseCSSArbitrarySubstitutionContainingValue(input, context) {
     for (let value of input) {
         const { types: [type], value: nested } = value
         if (type === '<function>' || type === '<block>') {
-            if (type === '<function>') {
-                const match = parseCSSArbitrarySubstitution(value, context)
-                if (isError(match)) {
-                    return match
-                }
-                if (match) {
-                    value = match
-                    containsSubstitution = true
-                }
+            let match = parseCSSArbitrarySubstitution(value, context)
+            if (isError(match)) {
+                return match
+            }
+            if (match) {
+                value = match
+                containsSubstitution = true
             }
-            const match = parseCSSArbitrarySubstitutionContainingValue(new Stream(nested), context)
+            match = parseCSSArbitrarySubstitutionContainingValue(new Stream(nested), context)
             if (isError(match)) {
                 return match
             }
@@ -1182,6 +1183,7 @@ const parser = module.exports = {
     getDeclarationDefinition,
     insertCSSRule,
     parseBlockContents,
+    parseCSSArbitrarySubstitution,
     parseCSSDeclaration,
     parseCSSDeclarationValue,
     parseCSSGrammar,

lib/parse/postprocess.js

@@ -1,6 +1,6 @@
 
 const { angle, filter, keyword, list, map, number, omitted, string } = require('../values/value.js')
-const { findFunction, findSibling, getDeclaration, getDeclarationName, getFunctionName, getRuleName, isDeclaredBy, isProducedBy } = require('../utils/context.js')
+const { findFunction, findSibling, getDeclaration, getDeclarationName, getFunctionName, getRule, getRuleName, isDeclaredBy, isProducedBy } = require('../utils/context.js')
 const { addTypes, dimensionTypes, getCalculationType, matchNumericType } = require('./types.js')
 const { isCalculation, isColon, isFailure, isList, isOmitted, isWhitespace } = require('../utils/value.js')
 const { isHexadecimal, isIdentifierCharacter, isWhitespace: isWhitespaceCharacter } = require('./tokenize.js')
@@ -1527,25 +1527,29 @@ function postParseSteps(steps, node) {
 }
 
 /**
- * @param {object} feature
+ * @param {object} name
  * @param {object} node
  * @param {object} parser
  * @returns {SyntaxError|object}
- * @see {@link https://drafts.csswg.org/css-conditional-5/#typedef-style-feature}
+ * @see {@link https://drafts.csswg.org/css-conditional-5/#typedef-style-feature-name}
  *
- * It aborts parsing when the feature is an unknown property or a declaration
- * whose value is either `revert` or `revert-layer`.
+ * It aborts parsing when the name is not a valid style property.
  */
-function postParseStyleFeature(feature, node, { createContext, getDeclarationDefinition }) {
-    const { types, value } = feature
-    if (
-        types[0] === '<ident-token>'
-            ? getDeclarationDefinition(createContext('@style'), value)
-            : !value.value?.startsWith?.('revert')
-    ) {
-        return feature
-    }
-    return error(node)
+function postParseStyleFeatureName(name, node, parser) {
+    return parser.getDeclarationDefinition(getRule(node), name.value) ? name : error(node)
+}
+
+/**
+ * @param {object} declaration
+ * @param {object} node
+ * @param {object} parser
+ * @returns {SyntaxError|object}
+ * @see {@link https://drafts.csswg.org/css-conditional-5/#typedef-style-feature-name}
+ *
+ * It aborts parsing when the declaration value is `revert` or `revert-layer`.
+ */
+function postParseStyleFeaturePlain(declaration, node) {
+    return declaration.value.value?.startsWith?.('revert') ? error(node) : declaration
 }
 
 /**
@@ -1841,7 +1845,8 @@ module.exports = {
     '<signed-integer>': postParseSignedInteger,
     '<signless-integer>': postParseSignlessInteger,
     '<steps()>': postParseSteps,
-    '<style-feature>': postParseStyleFeature,
+    '<style-feature-plain>': postParseStyleFeaturePlain,
+    '<style-feature-name>': postParseStyleFeatureName,
     '<symbols()>': postParseSymbols,
     '<syntax-string>': postParseSyntaxString,
     '<syntax>': postParseSyntax,

lib/parse/replace.js

@@ -162,6 +162,16 @@ function resolveColorComponentDefinition(node) {
     }
 }
 
+/**
+ * @param {object} node
+ * @param {object} parser
+ * @returns {SyntaxError|object|null}
+ * @see {@link https://drafts.csswg.org/css-conditional-5/#typedef-style-range-value}
+ */
+function replaceWithArbitrarySubstitution(node, parser) {
+    return node.input.consume(parser.parseCSSArbitrarySubstitution, node)
+}
+
 /**
  * @param {object} node
  * @param {object} parser
@@ -216,6 +226,7 @@ module.exports = {
     '<number>': replaceNumeric,
     '<percentage>': replaceNumeric,
     '<resolution>': replaceNumeric,
+    '<style-range-value>': replaceWithArbitrarySubstitution,
     '<subclass-selector>': replaceWithNestingSelector,
     '<system-color>': replaceWithDeprecatedColor,
     '<time>': replaceNumeric,

lib/properties/definitions.js

@@ -529,7 +529,7 @@ module.exports = {
             },
             serialized: 'none',
         },
-        value: 'none | auto | base | <compat-auto> | <compat-special>',
+        value: 'none | auto | base | base-select | <compat-auto> | <compat-special>',
     },
     'aspect-ratio': {
         initial: {

lib/utils/context.js

@@ -3,6 +3,18 @@ const { isCSSType } = require('./node.js')
 
 const type = Symbol('context')
 
+/**
+ * @param {object} node
+ * @param {string} name
+ * @returns {object}
+ */
+function enter(node, name) {
+    const { context } = node
+    const contextDefinition = getRule(node)?.definition.value ?? getRoot(node)
+    const definition = contextDefinition.rules.find(rule => rule.name === name)
+    return { ...context, context, definition }
+}
+
 /**
  * @param {object} node
  * @param {function} accept
@@ -142,6 +154,19 @@ function getProduction(node) {
     return findParent(node, isCSSType, isCSSType)
 }
 
+/**
+ * @param {object} node
+ * @returns {object|undefined}
+ */
+function getRoot({ context }) {
+    let root
+    while (context) {
+        root = context
+        context = context.context
+    }
+    return root
+}
+
 /**
  * @param {object} node
  * @returns {object|undefined}
@@ -185,6 +210,7 @@ function isProducedBy(node, name) {
 }
 
 module.exports = {
+    enter,
     findContext,
     findFunction,
     findParent,
@@ -194,6 +220,7 @@ module.exports = {
     getFunction,
     getFunctionName,
     getProduction,
+    getRoot,
     getRule,
     getRuleName,
     isContext,

lib/values/definitions.js

@@ -468,9 +468,14 @@ module.exports = {
     '<string()>': 'string(<custom-ident> , [first | start | last | first-except]?)',
     '<string>': '<string-token>',
     '<stripes()>': 'stripes(<color-stripe>#)',
-    '<style-feature>': '<declaration> | <ident>',
+    '<style-feature-boolean>': '<style-feature-name>',
+    '<style-feature-name>': '<ident>',
+    '<style-feature-plain>': '<declaration>',
+    '<style-feature>': '<style-feature-plain> | <style-feature-boolean> | <style-range>',
     '<style-in-parens>': '(<style-query>) | (<style-feature>) | <general-enclosed>',
     '<style-query>': 'not <style-in-parens> | <style-in-parens> [[and <style-in-parens>]* | [or <style-in-parens>]*] | <style-feature>',
+    '<style-range-value>': '<custom-property-name> | <number> | <percentage> | <dimension>',
+    '<style-range>': '<style-range-value> <mf-comparison> <style-range-value> | <style-range-value> <mf-lt> <style-range-value> <mf-lt> <style-range-value> | <style-range-value> <mf-gt> <style-range-value> <mf-gt> <style-range-value>',
     '<subclass-selector>': '<id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>',
     '<superellipse()>': 'superellipse(<number [-∞,∞]> | infinity | -infinity)',
     '<supports()>': 'supports(<declaration>)',

lib/values/pseudos.js

@@ -290,6 +290,8 @@ const typographic = {
  * @see {@link https://drafts.csswg.org/selectors-4/#compat}
  * @see {@link https://drafts.csswg.org/selectors-4/#defined-pseudo}
  * @see {@link https://drafts.csswg.org/selectors-5/#selectordef-state}
+ * @see {@link https://drafts.csswg.org/selectors-5/#heading-pseudo}
+ * @see {@link https://drafts.csswg.org/selectors-5/#heading-functional-pseudo}
  * @see {@link https://immersive-web.github.io/dom-overlays/#selectordef-xr-overlay}
  */
 const classes = {
@@ -302,6 +304,7 @@ const classes = {
         ...structural.functions,
         ...time.functions,
         ...viewTransitions.classes.functions,
+        'heading': '<an+b>#',
         'host': '<compound-selector>',
         'host-context': '<compound-selector>',
         'state': '<ident>',
@@ -318,6 +321,7 @@ const classes = {
         ...viewTransitions.classes.identifiers,
         'defined',
         'has-slotted',
+        'heading',
         'high-value',
         'host',
         'low-value',