Better Declaration Sharing Syntax — @embed

[Karric]

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.
• This could help reduce class markup in HTML, since that is the more common way to generalize/share styling.

[astearns]

@Karric please take a look at a parameterized version of your proposal above in https://css.oddbird.net/sasslike/mixins-functions/

[Crissov]

See #3714, #5629 and #9350, for instance.