Define style sheet as a rule instead of block contents

Author: cdoublev

lib/cssom/CSSFontFeatureValuesMap-impl.js

@@ -4,7 +4,7 @@ import { isFailure, isList } from '../utils/value.js'
 import { parseBlockContents, parseCSSDeclaration } from '../parse/parser.js'
 import root from '../rules/definitions.js'
 
-const features = root.rules.find(rule => rule.name === '@font-feature-values').value.rules
+const features = root.value.rules.find(rule => rule.name === '@font-feature-values').value.rules
 
 /**
  * @see {@link https://drafts.csswg.org/css-fonts-4/#cssfontfeaturevaluesmap}

lib/cssom/CSSFontFeatureValuesRule-impl.js

@@ -6,7 +6,7 @@ import { parseBlockContents } from '../parse/parser.js'
 import root from '../rules/definitions.js'
 import { toIDLAttribute } from '../utils/string.js'
 
-const features = root.rules.find(rule => rule.name === '@font-feature-values').value.rules
+const features = root.value.rules.find(rule => rule.name === '@font-feature-values').value.rules
 
 /**
  * @see {@link https://drafts.csswg.org/css-fonts-4/#cssfontfeaturevaluesrule}

lib/parse/arbitrary.js

@@ -53,10 +53,10 @@ function matchAnyValue(input, restricted, stops = []) {
  * @see {@link https://drafts.csswg.org/css-syntax-3/#typedef-block-contents}
  */
 function matchBlockContents(node) {
-    if (getRule(node)) {
-        return parser.parseBlockContents(node.input, node)
+    if (getRule(node).definition.name === '@sheet') {
+        return parser.parseStyleSheet(node.input, node)
     }
-    return parser.parseStyleSheet(node.input, node)
+    return parser.parseBlockContents(node.input, node)
 }
 
 /**

lib/parse/parser.js

@@ -213,10 +213,12 @@ function removeCSSRule(list, index) {
  * @returns {CSSRuleImpl|CSSFontFeatureValuesMapImpl}
  */
 function createCSSRule(node, name, prelude, value) {
+    const parentRule = getRule(node).value
+    const parentStyleSheet = getRoot(node).value
     const properties = {
         name,
-        parentRule: getRule(node)?.value,
-        parentStyleSheet: getRoot(node).value,
+        parentRule: parentRule === parentStyleSheet ? null : parentRule,
+        parentStyleSheet,
         prelude,
         value,
     }
@@ -288,20 +290,19 @@ function getDeclarationDefinition(context, name) {
  * @returns {object|null}
  */
 function getRuleDefinition(context, name, prelude, type) {
-    const contextDefinition = context.definition.value ?? context.definition
     if (name) {
         name = `@${name}`
         const alias = compatibility.rules.aliases.get(name)
         if (alias) {
             name = alias
         }
-        return contextDefinition.rules?.find(rule =>
+        return context.definition.value.rules?.find(rule =>
             !rule.qualified
             && (rule.name === name || rule.names?.includes(name))
             && (rule.prelude ? true : prelude.length === 0)
             && (rule.value ? 'block' : 'statement') === type)
     }
-    return contextDefinition.rules?.find(rule => rule.qualified)
+    return context.definition.value.rules?.find(rule => rule.qualified)
 }
 
 /**
@@ -319,8 +320,7 @@ function createContext(value) {
     if (CSSRule.isImpl(value)) {
         const { parentRule, parentStyleSheet } = value
         const context = createContext(parentRule ?? parentStyleSheet)
-        const contextDefinition = context.definition.value ?? context.definition
-        const definition = contextDefinition.rules.find(definition => cssom[definition.cssom].isImpl(value))
+        const definition = context.definition.value.rules.find(definition => cssom[definition.cssom].isImpl(value))
         return { ...context, context, definition, value }
     }
     if (CSSFontFeatureValuesMap.isImpl(value)) {
@@ -356,14 +356,13 @@ function createContext(value) {
     if (Array.isArray(value)) {
         return value.reduce(
             (context, name) => {
-                const contextDefinition = context.definition.value ?? context.definition
-                const definition = contextDefinition.rules.find(rule => rule.name === name)
+                const definition = context.definition.value.rules.find(rule => rule.name === name)
                 return { ...context, context, definition }
             },
             context)
     }
     // Assert: value is an Element
-    const definition = root.rules.find(definition => definition.qualified)
+    const definition = root.value.rules.find(definition => definition.qualified)
     return { ...context, context, definition }
 }
 
@@ -933,7 +932,7 @@ function parseCSSArbitrarySubstitution(value, context) {
     if (value.types[0] !== '<function>') {
         return null
     }
-    const { definition: { cascading, elemental } } = getRule(context) ?? { definition: {} }
+    const { definition: { cascading, elemental } } = getRule(context)
     for (const { cascade, definition, element, name } of substitutions.arbitrary) {
         if (!elemental && (element || (cascade && !cascading))) {
             continue

lib/parse/postprocess.js

@@ -972,7 +972,8 @@ function postParseLineNames(names, node) {
  * @returns {string}
  */
 function getMediaFeatureContextName(node) {
-    return getFunctionName(node) ?? getRuleName(node) ?? '@media'
+    const name = getFunctionName(node) ?? getRuleName(node)
+    return name === '@sheet' ? '@media' : name
 }
 
 /**

lib/rules/definitions.js

@@ -453,10 +453,12 @@ nestedGroupRuleNames.forEach(name => {
     }
 })
 
-const styleSheet = {
-    name: '<rule-list>',
-    rules: topLevelRules,
-    type: 'arbitrary',
+export default {
+    name: '@sheet',
+    type: 'rule',
+    value: {
+        name: '<rule-list>',
+        rules: topLevelRules,
+        type: 'arbitrary',
+    },
 }
-
-export default styleSheet

lib/utils/context.js

@@ -10,8 +10,7 @@ export const type = Symbol('context')
  */
 export function enterContext(node, name) {
     const { context } = node
-    const contextDefinition = getRule(node)?.definition.value ?? getRoot(node)
-    const definition = contextDefinition.rules.find(rule => rule.name === name)
+    const definition = getRule(node).definition.value.rules.find(rule => rule.name === name)
     return { ...context, context, definition }
 }
 

scripts/extract.js

@@ -1028,7 +1028,7 @@ function addRules(definitions = [], key) {
         if (aliases.has(name) || mappings.has(name)) {
             return
         }
-        const rule = findRule(name, root.rules)
+        const rule = findRule(name, root.value.rules)
         if (rule) {
             if (reportErrors && value && isUpdatedRule(name, value, rule)) {
                 reportError(key, name, `${name} has a new definition`)

scripts/interface.js

@@ -21,7 +21,7 @@ import root from '../lib/rules/definitions.js'
 
 const targetDir = path.join(import.meta.dirname, '..', 'lib', 'cssom')
 
-const { rules } = root
+const { value: { rules } } = root
 const fontFaceRule = rules.find(rule => rule.name === '@font-face')
 const functionRule = rules.find(rule => rule.name === '@function')
 const keyframeRule = rules.find(rule => rule.name === '@keyframes').value.rules.find(rule => rule.name === '@keyframe')