- From: Romain Menke via GitHub <sysbot+gh@w3.org>
- Date: Sat, 15 Oct 2022 16:20:17 +0000
- To: public-css-archive@w3.org
@LeaVerou I didn't fully grasp this example before. Having the ability to encode transforms for the values passed to the shorthand seems really handy and powerful but I am unsure if it is needed. ```css @mixin --some-shorthand { /* Read <length> into --some-shorthand-padding and <color> into --some-shorthand-color */ syntax: padding "<length>", color "<color>"; @expands-to { padding: calc(10px + var(--some-shorthand-padding, 0); color: var(--some-shorthand-color, black); border: 1px solid var(--some-shorthand-color, transparent); &:hover { color: lighter(var(--some-shorthand-color, black)); } } } ``` I think you can achieve the same result with this : ```css @property --some-shorthand-padding { syntax: "<length>"; inherits: false; initial-value: 0; } @property --some-shorthand-color { syntax: "<color>"; inherits: false; initial-value: black; } @property --some-shorthand { syntax: "a" "b"; constituent-properties: --some-shorthand-padding --some-shorthand-color; values: purple-version / 20px purple; yellow-version / 30px yellow; } /* internal "API" */ .some-element { padding: calc(10px + var(--some-shorthand-padding, 0); color: var(--some-shorthand-color, black); border: 1px solid var(--some-shorthand-color, transparent); } /* user writes */ .some-element { --some-shorthand: yellow-version; } ``` ```css /* equivalent to */ .some-element { padding: calc(10px + var(--some-shorthand-padding, 0); color: var(--some-shorthand-color, black); border: 1px solid var(--some-shorthand-color, transparent); } /* user writes */ .some-element { --some-shorthand-padding: 30px; --some-shorthand-color: yellow; } ``` I have no idea how handy this is in practice and I would need to cook up some more realistic examples to be able to judge this. But I think it is really nice that creators of components can have complex internals and expose something as simple as : ```css .some-element { --some-shorthand: yellow-version; } ``` -- GitHub Notification of comment by romainmenke Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7879#issuecomment-1279776626 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Saturday, 15 October 2022 16:20:19 UTC