simple block -> block

Author: cdoublev

__tests__/definition.js

@@ -222,17 +222,17 @@ describe('symbols', () => {
     test('(a)', () => {
         const parsed = {
             associatedToken: '(',
-            type: 'simple-block',
-            value: { associatedToken: '(', type: 'simple-block', value: a },
+            type: 'block',
+            value: { associatedToken: '(', type: 'block', value: a },
         }
         expect(parse('( ( a ) )')).toEqual(parsed)
         expect(serialize(parsed)).toBe('((a))')
     })
     test("'['a']'", () => {
         const parsed = {
             associatedToken: '[',
-            type: 'simple-block',
-            value: { associatedToken: '[', type: 'simple-block', value: a },
+            type: 'block',
+            value: { associatedToken: '[', type: 'block', value: a },
         }
         expect(parse("'[' '[' a ']' ']'")).toEqual(parsed)
         expect(serialize(parsed)).toBe("'[''['a']'']'")

__tests__/value.js

@@ -753,7 +753,7 @@ describe('comma separated values', () => {
         expect(parse(definition, 'a, ,')).toBe('a,,')
     })
 })
-describe('simple blocks', () => {
+describe('blocks', () => {
     test('invalid', () => {
         expect(parse('(a)', '[a]', false)).toBeNull()
     })
@@ -3556,7 +3556,7 @@ describe('<line-names>', () => {
     test('representation', () => {
         expect(parse('<line-names>', '[name]', false)).toMatchObject({
             associatedToken: '[',
-            types: ['<simple-block>', '<line-names>'],
+            types: ['<block>', '<line-names>'],
             value: list([customIdent('name')]),
         })
     })
@@ -4049,7 +4049,7 @@ describe('<supports-decl>', () => {
         }
         const block = {
             associatedToken: '(',
-            types: ['<simple-block>', '<supports-decl>'],
+            types: ['<block>', '<supports-decl>'],
             value: declaration,
         }
         expect(parse('<supports-decl>', '(color: green)', false, supportsRule)).toMatchObject(block)
@@ -4087,7 +4087,7 @@ describe('<supports-feature>', () => {
     test('representation', () => {
         expect(parse('<supports-feature>', '(color: green)', false, supportsRule)).toMatchObject({
             associatedToken: '(',
-            types: ['<simple-block>', '<supports-decl>', '<supports-feature>'],
+            types: ['<block>', '<supports-decl>', '<supports-feature>'],
             value: {
                 important: false,
                 name: 'color',

lib/match/media.js

@@ -334,7 +334,7 @@ function match(query, window) {
         return 'unknown'
     }
     // (<media-condition>) | (<media-feature>)
-    if (query.types[0] === '<simple-block>') {
+    if (query.types[0] === '<block>') {
         return match(query.value, window)
     }
     // <media-feature>

lib/parse/arbitrary.js

@@ -1,5 +1,5 @@
 
-const { isComma, isDelimiter, isSimpleBlock, isWhitespace } = require('../utils/value.js')
+const { isBlock, isComma, isDelimiter, isWhitespace } = require('../utils/value.js')
 const { list, omitted } = require('../values/value.js')
 const Stream = require('./stream.js')
 const blocks = require('../values/blocks.js')
@@ -35,7 +35,7 @@ function matchAnyValue(input, restricted, stops = []) {
             type === '<bad-string-token>'
             || type === '<bad-url-token>'
             || isDelimiter(stops, next)
-            || (restricted && (isComma(next) || isSimpleBlock(next, '{')))
+            || (restricted && (isComma(next) || isBlock(next, '{')))
         ) {
             break
         }
@@ -66,7 +66,7 @@ function matchCommaContainingValue(node, match) {
         if (input.atEnd()) {
             return null
         }
-        if (isSimpleBlock(input.next(), '{')) {
+        if (isBlock(input.next(), '{')) {
             const block = input.consume()
             const value = match(new Stream(block.value))
             if (value) {

lib/parse/definition.js

@@ -131,13 +131,13 @@ function consumeDelimiter(chars, production) {
     const quote = chars.current
     const value = chars.consume()
     chars.consume(quote)
-    // A simple block associated to `[` cannot be defined with unquoted `[` and `]`
+    // A block associated to `[` cannot be defined with unquoted `[` and `]`
     if (value === '[') {
         const value = consumeDefinition(chars, production)
         chars.consume(quote, Error)
         chars.consume(']', Error)
         chars.consume(quote, Error)
-        return { associatedToken: '[', type: 'simple-block', value }
+        return { associatedToken: '[', type: 'block', value }
     }
     return { type: 'token', value }
 }
@@ -247,7 +247,7 @@ function consumeSymbolUnit(chars, production) {
         case '{': {
             const value = consumeDefinition(chars, production)
             chars.consume(blocks.associatedTokens[char], Error)
-            return { associatedToken: char, type: 'simple-block', value }
+            return { associatedToken: char, type: 'block', value }
         }
         case '[': {
             const group = consumeDefinition(chars, production)

lib/parse/grammar.js

@@ -1,7 +1,7 @@
 
 const { createPermutationIterator, getPermutationIndex } = require('./permutation.js')
+const { isBlock, isDelimiter, isList, isOmitted } = require('../utils/value.js')
 const { isBranch, isCSSType, isSequence } = require('../utils/definition.js')
-const { isDelimiter, isList, isOmitted, isSimpleBlock } = require('../utils/value.js')
 const { list, omitted } = require('../values/value.js')
 const Stream = require('./stream.js')
 const actions = require('./actions.js')
@@ -212,14 +212,14 @@ function match(node, parser) {
     switch (type) {
         case 'arbitrary':
             return arbitrary[name](node, parser)
+        case 'block':
+            return input.consume(matchBlock, node, parser)
         case 'forgiving':
             return parser.parseCSSGrammarList(input, forgiving[name], { ...context, forgiving: true })
         case 'function':
             return input.consume(matchFunction, node, parser)
         case 'omitted':
             return omitted
-        case 'simple-block':
-            return input.consume(matchSimpleBlock, node, parser)
         case 'token':
             return input.consume(matchToken, node)
         default:
@@ -233,9 +233,9 @@ function match(node, parser) {
  * @param {object} parser
  * @returns {object|null}
  */
-function matchSimpleBlock(value, node, parser) {
+function matchBlock(value, node, parser) {
     const { context, definition, input } = node
-    if (isSimpleBlock(value, definition.associatedToken)) {
+    if (isBlock(value, definition.associatedToken)) {
         const match = parser.parseCSSValue(
             new Stream(value.value, input.source),
             definition.value,

lib/parse/parser.js

@@ -1,5 +1,5 @@
 
-const { isCloseCurlyBrace, isColon, isComma, isComputationallyIndependent, isDelimiter, isOpenCurlyBrace, isSemicolon, isSimpleBlock, isWhitespace } = require('../utils/value.js')
+const { isBlock, isCloseCurlyBrace, isColon, isComma, isComputationallyIndependent, isDelimiter, isOpenCurlyBrace, isSemicolon, isWhitespace } = require('../utils/value.js')
 const Stream = require('./stream.js')
 const blocks = require('../values/blocks.js')
 const compatibility = require('../compatibility.js')
@@ -396,13 +396,13 @@ function consumeFunction(tokens, { start, value: name }) {
  *
  * It deviates from the specification by trimming whitespaces.
  */
-function consumeSimpleBlock(tokens, { start, value: associatedToken }) {
+function consumeBlock(tokens, { start, value: associatedToken }) {
     const closingToken = blocks.associatedTokens[associatedToken]
     const value = consumeComponentValueList(tokens, [closingToken])
     if (!tokens.consume(isDelimiter(closingToken))) {
         error({ message: 'Unclosed block' })
     }
-    return { associatedToken, end: tokens.current.end, start, types: ['<simple-block>'], value }
+    return { associatedToken, end: tokens.current.end, start, types: ['<block>'], value }
 }
 
 /**
@@ -413,7 +413,7 @@ function consumeSimpleBlock(tokens, { start, value: associatedToken }) {
 function consumeComponentValue(tokens) {
     const current = tokens.consume()
     if (blocks.associatedTokens[current.value]) {
-        return consumeSimpleBlock(tokens, current)
+        return consumeBlock(tokens, current)
     }
     if (current.types[0] === '<function-token>') {
         return consumeFunction(tokens, current)
@@ -506,11 +506,11 @@ function consumeDeclarationValue(tokens, forCustomProperty, nested) {
             continue
         }
         // Positioned {}-block
-        if (values.some(value => !isWhitespace(value)) && isSimpleBlock(value, '{')) {
+        if (values.some(value => !isWhitespace(value)) && isBlock(value, '{')) {
             return
         }
         const prev = values.findLast(value => !isWhitespace(value))
-        if (prev && isSimpleBlock(prev, '{')) {
+        if (prev && isBlock(prev, '{')) {
             return
         }
         values.push(value)
@@ -695,7 +695,7 @@ function consumeAtRule(tokens, context, nested) {
  * It deviates from the specification by sorting declarations in specified
  * order.
  */
-function consumeBlock(tokens, context, ignoreCloseCurlyBlock) {
+function consumeBlockContents(tokens, context, ignoreCloseCurlyBlock) {
     const rules = list([], ' ', '<block-contents>')
     const declarations = []
     while (!tokens.atEnd()) {
@@ -898,7 +898,7 @@ function parseRule(input, context) {
 function parseDeclarationBlock(input, context) {
     input = normalizeIntoTokens(input)
     context = createContext(context)
-    const declarations = consumeBlock(input, context, true).filter(Array.isArray).flat()
+    const declarations = consumeBlockContents(input, context, true).filter(Array.isArray).flat()
     return getDeclarationsInSpecifiedOrder(declarations)
 }
 
@@ -909,7 +909,7 @@ function parseDeclarationBlock(input, context) {
  * @see {@link https://drafts.csswg.org/css-syntax-3/#parse-a-blocks-contents}
  */
 function parseBlockContents(input, context) {
-    return consumeBlock(normalizeIntoTokens(input), createContext(context))
+    return consumeBlockContents(normalizeIntoTokens(input), createContext(context))
 }
 
 /**
@@ -988,7 +988,7 @@ function parseCSSArbitrarySubstitutionContainingValue(input, context) {
     let containsSubstitution = false
     for (let value of input) {
         const { types: [type], value: nested } = value
-        if (type === '<function>' || type === '<simple-block>') {
+        if (type === '<function>' || type === '<block>') {
             if (type === '<function>') {
                 const match = parseCSSArbitrarySubstitution(value, context)
                 if (match instanceof SyntaxError) {

lib/parse/postprocess.js

@@ -247,7 +247,7 @@ function postParseCalcSum([left, tail]) {
  * It unwraps a calculation nested in a simple block (step 5.1).
  */
 function postParseCalcValue(value) {
-    return value.types[0] === '<simple-block>' ? value.value : value
+    return value.types[0] === '<block>' ? value.value : value
 }
 
 /**

lib/serialize.js

@@ -4,7 +4,7 @@ const { canonicalize, definitions: dimensions, getCanonicalUnitFromType } = requ
 const { clamp, isDegenerate, safeFloat, toEightBit } = require('./utils/math.js')
 const { combinators, isCombination, isCompound, isMultiplied } = require('./utils/definition.js')
 const { hslToRgb, hwbToRgb } = require('./utils/color.js')
-const { isCalculationOperator, isComma, isList, isNumeric, isOmitted, isSimpleBlock } = require('./utils/value.js')
+const { isBlock, isCalculationOperator, isComma, isList, isNumeric, isOmitted } = require('./utils/value.js')
 const { isDigit, isIdentifierCharacter, isNonASCIIIdentifierCharacter } = require('./parse/tokenize.js')
 const { list, map, string } = require('./values/value.js')
 const { auto } = require('./values/defaults.js')
@@ -55,7 +55,7 @@ function serializeCommaContainingValue(value, context) {
     if (context === 'var') {
         return string.startsWith('{') ? `{${string}}` : string
     }
-    if (context && value.some(value => isComma(value) || isSimpleBlock(value, '{'))) {
+    if (context && value.some(value => isComma(value) || isBlock(value, '{'))) {
         return `{${string}}`
     }
     return string
@@ -159,6 +159,18 @@ function serializeBasicShapeRect({ name, value }) {
     return `${name}(${value} round ${radius})`
 }
 
+/**
+ * @param {object} block
+ * @returns {string}
+ */
+function serializeBlock({ associatedToken, value }) {
+    value = serializeCSSComponentValue(value)
+    if (value && associatedToken === '{') {
+        value = ` ${value} `
+    }
+    return `${associatedToken}${value}${blocks.associatedTokens[associatedToken]}`
+}
+
 /**
  * @param {object[][]} radii
  * @returns {string}
@@ -723,6 +735,12 @@ function serializeDefinition(definition, parentPrecedence = 0) {
     if (name === '<keyword>') {
         return range
     }
+    if (type === 'block') {
+        if (associatedToken === '[') {
+            return `'['${serializeDefinition(value)}']'`
+        }
+        return `${associatedToken}${serializeDefinition(value)}${blocks.associatedTokens[associatedToken]}`
+    }
     if (type === 'function') {
         if (name) {
             if (value) {
@@ -732,12 +750,6 @@ function serializeDefinition(definition, parentPrecedence = 0) {
         }
         return `<function-token> ${serializeDefinition(value)} )`
     }
-    if (type === 'simple-block') {
-        if (associatedToken === '[') {
-            return `'['${serializeDefinition(value)}']'`
-        }
-        return `${associatedToken}${serializeDefinition(value)}${blocks.associatedTokens[associatedToken]}`
-    }
     if (type === 'token') {
         if (name) {
             return name
@@ -1016,7 +1028,7 @@ function serializeLineNames(names, allowEmpty) {
     if (names.value.length === 0) {
         return allowEmpty ? '[]' : ''
     }
-    return serializeSimpleBlock(names)
+    return serializeBlock(names)
 }
 
 /**
@@ -1420,18 +1432,6 @@ function serializeSides(sides) {
     return serializeCSSComponentValueList(representSides(sides.map(serializeCSSComponentValue)))
 }
 
-/**
- * @param {object} block
- * @returns {string}
- */
-function serializeSimpleBlock({ associatedToken, value }) {
-    value = serializeCSSComponentValue(value)
-    if (value && associatedToken === '{') {
-        value = ` ${value} `
-    }
-    return `${associatedToken}${value}${blocks.associatedTokens[associatedToken]}`
-}
-
 /**
  * @param {object} skew
  * @returns {string}
@@ -1617,6 +1617,8 @@ function serializeCSSComponentValue(value, context) {
             case '<bg-position>':
             case '<position>':
                 return serializePosition(value)
+            case '<block>':
+                return serializeBlock(value)
             case '<blur()>':
             case '<brightness()>':
             case '<contrast()>':
@@ -1725,8 +1727,6 @@ function serializeCSSComponentValue(value, context) {
                 return serializeShadow(value)
             case '<shape()>':
                 return serializeShape(value)
-            case '<simple-block>':
-                return serializeSimpleBlock(value)
             case '<skew()>':
                 return serializeSkew(value)
             case '<snap-block()>':

lib/utils/definition.js

@@ -1,7 +1,7 @@
 
 const sequences = ['||', '&&', ' ']
 const combinators = ['|', ...sequences]
-const compounds = ['function', 'rule', 'simple-block']
+const compounds = ['block', 'function', 'rule']
 
 /**
  * @param {object} definition