Add definitions of CSS*Declarations rules in appropriate contexts

Declaring a value via CSS*Declarations.style threw an error because the context
was created with CSS*Declarations, whose definition could not be resolved since
it was missing in the definitions of rules accepted in the parent context.

Test will be added later, as I cannot decide on the best place at the moment.

This commit also simplifies rule definitions overall.

Author: cdoublev

lib/rules/definitions.js

@@ -9,7 +9,7 @@ import properties from '../properties/definitions.js'
 /**
  * @see {@link https://drafts.csswg.org/css-conditional-3/#conditional-group-rule}
  */
-const conditionalGroupRuleNames = [
+const conditionalRuleNames = [
     '@container',
     '@media',
     '@supports',
@@ -18,24 +18,43 @@ const conditionalGroupRuleNames = [
 /**
  * @see {@link https://drafts.csswg.org/css-nesting-1/#nested-group-rules}
  */
-const nestedGroupRuleNames = [
-    '@container',
+const groupRuleNames = [
+    ...conditionalRuleNames,
     '@layer',
-    '@media',
     '@scope',
     '@starting-style',
     '@style',
-    '@supports',
 ]
 
-// Populated at the bottom of this file
-const conditionalGroupRules = []
-const nestedConditionalRulesInsideFunction = []
-const nestedGroupRules = []
+/**
+ * @see {@link https://drafts.csswg.org/css-mixins-1/#at-ruledef-function}
+ */
+const functionRule = {
+    cssom: 'CSSFunctionRule',
+    elemental: true,
+    name: '@function',
+    prelude: '<custom-function-definition>',
+    type: 'rule',
+    value: {
+        descriptors: descriptors['@function'],
+        name: '<declaration-rule-list>',
+        rules: [{
+            cssom: 'CSSFunctionDeclarations',
+            elemental: true,
+            name: '@declarations',
+            type: 'rule',
+            value: {
+                descriptors: descriptors['@function'],
+                name: '<declaration-list>',
+                type: 'arbitrary',
+            },
+        }],
+        type: 'arbitrary',
+    },
+}
 
 /**
  * @see {@link https://drafts.csswg.org/css-syntax-3/#style-rule}
- * @see {@link https://drafts.csswg.org/css-nesting-1/#nesting}
  */
 const styleRule = {
     cascading: true,
@@ -48,28 +67,26 @@ const styleRule = {
     value: {
         name: '<declaration-rule-list>',
         properties,
-        rules: nestedGroupRules,
+        rules: [{
+            cascading: true,
+            cssom: 'CSSNestedDeclarations',
+            elemental: true,
+            name: '@declarations',
+            type: 'rule',
+            value: {
+                name: '<declaration-list>',
+                properties,
+                type: 'arbitrary',
+            },
+        }],
         type: 'arbitrary',
     },
 }
-const nestedStyle = { ...styleRule, prelude: '<relative-selector-list>' }
 
 /**
- * @see {@link https://drafts.csswg.org/css-mixins-1/#at-ruledef-function}
+ * @see {@link https://drafts.csswg.org/css-nesting-1/#nested-style-rule}
  */
-const functionRule = {
-    cssom: 'CSSFunctionRule',
-    elemental: true,
-    name: '@function',
-    prelude: '<custom-function-definition>',
-    type: 'rule',
-    value: {
-        descriptors: descriptors['@function'],
-        name: '<declaration-rule-list>',
-        rules: nestedConditionalRulesInsideFunction,
-        type: 'arbitrary',
-    },
-}
+const nestedStyle = { ...styleRule, prelude: '<relative-selector-list>' }
 
 const topLevelRules = [
     /**
@@ -312,36 +329,51 @@ const topLevelRules = [
             descriptors: descriptors['@page'],
             name: '<declaration-rule-list>',
             properties: pageProperties,
-            rules: [{
-                cascading: true,
-                cssom: 'CSSMarginRule',
-                elemental: true,
-                name: '@margin',
-                names: [
-                    '@bottom-center',
-                    '@bottom-left',
-                    '@bottom-left-corner',
-                    '@bottom-right',
-                    '@bottom-right-corner',
-                    '@left-bottom',
-                    '@left-middle',
-                    '@left-top',
-                    '@right-bottom',
-                    '@right-middle',
-                    '@right-top',
-                    '@top-center',
-                    '@top-left',
-                    '@top-left-corner',
-                    '@top-right',
-                    '@top-right-corner',
-                ],
-                type: 'rule',
-                value: {
-                    name: '<declaration-list>',
-                    properties: pageMarginProperties,
-                    type: 'arbitrary',
+            rules: [
+                {
+                    cascading: true,
+                    cssom: 'CSSMarginRule',
+                    elemental: true,
+                    name: '@margin',
+                    names: [
+                        '@bottom-center',
+                        '@bottom-left',
+                        '@bottom-left-corner',
+                        '@bottom-right',
+                        '@bottom-right-corner',
+                        '@left-bottom',
+                        '@left-middle',
+                        '@left-top',
+                        '@right-bottom',
+                        '@right-middle',
+                        '@right-top',
+                        '@top-center',
+                        '@top-left',
+                        '@top-left-corner',
+                        '@top-right',
+                        '@top-right-corner',
+                    ],
+                    type: 'rule',
+                    value: {
+                        name: '<declaration-list>',
+                        properties: pageMarginProperties,
+                        type: 'arbitrary',
+                    },
                 },
-            }],
+                {
+                    cascading: true,
+                    cssom: 'CSSPageDeclarations',
+                    elemental: true,
+                    name: '@declarations',
+                    type: 'rule',
+                    value: {
+                        descriptors: descriptors['@page'],
+                        name: '<declaration-list>',
+                        properties: pageProperties,
+                        type: 'arbitrary',
+                    },
+                },
+            ],
             type: 'arbitrary',
         },
     },
@@ -361,7 +393,7 @@ const topLevelRules = [
         },
     },
     /**
-     * @see {@link https://drafts.css-houdini.org/css-properties-values-api/#at-property-rule}
+     * @see {@link https://drafts.css-houdini.org/css-properties-values-api/#at-ruledef-property}
      */
     {
         cssom: 'CSSPropertyRule',
@@ -437,25 +469,28 @@ const topLevelRules = [
 
 const styleSheetRules = topLevelRules.filter(({ name }) => name !== '@import' && name !== '@namespace')
 
-// Define conditional group rules
-conditionalGroupRuleNames.forEach(name =>
-    conditionalGroupRules.push(styleSheetRules.find(rule => rule.name === name)))
-
-// Define nested conditional rules inside @function
-conditionalGroupRules.forEach(rule =>
-    nestedConditionalRulesInsideFunction.push({ ...rule, elemental: true, value: functionRule.value }))
+// Define conditional rules inside @function
+conditionalRuleNames.forEach(name =>
+    functionRule.value.rules.push({
+        ...styleSheetRules.find(rule => rule.name === name),
+        elemental: true,
+        value: functionRule.value,
+    }))
 
-// Define nested group rules inside style rules
-nestedGroupRuleNames.forEach(name => {
+// Define group rules inside style rules and at the top-level
+groupRuleNames.forEach(name => {
     const rule = styleSheetRules.find(rule => rule.name === name)
+    // Skip @layer statement
     if (name === '@layer' && !rule.value) {
         return
     }
+    // Nested in style rules
     if (name === '@style') {
-        nestedGroupRules.push(nestedStyle)
+        styleRule.value.rules.push(nestedStyle)
         return
     }
-    nestedGroupRules.push({ ...rule, cascading: true, elemental: true, value: styleRule.value })
+    styleRule.value.rules.push({ ...rule, cascading: true, elemental: true, value: styleRule.value })
+    // At the top-level
     if (name === '@scope') {
         rule.value.rules.push(...styleSheetRules.filter(rule => rule !== styleRule), nestedStyle)
     } else {