Minor things

Author: cdoublev

__tests__/stylesheet.js

@@ -9,8 +9,8 @@ import {
     INVALID_RULE_INDEX_ERROR,
     INVALID_RULE_POSITION_ERROR,
     MISSING_RULE_ERROR,
-    SET_INVALID_KEYFRAME_SELECTOR_ERROR,
     SET_INVALID_KEYFRAMES_NAME_ERROR,
+    SET_INVALID_KEYFRAME_SELECTOR_ERROR,
     UPDATE_LOCKED_STYLESHEET_ERROR,
 } from '../lib/error.js'
 import {
@@ -1131,7 +1131,7 @@ describe('CSS grammar - syntax', () => {
         `)
 
         expect(cssRules[0].cssText).toBe(`style { ${declarations}; }`)
-        expect(cssRules[1].cssText).toBe(`@media (;) {}`)
+        expect(cssRules[1].cssText).toBe('@media (;) {}')
     })
     test('positioned {} block in a declaration value not for a custom property', () => {
         // It is always consumed as a rule

__tests__/value.js

@@ -549,7 +549,7 @@ describe('backtracking', () => {
      *
      * 1. Replacing must only apply once (ie. not after backtracking).
      * 2. The list index must backtrack to a location stored in state instead of
-     * from the index of a component value in the list.
+     * from the index of a token in the list.
      * 3. The list must not be updated with the result of parsing because it
      * may be different depending on the context production.
      */

doc/parse/parser.md

@@ -110,9 +110,9 @@ A CSS parser must backtrack after failing to match a component value or when the
 
 It must successfully parse `a a b` against `[a | a a] b`, or `a a` against `a | a a`, by backtracking, instead of failing to find a match after the first choice in `a | a a` (greedy parser), or instead of looking ahead or re-ordering `a | a a` to `a a | a` to find the longest match (maximal munch parser).
 
-**Note:** an obvious requirement that follows is that an input component value must not be tagged with the name of a production that was matched before backtracking.
+**Note:** an obvious requirement that follows is that an input token must not be tagged with the name of a production that was matched before backtracking.
 
-Backtracking requires saving the index in the input list of component values, before parsing a node. If the tail node fails to be parsed and cannot yield an alternative result, it must be removed from the tree before backtracking again. Any sequence of symbols combined with `|`, `||`, `&&`, or any symbol qualified by a multiplier where `min < max`, yield alternatives.
+Backtracking requires saving the index in the input list of tokens, before parsing a node. If the tail node fails to be parsed and cannot yield an alternative result, it must be removed from the tree before backtracking again. Any sequence of symbols combined with `|`, `||`, `&&`, or any symbol qualified by a multiplier where `min < max`, yield alternatives.
 
 One would expect to read combined symbols in the same direction as the input. For example, `a a` would match the first alternative in `[a | a a] a?` (`a?` would not be omitted). But the specifications do not define such priority in alternations (`|`) and arrangements (`||`).
 
@@ -171,7 +171,7 @@ As an example of a semantic context rule, there must be a whitespace preceding `
 
 A simple solution is to define the nodes representing `+` and `-` with a boolean flag like `requireLeadingWhitespace`.
 
-**Note:** whitespaces are usually optionals between component values, which means that failing to consume a whitespace before matching a component value must not cause a parse failure.
+**Note:** whitespaces are usually optionals between tokens, which means that failing to consume a whitespace before matching a component value must not cause a parse failure.
 
 Other semantic rules can be encoded in nodes. For example, math functions must support at least 32 arguments, which means the default value (20) of the `#` multiplier of `<calc-sum>` must be overriden. `#` must also be ignored in the top-level value definition expanded from a property value range (eg. `<'color'>`).
 

lib/parse/grammar.js

@@ -302,9 +302,11 @@ function* children(parent, alternative) {
     const max = getAlternativeMaxLength(definition, alternative)
     let index = Math.max(0, children.length - 1)
     while (index < max) {
-        let node = children[index]
-        if (node) {
-            children.pop()
+        let node
+        if (children[index]) {
+            node = children.pop()
+        } else if (separator && index % 2) {
+            node = create({ type: 'token', value: separator }, input, context, parent)
         } else if (type === 'repetition') {
             node = create(alternative[0], input, context, parent)
         } else {
@@ -313,12 +315,6 @@ function* children(parent, alternative) {
         yield node
         children.push(node)
         ++index
-        if (separator && index < max) {
-            const node = create({ type: 'token', value: separator }, input, context, parent)
-            yield node
-            children.push(node)
-            ++index
-        }
     }
 }
 

lib/parse/parser.js

@@ -1107,7 +1107,7 @@ function parseGrammar(input, definition, context, strategy = 'backtrack') {
     let match = grammar.parse(root)
     while (!isFailure(match) && !isInputAtEnd(root)) {
         if (strategy === 'greedy') {
-            match = error({ message: 'Unexpected remaining component values' })
+            match = error({ message: 'Unexpected remaining tokens' })
             break
         }
         if (strategy === 'lazy') {

lib/parse/postprocess.js

@@ -1339,16 +1339,16 @@ function getPseudoElementDefinition({ value: [, [, { name, types, value }]] }) {
 }
 
 /**
- * @param {string} key
+ * @param {string} name
  * @param {object} node
  * @returns {boolean}
  */
-function isValidPseudoClass(key, node) {
-    if (pseudos.userActions.includes(key) || pseudos.logical[key]) {
+function isValidPseudoClass(name, node) {
+    if (pseudos.userActions.includes(name) || pseudos.logical[name]) {
         return true
     }
     // :has() nested in :has()
-    if (key === 'has' && findFunction(node, node => node.definition.name === 'has')) {
+    if (name === 'has' && findFunction(node, node => node.definition.name === 'has')) {
         return false
     }
     // Pseudo-class qualifying pseudo-element
@@ -1358,7 +1358,7 @@ function isValidPseudoClass(key, node) {
         node => node.definition.name === '<subclass-selector>',
         true)
     if (pseudoElement) {
-        return getPseudoElementDefinition(pseudoElement).classes?.includes(key)
+        return getPseudoElementDefinition(pseudoElement).classes?.includes(name)
     }
     return true
 }
@@ -1409,21 +1409,21 @@ function postParsePseudoClassSelector(selector, node) {
 }
 
 /**
- * @param {string} key
+ * @param {string} name
  * @param {object} node
  * @returns {boolean}
  */
-function isValidPseudoElement(key, node) {
+function isValidPseudoElement(name, node) {
     const origin = findSibling(
         node,
         node => node.definition.name === '<pseudo-element-selector>',
         node => node.definition.name === '<coumpound-selector>',
         true)
     if (origin) {
-        if (key.startsWith('-webkit-')) {
+        if (name.startsWith('-webkit-')) {
             return false
         }
-        return getPseudoElementDefinition(origin).elements?.includes(key)
+        return getPseudoElementDefinition(origin).elements?.includes(name)
     }
     return true
 }

lib/parse/preprocess.js

@@ -34,8 +34,8 @@ function error({ definition: { name, value } }) {
  * @returns {SyntaxError|null|undefined}
  * @see {@link https://drafts.csswg.org/css-values-4/#calc-syntax}
  *
- * It aborts parsing when the next component value is a calculation sum operator
- * that is not preceded by a whitespace.
+ * It aborts parsing when the next token is a calculation sum operator that is
+ * not preceded by a whitespace.
  */
 function preParseCalcOperator(node) {
     const { input } = node
@@ -69,12 +69,14 @@ function preParseCalcValue(node) {
  * @see {@link https://drafts.csswg.org/selectors-4/#typedef-combinator}
  * @see {@link https://drafts.csswg.org/selectors-4/#pseudo-element-structure}
  *
- * It aborts parsing a combinator when it follows a selector of a pseudo-element
- * that has no internal structure, or when the context only allows a compound
+ * It aborts parsing a combinator when the context only allows a compound
  * selector.
  *
- * It aborts parsing when the context allows relative selector(s) whereas it is
- * already restricted to compound selector(s).
+ * It aborts parsing when the input is at the back of a pseudo-element with no
+ * internal structure but is still not at the end of the selector.
+ *
+ * It aborts parsing when the grammar wants a relative selector but the context
+ * only allows a compound selector.
  */
 function preParseCombinator(node) {
     if (isInputAtEnd(node)) {
@@ -83,7 +85,7 @@ function preParseCombinator(node) {
     const pseudoElement = findSibling(
         node,
         node => node.definition.name === '<pseudo-element-selector>',
-        ({ definition: { name } }) => name === '<compound-selector>' || name?.startsWith('<relative'))
+        ({ definition: { name } }) => name === '<subclass-selector>' || name?.startsWith('<relative'))
     if (pseudoElement) {
         const { value: [, [, { name, types, value }]] } = pseudoElement
         const definition = types[0] === '<function>'
@@ -120,8 +122,8 @@ function hasArbitrarySibling({ definition, parent: { definition: { type, value }
  * @see {@link https://drafts.csswg.org/css-variables-2/#funcdef-var}
  * @see {@link https://github.com/w3c/csswg-drafts/issues/8387}
  *
- * It aborts parsing when the next component value is a leading, adjacent, or
- * trailing comma (exception excluded).
+ * It aborts parsing when the next token is a leading, adjacent, or trailing
+ * comma (exception excluded).
  *
  * It accepts an omitted value as replacing a comma that would not have been the
  * separator of a repeated node.
@@ -185,8 +187,8 @@ function preParseComplexSelectorUnit(node) {
  * It aborts parsing a compound selector following another compound selector
  * when the combinator is omitted and there is no interleaving whitespace.
  *
- * It aborts parsing when the next component value is not a pseudo whereas the
- * context is a logical pseudo-class compounded to a pseudo-element.
+ * It aborts parsing when the next token is not a pseudo whereas the context is
+ * a logical pseudo-class compounded to a pseudo-element.
  */
 function preParseCompoundSelector(node) {
     if (hasInvalidSiblingCombinator(node)) {
@@ -213,7 +215,7 @@ function preParseCompoundSelector(node) {
  * @returns {SyntaxError|undefined}
  * @see {@link https://drafts.csswg.org/css-images-4/#funcdef-image-set}
  *
- * It aborts parsing when the next component value is a nested image set.
+ * It aborts parsing when the next token is a nested image set.
  */
 function preParseImageSet(node) {
     const token = node.input.next()
@@ -230,8 +232,8 @@ function preParseImageSet(node) {
  * @returns {SyntaxError|undefined}
  * @see {@link https://drafts.csswg.org/css-ui-4/#typedef-cursor-url-set}
  *
- * It aborts parsing when the next component value is not an url or a string
- * whereas an url set option is expected.
+ * It aborts parsing when the next token is not an url or a string whereas an
+ * url set option is expected.
  */
 function preParseImageSetOption(node) {
     const token = node.input.next()
@@ -253,8 +255,8 @@ function preParseImageSetOption(node) {
  * @returns {null|undefined}
  * @see {@link https://drafts.csswg.org/css-values-4/#length-value}
  *
- * It aborts parsing a length when the next component value is 0 and the context
- * allows a number or an integer.
+ * It aborts parsing a length when the next token is 0 and the context allows a
+ * number or an integer.
  *
  * It accepts 0 as replacing 0px.
  */

lib/values/pseudos.js

@@ -237,6 +237,7 @@ const highlight = {
  * @see {@link https://drafts.csswg.org/css-overflow-5/#selectordef-scroll-marker}
  * @see {@link https://drafts.csswg.org/css-overflow-5/#selectordef-scroll-marker-group}
  * @see {@link https://drafts.csswg.org/css-position-4/#selectordef-backdrop}
+ * @see {@link https://drafts.csswg.org/css-pseudo-4/#element-like}
  * @see {@link https://drafts.csswg.org/css-pseudo-4/#treelike}
  * @see {@link https://drafts.csswg.org/css-shadow-parts-1/#selectordef-part}
  */