Skip to content

Commit 02ad75a

Browse files
andruudAnders Hartvoll Ruud
andauthored
[css-mixins-1] CSSFunctionDeclarations, not CSSNestedDeclarations (w3c#11501)
The CSSNestedDeclarations rule does not quite work, since its style attribute returns a CSSStyleProperties object. Co-authored-by: Anders Hartvoll Ruud <andruud@google.com>
1 parent fe94b66 commit 02ad75a

File tree

1 file changed

+44
-9
lines changed

1 file changed

+44
-9
lines changed

css-mixins-1/Overview.bs

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ spec:css-properties-values-api; type:dfn; text:syntax component
2020
spec:css-syntax-3; type:dfn; text:descriptor;
2121
spec:css-values-4; type:dfn; text:keyword;
2222
spec:css-values-4; type:dfn; text:identifier;
23+
spec:cssom-1; type:dfn; text:specified order;
2324
</pre>
2425

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

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

569570
<pre class='lang-css'>
570571
@function --bar() {
571-
/* CSSNestedDeclarations { */
572+
/* CSSFunctionDeclarations { */
572573
--x: 42;
573574
result: var(--y);
574575
/* } */
575576
@media (width > 1000px) {
576577
/* ... */
577578
}
578-
/* CSSNestedDeclarations { */
579+
/* CSSFunctionDeclarations { */
579580
--y: var(--x);
580581
/* } */
581582
}
582583
</pre>
583584
</div>
584585

585-
Issue: Should we indeed use {{CSSNestedDeclarations}} for this purpose?
586-
The <code>style</code> attribute of the {{CSSNestedDeclarations}} rule
587-
should probably not be a regular {{CSSStyleDeclaration}},
588-
since only custom properties
589-
and the '@function/result' descriptor
590-
are relevant.
586+
587+
The {{CSSFunctionDeclarations}} Interface {#the-cssnestrule}
588+
-----------------------------
589+
590+
The {{CSSFunctionDeclarations}} interface represents a run
591+
of consecutive [=declarations=] within a ''@function'' rule.
592+
593+
<xmp class=idl>
594+
[Exposed=Window]
595+
interface CSSFunctionDescriptors : CSSStyleDeclaration {
596+
attribute [LegacyNullToEmptyString] CSSOMString result;
597+
};
598+
599+
[Exposed=Window]
600+
interface CSSFunctionDeclarations : CSSRule {
601+
[SameObject, PutForwards=cssText] readonly attribute CSSFunctionDescriptors style;
602+
};
603+
</xmp>
604+
605+
<div algorithm>
606+
The <dfn attribute for=CSSFunctionDeclarations>style</dfn> attribute
607+
must return a {{CSSFunctionDescriptors}} object for the rule,
608+
with the following properties:
609+
610+
: [=CSSStyleDeclaration/computed flag=]
611+
:: Unset
612+
: [=CSSStyleDeclaration/readonly flag=]
613+
:: Unset
614+
: [=CSSStyleDeclaration/declarations=]
615+
:: The declared declarations in the rule, in [=specified order=].
616+
<span class=note>This includes any [=local variables=].</span>
617+
: [=CSSStyleDeclaration/parent CSS rule=]
618+
:: [=this=]
619+
: [=CSSStyleDeclaration/owner node=]
620+
:: Null
621+
</div>
622+
623+
The {{CSSFunctionDeclarations}} rule, like {{CSSNestedDeclarations}},
624+
[=serialize a CSS rule|serializes=] as if its [=CSS declaration block|declaration block=]
625+
had been [=serialize a CSS declaration block|serialized=] directly.
591626

592627
Privacy Considerations {#privacy}
593628
===============================================

0 commit comments

Comments
 (0)