[csswg-drafts] Better Declaration Sharing Syntax — @embed (#11668)

Karric has just created a new issue for https://github.com/w3c/csswg-drafts:

== Better Declaration Sharing Syntax — @embed ==
**Problem Statement:**
• The comma-separated syntax for sharing a declaration block is very awkward.

**Proposal:**
• A new @embed tag that allows one to name a declaration block so that its contents can be inserted into other blocks easily.

**Example:**
```
@embed boxPad {
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
}

@embed floatCenter {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
}

card {
embed: boxPad;
padding: 20px; /* will override the padding in boxPad */
}

dialog {
embed: boxPad, floatCenter; /* list of embed names */
}
```

**Behaviors**:
• An @embed block cannot have property embed; it will be ignored (no recursion allowed).
• If there are multiple embed blocks with the same name, the last instance is used (overwrite). This could arguably be per layer.
• The embed property can take a list of embed names.

**Implementation Notes**:
• embed is essentially a glorified find-replace that is done as early as possible in processing. Without recursion or accumulation, this step should be straightforward.
• The contents of the @embed blocks are inserted at the same 'line' as the embed property (like find-replace would), allowing properties written after to override in the expected way. Thus, if embed's value is a list, those blocks are inserted in that order and any overrides occur naturally.

**Debuggers**:
• Debuggers should still show the embed property and show which properties come from which embed, likely via a vertical layout with indentation, in addition to showing the original embed declaration blocks, similar to how the inheritance stack is currently shown.

**Other Notes**:
• The word embed was chosen to help convey function but can be discussed.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11668 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 7 February 2025 13:24:43 UTC