Skip to content

Commit

Permalink
[css-mixins-1] CSSFunctionDeclarations, not CSSNestedDeclarations (#1…
Browse files Browse the repository at this point in the history
…1501)

The CSSNestedDeclarations rule does not quite work, since its style
attribute returns a CSSStyleProperties object.

Co-authored-by: Anders Hartvoll Ruud <[email protected]>
  • Loading branch information
andruud and Anders Hartvoll Ruud authored Jan 14, 2025
1 parent fe94b66 commit 02ad75a
Showing 1 changed file with 44 additions and 9 deletions.
53 changes: 44 additions & 9 deletions css-mixins-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ spec:css-properties-values-api; type:dfn; text:syntax component
spec:css-syntax-3; type:dfn; text:descriptor;
spec:css-values-4; type:dfn; text:keyword;
spec:css-values-4; type:dfn; text:identifier;
spec:cssom-1; type:dfn; text:specified order;
</pre>

<!-- Big Text: intro
Expand Down Expand Up @@ -547,7 +548,7 @@ interface CSSFunctionRule : CSSGroupingRule { };
While declarations may be specified directly within a ''@function'' rule,
they are not represented as such in the CSSOM.
Instead, consecutive segments of declarations
appear as if wrapped in {{CSSNestedDeclarations}} rules.
appear as if wrapped in {{CSSFunctionDeclarations}} rules.

Note: This also applies to the "leading" declarations in the ''@function'' rule,
i.e those that do not follow another nested rule.
Expand All @@ -568,26 +569,60 @@ Note: This also applies to the "leading" declarations in the ''@function'' rule,

<pre class='lang-css'>
@function --bar() {
/* CSSNestedDeclarations { */
/* CSSFunctionDeclarations { */
--x: 42;
result: var(--y);
/* } */
@media (width > 1000px) {
/* ... */
}
/* CSSNestedDeclarations { */
/* CSSFunctionDeclarations { */
--y: var(--x);
/* } */
}
</pre>
</div>

Issue: Should we indeed use {{CSSNestedDeclarations}} for this purpose?
The <code>style</code> attribute of the {{CSSNestedDeclarations}} rule
should probably not be a regular {{CSSStyleDeclaration}},
since only custom properties
and the '@function/result' descriptor
are relevant.

The {{CSSFunctionDeclarations}} Interface {#the-cssnestrule}
-----------------------------

The {{CSSFunctionDeclarations}} interface represents a run
of consecutive [=declarations=] within a ''@function'' rule.

<xmp class=idl>
[Exposed=Window]
interface CSSFunctionDescriptors : CSSStyleDeclaration {
attribute [LegacyNullToEmptyString] CSSOMString result;
};

[Exposed=Window]
interface CSSFunctionDeclarations : CSSRule {
[SameObject, PutForwards=cssText] readonly attribute CSSFunctionDescriptors style;
};
</xmp>

<div algorithm>
The <dfn attribute for=CSSFunctionDeclarations>style</dfn> attribute
must return a {{CSSFunctionDescriptors}} object for the rule,
with the following properties:

: [=CSSStyleDeclaration/computed flag=]
:: Unset
: [=CSSStyleDeclaration/readonly flag=]
:: Unset
: [=CSSStyleDeclaration/declarations=]
:: The declared declarations in the rule, in [=specified order=].
<span class=note>This includes any [=local variables=].</span>
: [=CSSStyleDeclaration/parent CSS rule=]
:: [=this=]
: [=CSSStyleDeclaration/owner node=]
:: Null
</div>

The {{CSSFunctionDeclarations}} rule, like {{CSSNestedDeclarations}},
[=serialize a CSS rule|serializes=] as if its [=CSS declaration block|declaration block=]
had been [=serialize a CSS declaration block|serialized=] directly.

Privacy Considerations {#privacy}
===============================================
Expand Down

0 comments on commit 02ad75a

Please sign in to comment.