Minor things

Author: cdoublev

__tests__/stylesheet.js

@@ -144,7 +144,7 @@ describe('CSSStyleSheet.insertRule(), CSSStyleSheet.deleteRule()', () => {
         expect(() => styleSheet.deleteRule(0)).toThrow(ACCESS_THIRD_PARTY_STYLESHEET_ERROR)
     })
     it('throws an error when trying to insert/delete a rule while modifications on the style sheet are not allowed', () => {
-        const styleSheet = new globalThis.CSSStyleSheet()
+        const styleSheet = new globalThis.CSSStyleSheet
         styleSheet.replace('')
         expect(() => styleSheet.insertRule('style {}')).toThrow(UPDATE_LOCKED_STYLESHEET_ERROR)
         expect(() => styleSheet.deleteRule(0)).toThrow(UPDATE_LOCKED_STYLESHEET_ERROR)
@@ -159,7 +159,7 @@ describe('CSSStyleSheet.insertRule(), CSSStyleSheet.deleteRule()', () => {
         expect(() => styleSheet.insertRule('style {};')).toThrow(EXTRA_RULE_ERROR)
     })
     it('throws an error when trying to insert @import in a constructed style sheet', () => {
-        const styleSheet = new globalThis.CSSStyleSheet()
+        const styleSheet = new globalThis.CSSStyleSheet
         expect(() => styleSheet.insertRule('@import "./global.css";')).toThrow(INSERT_INVALID_IMPORT_ERROR)
     })
     it('throws an error when trying to insert/delete a rule at an index greater than the length of rules', () => {
@@ -245,13 +245,13 @@ describe('CSSStyleSheet.replace(), CSSStyleSheet.replaceSync()', () => {
         expect(() => styleSheet.replaceSync('')).toThrow(UPDATE_LOCKED_STYLESHEET_ERROR)
     })
     it('throws an error when trying to replace rules concurrently', async () => {
-        const styleSheet = new globalThis.CSSStyleSheet()
+        const styleSheet = new globalThis.CSSStyleSheet
         styleSheet.replace('')
         return expect(styleSheet.replace('')).rejects.toMatchObject(UPDATE_LOCKED_STYLESHEET_ERROR)
     })
     it('replaces a rule asynchronously/synchronously', async () => {
 
-        const styleSheet = new globalThis.CSSStyleSheet()
+        const styleSheet = new globalThis.CSSStyleSheet
         const { cssRules } = styleSheet
 
         expect(await styleSheet.replace('style { color: orange }')).toBe(styleSheet)
@@ -265,15 +265,15 @@ describe('CSSStyleSheet.replace(), CSSStyleSheet.replaceSync()', () => {
     })
     it('ignores opening and ending HTML comment tokens', () => {
 
-        const styleSheet = new globalThis.CSSStyleSheet()
+        const styleSheet = new globalThis.CSSStyleSheet
 
         styleSheet.replaceSync('<!-- style {} -->')
 
         expect(styleSheet.cssRules).toHaveLength(1)
     })
     it('ignores import rules and invalid statements', () => {
 
-        const styleSheet = new globalThis.CSSStyleSheet()
+        const styleSheet = new globalThis.CSSStyleSheet
 
         styleSheet.replaceSync(`
             @import "./global.css";

__tests__/value.js

@@ -13,6 +13,7 @@ const {
     hash,
     ident,
     identToken,
+    integer,
     keyword,
     length,
     list,
@@ -1165,7 +1166,7 @@ describe('<integer>', () => {
         invalid.forEach(input => expect(parse('<integer [0,∞]>', input, false)).toBeNull())
     })
     test('representation', () => {
-        expect(parse('<integer>', '1', false)).toMatchObject(numberToken(1, ['<integer>']))
+        expect(parse('<integer>', '1', false)).toMatchObject(integer(1))
     })
     test('valid', () => {
         const valid = [
@@ -3135,21 +3136,21 @@ describe('<counter-style-name>', () => {
         expect(parse('<counter-style-name>', 'NAME')).toBe('NAME')
     })
 })
-describe('<dashed-function-head>', () => {
+describe('<custom-function-definition>', () => {
     test('invalid', () => {
-        expect(parse('<dashed-function-head>', 'custom()', false)).toBeNull()
+        expect(parse('<custom-function-definition>', 'custom()', false)).toBeNull()
     })
     test('representation', () => {
         const nameAndParameters = {
             name: '--CUSTOM',
             types: ['<function>'],
             value: omitted,
         }
-        const head = list([nameAndParameters, omitted], ' ', ['<dashed-function-head>'])
-        expect(parse('<dashed-function-head>', '--CUSTOM()', false)).toMatchObject(head)
+        const definition = list([nameAndParameters, omitted], ' ', ['<custom-function-definition>'])
+        expect(parse('<custom-function-definition>', '--CUSTOM()', false)).toMatchObject(definition)
     })
     test('valid', () => {
-        expect(parse('<dashed-function-head>', '--custom() returns type(*)')).toBe('--custom()')
+        expect(parse('<custom-function-definition>', '--custom() returns type(*)')).toBe('--custom()')
     })
 })
 describe('<drop-shadow()>', () => {
@@ -3544,12 +3545,12 @@ describe('<mf-comparison>', () => {
 })
 describe('<mf-boolean>', () => {
     test('invalid', () => {
+        expect(parse('<mf-boolean>', 'min-color', false, mediaRule)).toBeNull()
         expect(parse('<mf-boolean>', 'min-orientation', false, mediaRule)).toBeNull()
-        expect(parse('<mf-boolean>', 'min-width', false, mediaRule)).toBeNull()
     })
     test('representation', () => {
-        expect(parse('<mf-boolean>', 'width', false, mediaRule))
-            .toMatchObject(ident('width', ['<mf-name>', '<mf-boolean>']))
+        expect(parse('<mf-boolean>', 'color', false, mediaRule))
+            .toMatchObject(ident('color', ['<mf-name>', '<mf-boolean>']))
     })
     test('valid', () => {
         expect(parse('<mf-boolean>', 'orientation', true, mediaRule)).toBe('orientation')
@@ -3561,7 +3562,7 @@ describe('<mf-name>', () => {
         expect(parse('<mf-name>', 'inline-size', false, mediaRule)).toBeNull()
     })
     test('representation', () => {
-        expect(parse('<mf-name>', 'width', false, mediaRule)).toMatchObject(ident('width', ['<mf-name>']))
+        expect(parse('<mf-name>', 'color', false, mediaRule)).toMatchObject(ident('color', ['<mf-name>']))
     })
     test('valid', () => {
         const valid = [
@@ -3578,26 +3579,26 @@ describe('<mf-plain>', () => {
     test('invalid', () => {
         const invalid = [
             'min-orientation: landscape',
-            'width: 1',
+            'color: red',
             // Element-dependent numeric substitution
-            'width: calc-mix(0, 1px, 1px)',
-            'width: random(1px, 1px)',
-            'width: calc(1px * sibling-index())',
+            'color: calc-mix(0, 1, 1)',
+            'color: random(1, 1)',
+            'color: sibling-index()',
         ]
         invalid.forEach(input => expect(parse('<mf-plain>', input, false, mediaRule)).toBeNull())
     })
     test('representation', () => {
-        const name = ident('width', ['<mf-name>'])
-        const value = length(1, 'px', ['<mf-value>'])
+        const name = ident('color', ['<mf-name>'])
+        const value = integer(1, ['<mf-value>'])
         const feature = list([name, delimiter(':'), value], ' ', ['<mf-plain>'])
-        expect(parse('<mf-plain>', 'width: 1px', false, mediaRule)).toMatchObject(feature)
+        expect(parse('<mf-plain>', 'color: 1', false, mediaRule)).toMatchObject(feature)
     })
     test('valid', () => {
         const valid = [
             ['orientation: PORTRAIT', 'orientation: portrait'],
             ['color: 1.0', 'color: 1'],
             ['min-width: 0', 'min-width: 0px'],
-            ['width: calc(1px * 1)', 'width: calc(1px)'],
+            ['color: calc(1 * 1)', 'color: calc(1)'],
             ['aspect-ratio: 1', 'aspect-ratio: 1 / 1'],
         ]
         valid.forEach(([input, expected]) => expect(parse('<mf-plain>', input, true, mediaRule)).toBe(expected))
@@ -3607,33 +3608,33 @@ describe('<mf-range>', () => {
     test('invalid', () => {
         const invalid = [
             // Prefixed <mf-name>
-            'min-width = 1px',
-            '1px < min-width < 1px',
+            'min-color = 1',
+            '1 < min-color < 1',
             // Discrete <mf-name>
             'orientation = 1',
             '1 < orientation < 1',
             // Invalid <mf-value>
-            'width = 1',
-            '1 < width < 1px',
-            '1px < width < 1',
+            'color = 1px',
+            '1 < color < 1px',
+            '1px < color < 1',
             // Element-dependent numeric substitutions
-            'width < calc-mix(0, 1px, 1px)',
-            'width < random(1px, 1px)',
-            'width < calc(1px * sibling-index())',
+            'color < calc-mix(0, 1, 1)',
+            'color < random(1, 1)',
+            'color < sibling-index()',
         ]
         invalid.forEach(input => expect(parse('<mf-range>', input, false, mediaRule)).toBeNull())
     })
     test('representation', () => {
-        const name = ident('width', ['<mf-name>'])
+        const name = ident('color', ['<mf-name>'])
         const comparator = delimiter('=', ['<mf-eq>', '<mf-comparison>'])
-        const value = length(1, 'px', ['<mf-value>'])
+        const value = integer(1, ['<mf-value>'])
         const range = list([name, comparator, value], ' ', ['<mf-range>'])
-        expect(parse('<mf-range>', 'width = 1px', false, mediaRule)).toMatchObject(range)
+        expect(parse('<mf-range>', 'color = 1', false, mediaRule)).toMatchObject(range)
     })
     test('valid', () => {
         const valid = [
-            ['width < 0', 'width < 0px'],
-            ['width < calc(1px * 1)', 'width < calc(1px)'],
+            ['color < 0', 'color < 0'],
+            ['color < calc(1 * 1)', 'color < calc(1)'],
             ['0 < aspect-ratio < 1', '0 / 1 < aspect-ratio < 1 / 1'],
         ]
         valid.forEach(([input, expected]) => expect(parse('<mf-range>', input, true, mediaRule)).toBe(expected))
@@ -3889,7 +3890,7 @@ describe('<step-easing-function>', () => {
         expect(parse('<step-easing-function>', 'steps(1)', false)).toMatchObject({
             name: 'steps',
             types: ['<function>', '<steps()>', '<step-easing-function>'],
-            value: list([numberToken(1, ['<integer>']), omitted, omitted]),
+            value: list([integer(1), omitted, omitted]),
         })
     })
     test('valid', () => {

doc/parse/README.md

@@ -137,7 +137,7 @@ Each *parse* procedure from CSS Syntax is named a *parser entry point* and runs
   >
   > [...]
 
-Entry points can receive a string, tokens, or component values, and output the expected structure: a component value, a declaration, a rule, or a list of them. They are not intended to be used at an intermediate step of the recursive parsing process, since some algorithms output high-level objects that are not a string, tokens, or component values.
+Entry points can receive a string, tokens, or component values, and output the expected structure: a component value, a declaration, a rule, or a list of them. They are not intended to be used at an intermediate step of the recursive parse process, since some algorithms output high-level objects that are not a string, tokens, or component values.
 
 Algorithms for a rule and a declaration require validating them in the context against their grammar:
 

doc/parse/value-data-structure.md

@@ -9,22 +9,22 @@ Consuming the input into tokens is the first parse step before consuming tokens
 
 A token represents either:
 
-  - a delimiter (a single code point, `<--`, or `-->`)
   - a numeric
   - an identifier (possibly prefixed with `#` or `@`)
   - a string (wrapped between `"` or `'`)
   - a specific sequence of code points (`<function-token>`, `<url-token>`, `<unicode-range-token>`)
+  - a delimiter (a single code point, `<--`, or `-->`)
 
 A token is defined in CSS Syntax with the following properties:
 
   - `value`: a `Number` for numeric tokens, otherwise a `String`
-  - `sign`: a `String` only for `<number-token>`, `<dimension-token>`, `<percentage-token>`
+  - `sign`: a `String`, only for `<number-token>`, `<dimension-token>`, `<percentage-token>`
   - `type`: a `String`, only for `<hash-token>`, `<number-token>`, `<dimension-token>`
   - `unit`: a `String`, only for `<dimension-token>`
 
-A component value is the same object than the consumed token, except a function or simple block, whose `value` is a list of component values. A function also has a `name` and a simple block has an `associatedToken`, which are both `String`.
+Except for functions and simple blocks, a component value is the same object than the consumed token: a preserved token. The `value` of functions and simple blocks is a list of component values. A function also has a `name` and a simple block has an `associatedToken`, which are both `String`.
 
-A component value must expose its token type in order to be matched against a token production. Some production rules include token productions:
+A preserved token must expose its type in order to be matched against a token production. Some production rules directly include a token type:
 
   - `<function-token>`
     - `<general-enclosed>`
@@ -42,20 +42,20 @@ A component value must expose its token type in order to be matched against a to
   - `<string-token>`
     - `<attribute-selector>`
 
-**[Issue](https://github.com/w3c/csswg-drafts/issues/7016):** `<function-token>` cannot be matched because because any CSS input goes through *consume a component value* before grammar validation.
+**[Issue](https://github.com/w3c/csswg-drafts/issues/7016):** `<function-token>` cannot be matched because any CSS input goes through *consume a component value* before grammar validation.
 
-A component value must expose its matched CSS type(s) in hierarchical order, to apply any associated parsing and serialization rule. For example, a component value matching `<percentage>` and `<alpha-value>` must serialize as a `<number>` to the shortest possible form, therefore `<alpha-value>` must be read before `<percentage>`.
+A component value must expose its matched CSS type(s) in parse order, to apply any associated parsing and serialization rule. For example, a component value matching `<percentage>` and `<alpha-value>` must serialize as a `<number>` to the shortest possible form rather than as a `<percentage>`, therefore `<alpha-value>` must be read before `<percentage>`.
 
 ---
 
 All component values are represented as plain objects exposing token and CSS types with a `types` property, rather than using classes (eg. `CSSNumber`, `CSSDimension`, etc) or separate properties (eg. `tokenType` and `cssTypes`).
 
-A `<percentage-token>` can also be considered as a dimension (cf. [#7381](https://github.com/w3c/csswg-drafts/issues/7381)), therefore it also has `unit`, to simplify parsing and serializing.
+A `<percentage-token>` can also be considered as a dimension (cf. [#7381](https://github.com/w3c/csswg-drafts/issues/7381)), therefore it is also implemented with a `unit` property, to simplify parsing and serializing.
 
 In CSS Syntax:
 
   - `<number-token>` and `<dimension-token>` are defined with a `type` that is either `integer` or `number`
-  - `<*-integer>` and `<*-dimension>` (produced by `<an+b>`) match `<number-token>` and `<dimension-token>` whose `type` is `integer`
+  - `<*-integer>` and `<*-dimension>` produced by `<an+b>` match `<number-token>` and `<dimension-token>` whose `type` is `integer`
   - `type` is `number` when the value is specified with `.` or the scientific notation (even `1.0` or `1e1`)
 
 In this library, `<number-token>` and `<dimension-token>` do not have `type` and `<integer>`, `<*-integer>`, `<*-dimension>`, match a corresponding token whose `value` is an integer, which means `nth-child(1e1)` or `nth-child(1e1n)` should be discarded.
@@ -64,4 +64,4 @@ In this library, `<number-token>` and `<dimension-token>` do not have `type` and
 
 A declaration is represented as a plain object with `types` including `<declaration>`, in order to be serialized when it appears in a list of component values (the prelude of `@supports`).
 
-A rule is initially represented as a plain object with `types` including `rule`, either `at-rule` or `qualified-rule`, and an identifier prefixed with `@` that usually corresponds to the rule name. Then it is represented as an instance of a `CSSRule` subclass with an internal `types`.
+A rule and a style sheet are directly represented as a CSSOM object.

lib/cssom/CSSFontFeatureValuesMap-impl.js

@@ -31,7 +31,7 @@ class CSSFontFeatureValuesMapImpl {
                 [name, Array.isArray(value) ? [...value.map(component => component.value)] : [value.value]])
             this._map = new Map(entries)
         } else {
-            this._map = new Map()
+            this._map = new Map
         }
     }
 

lib/parse/arbitrary.js

@@ -52,7 +52,7 @@ function matchAnyValue(input, restricted, stops = []) {
  * @returns {boolean}
  */
 function isGeneralFunctionalNotation({ definition, input }) {
-    return !(definition.name || input.current.name.startsWith('--'))
+    return !definition.name && !input.current.name.startsWith('--')
 }
 
 /**

lib/parse/grammar.js

@@ -1,7 +1,7 @@
 
 const { createPermutationIterator, getPermutationIndex } = require('./permutation.js')
 const { isBranch, isCSSType, isSequence } = require('../utils/definition.js')
-const { isDelimiter, isOmitted } = require('../utils/value.js')
+const { isDelimiter, isOmitted, isSimpleBlock } = require('../utils/value.js')
 const { list, omitted } = require('../values/value.js')
 const Stream = require('./stream.js')
 const actions = require('./actions.js')
@@ -228,37 +228,36 @@ function match(node, parser) {
 }
 
 /**
- * @param {object} block
+ * @param {object} component
  * @param {object} node
  * @param {object} parser
  * @returns {object|null}
  */
-function matchSimpleBlock(block, node, parser) {
-    const { associatedToken, types, value } = block
+function matchSimpleBlock(component, node, parser) {
     const { context, definition, input } = node
-    if (types[0] === '<simple-block>' && associatedToken === definition.associatedToken) {
+    if (isSimpleBlock(definition.associatedToken, component)) {
         const match = parser.parseCSSValue(
-            new Stream(value, input.source),
+            new Stream(component.value, input.source),
             definition.value,
             { ...context, block: context })
         if (match instanceof SyntaxError) {
             return match
         }
         if (match) {
-            return { ...block, value: match }
+            return { ...component, value: match }
         }
     }
     return null
 }
 
 /**
- * @param {object} fn
+ * @param {object} component
  * @param {object} node
  * @param {object} parser
  * @returns {object|null}
  */
-function matchFunction(fn, node, parser) {
-    let { name, types, value } = fn
+function matchFunction(component, node, parser) {
+    let { name, types, value } = component
     if (types[0] !== '<function>') {
         return null
     }
@@ -269,19 +268,19 @@ function matchFunction(fn, node, parser) {
         if (name === null || name instanceof SyntaxError) {
             return name
         }
-        fn = { ...fn, name: name.value }
+        component = { ...component, name: name.value }
     }
     if (definition.value) {
         value = new Stream(value, input.source)
         value = parser.parseCSSValue(value, definition.value, ctx)
         if (value === null || value instanceof SyntaxError) {
             return value
         }
-        fn = { ...fn, value }
+        component = { ...component, value }
     } else if (0 < value.length) {
         return null
     }
-    return fn
+    return component
 }
 
 /**