Parse the whole input as a list of tokens

This allows consuming component values and validating the grammar in a single
pass, which allows interpreting bad tokens as parse errors even when nested,
and parsing any type of value with parseGrammar().

This deviates from CSS Syntax procedures that consume a prelude, a declaration
value, a standalone value, as a list of component values, but they are written
to prioritize understandability over efficiency. There should be no observable
difference in the output.

Since the related changes do not allow for easy diffing, this commit also comes
with a few unrelated but non-important fixes and refactorings.

Author: cdoublev

README.md

@@ -6,7 +6,7 @@ JavaScript implementation of CSS.
 ## Usage
 
 ```js
-const { cssom, install, parser: { parseCSSGrammar, parseCSSStyleSheet } } = require('@cdoublev/css')
+const { cssom, install, parser } = require('@cdoublev/css')
 
 /**
  * install() expects a window-like global object (default: globalThis) with
@@ -15,7 +15,7 @@ const { cssom, install, parser: { parseCSSGrammar, parseCSSStyleSheet } } = requ
 install(/*myGlobalObject*/)
 
 // Parse a style sheet and get a (non-constructed) CSSStyleSheet
-const stylesheet = parseCSSStyleSheet('style {}')
+const stylesheet = parser.parseStyleSheet('style {}')
 
 // Create a (constructed) CSSStyleSheet
 const styleSheet = new /*myGlobalObject.*/CSSStyleSheet()
@@ -25,7 +25,7 @@ const stylesheet = cssom.CSSStyleSheet.create(myGlobalObject, undefined, private
 const style = cssom.CSSStyleDeclaration.create(myGlobalObject, undefined, privateProperties)
 
 // Parse a value according to a CSS grammar
-const value = parseCSSGrammar('(width < 30rem), (orientation: portrait)', '<media-query-list>')
+const value = parser.parseGrammar('(width < 30rem), (orientation: portrait)', '<media-query-list>')
 ```
 
 The `webidl2js` wrappers are intended to implement:

__tests__/match.js

@@ -2,7 +2,7 @@
 import { install } from '../lib/index.js'
 import matchMediaQueryList from '../lib/match/media.js'
 import matchSupport from '../lib/match/support.js'
-import { parseCSSGrammar } from '../lib/parse/parser.js'
+import { parseGrammar } from '../lib/parse/parser.js'
 
 install()
 
@@ -21,7 +21,7 @@ describe('media', () => {
     }
 
     function match(query, window) {
-        return matchMediaQueryList(parseCSSGrammar(query, '<media-query-list>'), window)
+        return matchMediaQueryList(parseGrammar(query, '<media-query-list>'), window)
     }
 
     test('types', () => {
@@ -302,7 +302,7 @@ describe('media', () => {
 describe('support', () => {
 
     function match(query) {
-        return matchSupport(parseCSSGrammar(`(${query})`, '<supports-condition>'))
+        return matchSupport(parseGrammar(`(${query})`, '<supports-condition>'))
     }
 
     test('declaration', () => {

__tests__/stream.js

@@ -148,6 +148,15 @@ describe('prev(size, offset = 0)', () => {
     })
 })
 
+describe('peek(predicate)', () => {
+    it('returns whether the next item satisfies the given predicate', () => {
+        expect(stream.peek(char => char === '.')).toBeFalsy()
+        expect(stream.peek(char => char === 'h')).toBeTruthy()
+        stream.moveToEnd()
+        expect(stream.peek(_ => true)).toBeFalsy()
+    })
+})
+
 describe('atEnd(offset = 0)', () => {
     it('returns false when some items have not been consumed', () => {
         expect(stream.atEnd()).toBeFalsy()

__tests__/style.js

@@ -381,30 +381,34 @@ describe('arbitrary substitution', () => {
     test('invalid', () => {
         const style = createStyleBlock()
         const invalid = [
-            // Invalid component value
-            ['env(name) "\n'],
-            ['env(name) url(bad .url)'],
-            ['env(name) ]'],
-            ['env(name) )'],
-            ['env(name) }'],
-            ['env(name) ;'],
-            ['env(name) !'],
-            ['env(name) {}', 'color'],
-            ['{} env(name)', 'color'],
-            ['env(name) !important'],
-            ['!important env(name)'],
+            // Top-level or nested <bad-*-token>, ), ], }
+            'env(name) fn("\n)',
+            'env(name) (url(bad .url))',
+            'env(name) [)]',
+            'env(name) (])',
+            'env(name) (})',
+            // Top-level ; and !
+            'env(name) ;',
+            'env(name) !',
+            'env(name) !important',
+            // Positioned {} block
+            'env(name) {}',
+            '{} env(name)',
             // Nested
-            ['fn(env())'],
-            ['{env()}'],
+            'fn(env())',
+            '{env()}',
         ]
-        invalid.forEach(([input, property = '--custom']) => {
-            style.setProperty(property, input)
-            expect(style.getPropertyValue(property)).toBe('')
+        invalid.forEach(input => {
+            style.color = input
+            expect(style.color).toBe('')
         })
     })
     test('valid', () => {
         const style = createStyleBlock()
         const valid = [
+            // Nested ; and !
+            ['env(name) (;)'],
+            ['env(name) (!)'],
             // Valid at parse time
             ['--custom(--custom(!))'],
             ['attr(name, attr())'],
@@ -481,16 +485,40 @@ describe('<whole-value>', () => {
 })
 
 describe('--*', () => {
+    test('invalid', () => {
+        const style = createStyleBlock()
+        const invalid = [
+            // Top-level or nested <bad-*-token>, ), ], }
+            'fn("\n)',
+            '(url(bad .url))',
+            '[)]',
+            '(])',
+            '(})',
+            // Top-level ; and !
+            ';',
+            '!important',
+        ]
+        invalid.forEach(input => {
+            style.setProperty('--custom', input)
+            expect(style.getPropertyValue('--custom')).toBe('')
+        })
+    })
     test('valid', () => {
         const style = createStyleBlock()
         const valid = [
-            // Whitespaces and comments
-            ['', ' '],
-            ['  /**/  ', ' '],
+            // Nested ; and !
+            ['(;)'],
+            ['(!)'],
+            // Positioned {}-block
+            ['positioned {} block'],
+            // Serialize exactly as specified but without leading and trailing whitespaces
             [
                 '  /**/  Red  ,  (  orange  /**/  )  ,  green  /**/  ! /**/ important',
                 'Red  ,  (  orange  /**/  )  ,  green !important',
             ],
+            // Empty value
+            ['', ' '],
+            ['  /**/  ', ' '],
             // Substitution
             ['var(  --PROPerty, /**/ 1e0 /**/  )  ', 'var(  --PROPerty, /**/ 1e0 /**/  )'],
             ['initial initial'],
@@ -1032,6 +1060,35 @@ describe('shape-outside', () => {
         expect(style.shapeOutside).toBe('inset(1px)')
     })
 })
+describe('@font-face/src', () => {
+    test('invalid', () => {
+        const style = CSSFontFaceDescriptors.create(globalThis, undefined, { parentRule: fontFaceRule })
+        const invalid = [
+            '{]}, local("serif")',
+            'local("serif"), {]}',
+        ]
+        invalid.forEach(input => {
+            style.src = input
+            expect(style.src).toBe('')
+        })
+    })
+    test('valid', () => {
+        const style = CSSFontFaceDescriptors.create(globalThis, undefined, { parentRule: fontFaceRule })
+        const valid = [
+            'local("serif"), "\n',
+            'local("serif"), url(bad .url)',
+            'local("serif"), )',
+            'local("serif"), ]',
+            'local("serif"), }',
+            'local("serif"), ;',
+            'local("serif"), !',
+        ]
+        valid.forEach(input => {
+            style.src = input
+            expect(style.src).toBe('local("serif")')
+        })
+    })
+})
 describe('text-emphasis-position', () => {
     test('valid', () => {
         const style = createStyleBlock()