Wrap declarations after/in nested group rules in CSSNestedDeclarations

cdoublev · cdoublev · commit 56fa29b4ada8 · 2024-12-19T15:52:40.000+01:00
Declarations are no longer hoisted or wrapped in a style rule. Some problem remains... 1. @font-feature-values, @function, @page, can also have declarations interleaved with rules, but CSSNestedDeclarations is currently associated to style properties. (w3c/csswg-drafts#11272) 2. "}" should be ignored in a "style" attribute value (a declaration block) but the algorithm has been replaced with the same algorithm than for a block of rules and declarations. (w3c/csswg-drafts#11113) 3. The current text wants declarations interleaved by an invalid at-rule or an invalid (qualified) rule error to be separated, but the reason is not stated and no browser does this. (w3c/csswg-drafts#11271) 4. The current text clearly has some other minor typos and is not clear about whether rules and declaration, or only rules, should be returned. (w3c/csswg-drafts#11017)
diff --git a/__tests__/stylesheet.js b/__tests__/stylesheet.js
diff --git a/lib/cssom/CSSColorProfileRule-impl.js b/lib/cssom/CSSColorProfileRule-impl.js
@@ -20,7 +20,7 @@ class CSSColorProfileRuleImpl extends CSSRuleImpl {
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
         const { prelude, value } = privateData
-        const { declarations } = parseBlockContents(value, this)
+        const [declarations = []] = parseBlockContents(value, this)
         this.name = serializeCSSComponentValue(prelude)
         descriptorNames.forEach(name => {
             const declaration = declarations.find(declaration => declaration.name === name)
diff --git a/lib/cssom/CSSConditionRule-impl.js b/lib/cssom/CSSConditionRule-impl.js
@@ -1,7 +1,7 @@
 
 const { implementation: CSSGroupingRuleImpl } = require('./CSSGroupingRule-impl.js')
+const CSSNestedDeclarations = require('./CSSNestedDeclarations.js')
 const CSSRuleList = require('./CSSRuleList.js')
-const CSSStyleRule = require('./CSSStyleRule.js')
 const { parseBlockContents } = require('../parse/parser.js')
 const { serializeCSSComponentValue } = require('../serialize.js')
 
@@ -17,16 +17,19 @@ class CSSConditionRuleImpl extends CSSGroupingRuleImpl {
      */
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
+        const { parentStyleSheet } = this
         const { prelude, value } = privateData
-        const { declarations, rules } = parseBlockContents(value, this)
+        const rules = parseBlockContents(value, this).map(rule => {
+            if (Array.isArray(rule) ) {
+                return CSSNestedDeclarations.createImpl(globalObject, undefined, {
+                    declarations: rule,
+                    parentRule: this,
+                    parentStyleSheet,
+                })
+            }
+            return rule
+        })
         this._condition = prelude
-        // Wrap declarations in nested style rule
-        if (0 < declarations.length) {
-            const data = { parentRule: this, parentStyleSheet: this.parentStyleSheet }
-            const styleRule = CSSStyleRule.createImpl(globalObject, undefined, data)
-            styleRule.style._declarations.push(...declarations)
-            rules.unshift(styleRule)
-        }
         this.cssRules = CSSRuleList.createImpl(globalObject, undefined, { rules })
     }
 
diff --git a/lib/cssom/CSSCounterStyleRule-impl.js b/lib/cssom/CSSCounterStyleRule-impl.js
@@ -22,7 +22,7 @@ class CSSCounterStyleRuleImpl extends CSSRuleImpl {
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
         const { prelude, value } = privateData
-        const { declarations } = parseBlockContents(value, this)
+        const [declarations = []] = parseBlockContents(value, this)
         this._name = serializeCSSComponentValue(prelude)
         declarations.forEach(({ name, value }) => this[`_${cssPropertyToIDLAttribute(name)}`] = value)
     }
diff --git a/lib/cssom/CSSFontFaceRule-impl.js b/lib/cssom/CSSFontFaceRule-impl.js
@@ -15,7 +15,7 @@ class CSSFontFaceRuleImpl extends CSSRuleImpl {
      */
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
-        const { declarations } = parseBlockContents(privateData.value, this)
+        const [declarations = []] = parseBlockContents(privateData.value, this)
         this.style = CSSFontFaceDescriptors.createImpl(globalObject, undefined, { declarations, parentRule: this })
     }
 
diff --git a/lib/cssom/CSSFontFeatureValuesMap-impl.js b/lib/cssom/CSSFontFeatureValuesMap-impl.js
@@ -26,7 +26,7 @@ class CSSFontFeatureValuesMapImpl {
         this.parentRule = parentRule
         this.parentStyleSheet = parentStyleSheet
         if (value) {
-            const { declarations } = parseBlockContents(value, this)
+            const [declarations = []] = parseBlockContents(value, this)
             const entries = declarations.map(({ name, value }) =>
                 [name, Array.isArray(value) ? [...value.map(component => component.value)] : [value.value]])
             this._map = new Map(entries)
diff --git a/lib/cssom/CSSFontFeatureValuesRule-impl.js b/lib/cssom/CSSFontFeatureValuesRule-impl.js
@@ -1,6 +1,7 @@
 
 const { serializeCSSComponentValueList, serializeCSSValue } = require('../serialize.js')
 const CSSFontFeatureValuesMap = require('./CSSFontFeatureValuesMap.js')
+const CSSNestedDeclarations = require('./CSSNestedDeclarations.js')
 const { implementation: CSSRuleImpl } = require('./CSSRule-impl.js')
 const { cssPropertyToIDLAttribute } = require('../utils/string.js')
 const { parseBlockContents } = require('../parse/parser.js')
@@ -22,7 +23,18 @@ class CSSFontFeatureValuesRuleImpl extends CSSRuleImpl {
         super(globalObject, args, privateData)
         const { parentStyleSheet } = this
         const { prelude, value } = privateData
-        const { declarations, rules } = parseBlockContents(value, this)
+        const contents = parseBlockContents(value, this)
+        const declarations = Array.isArray(contents[0]) ? contents.shift() : []
+        const rules = contents.map(rule => {
+            if (Array.isArray(rule) ) {
+                return CSSNestedDeclarations.createImpl(globalObject, undefined, {
+                    declarations,
+                    parentRule: this,
+                    parentStyleSheet,
+                })
+            }
+            return rule
+        })
         this.fontFamily = serializeCSSComponentValueList(prelude)
         declarations.forEach(declaration =>
             this[cssPropertyToIDLAttribute(declaration.name)] = serializeCSSValue(declaration))
diff --git a/lib/cssom/CSSFontPaletteValuesRule-impl.js b/lib/cssom/CSSFontPaletteValuesRule-impl.js
@@ -20,7 +20,7 @@ class CSSFontPaletteValuesRuleImpl extends CSSRuleImpl {
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
         const { prelude, value } = privateData
-        const { declarations } = parseBlockContents(value, this)
+        const [declarations = []] = parseBlockContents(value, this)
         this.name = serializeCSSComponentValue(prelude)
         descriptorNames.forEach(name => {
             const declaration = declarations.find(declaration => declaration.name === name)
diff --git a/lib/cssom/CSSFunctionRule-impl.js b/lib/cssom/CSSFunctionRule-impl.js
@@ -1,5 +1,6 @@
 
 const { implementation: CSSGroupingRuleImpl } = require('./CSSGroupingRule-impl.js')
+const CSSNestedDeclarations = require('./CSSNestedDeclarations.js')
 const CSSRuleList = require('./CSSRuleList.js')
 const { parseBlockContents } = require('../parse/parser.js')
 const { serializeCSSComponentValueList } = require('../serialize.js')
@@ -16,8 +17,18 @@ class CSSFunctionRuleImpl extends CSSGroupingRuleImpl {
      */
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
+        const { parentStyleSheet } = this
         const { prelude, value } = privateData
-        const { rules } = parseBlockContents(value, this)
+        const rules = parseBlockContents(value, this).map(rule => {
+            if (Array.isArray(rule) ) {
+                return CSSNestedDeclarations.createImpl(globalObject, undefined, {
+                    declarations: rule,
+                    parentRule: this,
+                    parentStyleSheet,
+                })
+            }
+            return rule
+        })
         this._prelude = serializeCSSComponentValueList(prelude)
         this.cssRules = CSSRuleList.createImpl(globalObject, undefined, { rules })
     }
diff --git a/lib/cssom/CSSKeyframeRule-impl.js b/lib/cssom/CSSKeyframeRule-impl.js
@@ -23,7 +23,7 @@ class CSSKeyframeRuleImpl extends CSSRuleImpl {
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
         const { prelude, value } = privateData
-        const { declarations } = parseBlockContents(value, this)
+        const [declarations = []] = parseBlockContents(value, this)
         this._keyText = prelude
         this.style = CSSKeyframeProperties.createImpl(globalObject, undefined, { declarations, parentRule: this })
     }
diff --git a/lib/cssom/CSSKeyframesRule-impl.js b/lib/cssom/CSSKeyframesRule-impl.js
@@ -42,7 +42,7 @@ class CSSKeyframesRuleImpl extends CSSRuleImpl {
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
         const { prelude, value } = privateData
-        const { rules } = parseBlockContents(value, this)
+        const rules = parseBlockContents(value, this)
         this._name = prelude
         this.cssRules = CSSRuleList.createImpl(globalObject, undefined, { rules })
     }
diff --git a/lib/cssom/CSSLayerBlockRule-impl.js b/lib/cssom/CSSLayerBlockRule-impl.js
@@ -1,7 +1,7 @@
 
 const { implementation: CSSGroupingRuleImpl } = require('./CSSGroupingRule-impl')
+const CSSNestedDeclarations = require('./CSSNestedDeclarations.js')
 const CSSRuleList = require('./CSSRuleList.js')
-const CSSStyleRule = require('./CSSStyleRule.js')
 const { parseBlockContents } = require('../parse/parser')
 const { serializeCSSComponentValue } = require('../serialize')
 
@@ -17,16 +17,19 @@ class CSSLayerBlockRuleImpl extends CSSGroupingRuleImpl {
      */
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
+        const { parentStyleSheet } = this
         const { prelude, value } = privateData
-        const { declarations, rules } = parseBlockContents(value, this)
+        const rules = parseBlockContents(value, this).map(rule => {
+            if (Array.isArray(rule) ) {
+                return CSSNestedDeclarations.createImpl(globalObject, undefined, {
+                    declarations: rule,
+                    parentRule: this,
+                    parentStyleSheet,
+                })
+            }
+            return rule
+        })
         this.name = serializeCSSComponentValue(prelude)
-        // Wrap declarations in nested style rule
-        if (0 < declarations.length) {
-            const data = { parentRule: this, parentStyleSheet: this.parentStyleSheet }
-            const styleRule = CSSStyleRule.createImpl(globalObject, undefined, data)
-            styleRule.style._declarations.push(...declarations)
-            rules.unshift(styleRule)
-        }
         this.cssRules = CSSRuleList.createImpl(globalObject, undefined, { rules })
     }
 
diff --git a/lib/cssom/CSSMarginRule-impl.js b/lib/cssom/CSSMarginRule-impl.js
@@ -16,7 +16,7 @@ class CSSMarginRuleImpl extends CSSRuleImpl {
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
         const { name, value } = privateData
-        const { declarations } = parseBlockContents(value, this)
+        const [declarations = []] = parseBlockContents(value, this)
         this.name = name
         this.style = CSSMarginDescriptors.createImpl(globalObject, undefined, { declarations, parentRule: this })
     }
diff --git a/lib/cssom/CSSNestedDeclarations-impl.js b/lib/cssom/CSSNestedDeclarations-impl.js
@@ -0,0 +1,35 @@
+
+const { implementation: CSSRuleImpl } = require('./CSSRule-impl.js')
+const CSSStyleDeclaration = require('./CSSStyleDeclaration.js')
+
+/**
+ * @see {@link https://drafts.csswg.org/css-nesting-1/#cssnesteddeclarations}
+ */
+class CSSNestedDeclarationsImpl extends CSSRuleImpl {
+
+    /**
+     * @param {DocumentOrShadowRoot} globalObject
+     * @param {*[]} args
+     * @param {object} privateData
+     */
+    constructor(globalObject, args, privateData) {
+        super(globalObject, args, privateData)
+        // https://github.com/w3c/csswg-drafts/issues/11272
+        this.style = CSSStyleDeclaration.create(globalObject, undefined, {
+            declarations: privateData.declarations,
+            parentRule: this,
+        })
+    }
+
+    /**
+     * @returns {string}
+     * @see {@link https://drafts.csswg.org/cssom-1/#dom-cssrule-csstext}
+     */
+    get cssText() {
+        return this.style.cssText
+    }
+}
+
+module.exports = {
+    implementation: CSSNestedDeclarationsImpl,
+}
diff --git a/lib/cssom/CSSNestedDeclarations.webidl b/lib/cssom/CSSNestedDeclarations.webidl
@@ -0,0 +1,8 @@
+
+// https://drafts.csswg.org/css-nesting-1/#cssnesteddeclarations
+[Exposed=Window]
+interface CSSNestedDeclarations : CSSRule {
+    // https://github.com/w3c/csswg-drafts/issues/11272
+    //[SameObject, PutForwards=cssText] readonly attribute CSSStyleProperties style;
+    [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
+};
diff --git a/lib/cssom/CSSPageRule-impl.js b/lib/cssom/CSSPageRule-impl.js
@@ -1,6 +1,7 @@
 
 const { parseBlockContents, parseCSSGrammar } = require('../parse/parser.js')
 const { implementation: CSSGroupingRuleImpl } = require('./CSSGroupingRule-impl')
+const CSSNestedDeclarations = require('./CSSNestedDeclarations.js')
 const CSSPageDescriptors = require('./CSSPageDescriptors.js')
 const CSSRuleList = require('./CSSRuleList.js')
 const { serializeCSSComponentValue } = require('../serialize.js')
@@ -17,8 +18,20 @@ class CSSPageRuleImpl extends CSSGroupingRuleImpl {
      */
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
+        const { parentStyleSheet } = this
         const { prelude, value } = privateData
-        const { declarations, rules } = parseBlockContents(value, this)
+        const contents = parseBlockContents(value, this)
+        const declarations = Array.isArray(contents[0]) ? contents.shift() : []
+        const rules = contents.map(rule => {
+            if (Array.isArray(rule) ) {
+                return CSSNestedDeclarations.createImpl(globalObject, undefined, {
+                    declarations: rule,
+                    parentRule: this,
+                    parentStyleSheet,
+                })
+            }
+            return rule
+        })
         this._selectors = prelude
         this.style = CSSPageDescriptors.createImpl(globalObject, undefined, { declarations, parentRule: this })
         this.cssRules = CSSRuleList.createImpl(globalObject, undefined, { rules })
diff --git a/lib/cssom/CSSPositionTryRule-impl.js b/lib/cssom/CSSPositionTryRule-impl.js
@@ -17,7 +17,7 @@ class CSSPositionTryRuleImpl extends CSSRuleImpl {
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
         const { prelude, value } = privateData
-        const { declarations } = parseBlockContents(value, this)
+        const [declarations = []] = parseBlockContents(value, this)
         this.name = serializeCSSComponentValue(prelude)
         this.style = CSSPositionTryDescriptors.createImpl(globalObject, undefined, { declarations, parentRule: this })
     }
diff --git a/lib/cssom/CSSPropertyRule-impl.js b/lib/cssom/CSSPropertyRule-impl.js
@@ -17,7 +17,7 @@ class CSSPropertyRuleImpl extends CSSRuleImpl {
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
         const { prelude, value } = privateData
-        const { declarations } = parseBlockContents(value, this)
+        const [declarations = []] = parseBlockContents(value, this)
         this.name = serializeCSSComponentValue(prelude)
         declarations.forEach(({ name, value }) => {
             let attribute = cssPropertyToIDLAttribute(name)
diff --git a/lib/cssom/CSSScopeRule-impl.js b/lib/cssom/CSSScopeRule-impl.js
@@ -1,22 +1,11 @@
 
-const { list, omitted } = require('../values/value.js')
 const { implementation: CSSGroupingRuleImpl } = require('./CSSGroupingRule-impl.js')
+const CSSNestedDeclarations = require('./CSSNestedDeclarations.js')
 const CSSRuleList = require('./CSSRuleList.js')
-const CSSStyleRule = require('./CSSStyleRule.js')
 const { isOmitted } = require('../utils/value.js')
 const { parseBlockContents } = require('../parse/parser.js')
 const { serializeCSSComponentValueList } = require('../serialize.js')
 
-const colon = { types: ['<delimiter-token>'], value: ':' }
-const scope = { types: ['<ident-token>'], value: 'scope' }
-const subclassSelector = list([colon, scope], '', ['<pseudo-class-selector>', '<subclass-selector>'])
-const subclassSelectorList = list([subclassSelector], '')
-const compound = list([omitted, subclassSelectorList], '', ['<compound-selector>'])
-const complexUnit = list([compound, list([], '')], '', ['<complex-selector-unit>'])
-const complexSelector = list([complexUnit, list()], ' ', ['<complex-selector>'])
-const relativeSelector = list([omitted, complexSelector], ' ', ['<relative-selector>'])
-const relativeSelectorList = list([relativeSelector], ',', ['<relative-selector-list>'])
-
 /**
  * @see {@link https://drafts.csswg.org/css-cascade-6/#cssscoperule}
  */
@@ -29,8 +18,19 @@ class CSSScopeRuleImpl extends CSSGroupingRuleImpl {
      */
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
+        const { parentStyleSheet } = this
         const { prelude, value } = privateData
-        const { declarations, rules } = parseBlockContents(value, this)
+        const rules = parseBlockContents(value, this).map(rule => {
+            if (Array.isArray(rule) ) {
+                return CSSNestedDeclarations.createImpl(globalObject, undefined, {
+                    declarations: rule,
+                    parentRule: this,
+                    parentStyleSheet,
+                })
+            }
+            return rule
+        })
+        this.cssRules = CSSRuleList.createImpl(globalObject, undefined, { rules })
         if (isOmitted(prelude)) {
             this.start = null
             this.end = null
@@ -39,18 +39,6 @@ class CSSScopeRuleImpl extends CSSGroupingRuleImpl {
             this.start = isOmitted(start) ? null : serializeCSSComponentValueList(start.value)
             this.end = isOmitted(end) ? null : serializeCSSComponentValueList(end[1].value)
         }
-        // Wrap declarations in nested style rule
-        if (0 < declarations.length) {
-            const data = {
-                parentRule: this,
-                parentStyleSheet: this.parentStyleSheet,
-                prelude: relativeSelectorList,
-            }
-            const styleRule = CSSStyleRule.createImpl(globalObject, undefined, data)
-            styleRule.style._declarations.push(...declarations)
-            rules.unshift(styleRule)
-        }
-        this.cssRules = CSSRuleList.createImpl(globalObject, undefined, { rules })
     }
 
     /**
diff --git a/lib/cssom/CSSStartingStyleRule-impl.js b/lib/cssom/CSSStartingStyleRule-impl.js
@@ -1,7 +1,7 @@
 
 const { implementation: CSSGroupingRuleImpl } = require('./CSSGroupingRule-impl')
+const CSSNestedDeclarations = require('./CSSNestedDeclarations.js')
 const CSSRuleList = require('./CSSRuleList.js')
-const CSSStyleRule = require('./CSSStyleRule.js')
 const { parseBlockContents } = require('../parse/parser.js')
 
 /**
@@ -16,14 +16,17 @@ class CSSStartingStyleRuleImpl extends CSSGroupingRuleImpl {
      */
     constructor(globalObject, args, privateData) {
         super(globalObject, args, privateData)
-        const { declarations, rules } = parseBlockContents(privateData.value, this)
-        // Wrap declarations in nested style rule
-        if (0 < declarations.length) {
-            const data = { parentRule: this, parentStyleSheet: this.parentStyleSheet }
-            const styleRule = CSSStyleRule.createImpl(globalObject, undefined, data)
-            styleRule.style._declarations.push(...declarations)
-            rules.unshift(styleRule)
-        }
+        const { parentStyleSheet } = this
+        const rules = parseBlockContents(privateData.value, this).map(rule => {
+            if (Array.isArray(rule) ) {
+                return CSSNestedDeclarations.createImpl(globalObject, undefined, {
+                    declarations: rule,
+                    parentRule: this,
+                    parentStyleSheet,
+                })
+            }
+            return rule
+        })
         this.cssRules = CSSRuleList.createImpl(globalObject, undefined, { rules })
     }
 
diff --git a/lib/cssom/CSSStyleDeclaration-impl.js b/lib/cssom/CSSStyleDeclaration-impl.js
diff --git a/lib/cssom/CSSStyleRule-impl.js b/lib/cssom/CSSStyleRule-impl.js
diff --git a/lib/cssom/CSSViewTransitionRule-impl.js b/lib/cssom/CSSViewTransitionRule-impl.js
diff --git a/lib/cssom/index.js b/lib/cssom/index.js
diff --git a/lib/parse/parser.js b/lib/parse/parser.js

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ class CSSCounterStyleRuleImpl extends CSSRuleImpl {`
`22`	`22`	`constructor(globalObject, args, privateData) {`
`23`	`23`	`super(globalObject, args, privateData)`
`24`	`24`	`const { prelude, value } = privateData`
`25`		`- const { declarations } = parseBlockContents(value, this)`
	`25`	`+ const [declarations = []] = parseBlockContents(value, this)`
`26`	`26`	`this._name = serializeCSSComponentValue(prelude)`
`27`	`27`	declarations.forEach(({ name, value }) => this[`_${cssPropertyToIDLAttribute(name)}`] = value)
`28`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ class CSSFontFaceRuleImpl extends CSSRuleImpl {`
`15`	`15`	`*/`
`16`	`16`	`constructor(globalObject, args, privateData) {`
`17`	`17`	`super(globalObject, args, privateData)`
`18`		`- const { declarations } = parseBlockContents(privateData.value, this)`
	`18`	`+ const [declarations = []] = parseBlockContents(privateData.value, this)`
`19`	`19`	`this.style = CSSFontFaceDescriptors.createImpl(globalObject, undefined, { declarations, parentRule: this })`
`20`	`20`	`}`
`21`	`21`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ class CSSKeyframeRuleImpl extends CSSRuleImpl {`
`23`	`23`	`constructor(globalObject, args, privateData) {`
`24`	`24`	`super(globalObject, args, privateData)`
`25`	`25`	`const { prelude, value } = privateData`
`26`		`- const { declarations } = parseBlockContents(value, this)`
	`26`	`+ const [declarations = []] = parseBlockContents(value, this)`
`27`	`27`	`this._keyText = prelude`
`28`	`28`	`this.style = CSSKeyframeProperties.createImpl(globalObject, undefined, { declarations, parentRule: this })`
`29`	`29`	`}`