Intent to Ship: CSS Custom Functions (@function)
Anders Hartvoll Ruud
Contact emails
and...@chromium.org, se...@chromium.org
Explainer
https://css.oddbird.net/sasslike/mixins-functions
Note: the explainer includes a description of mixins as well. This intent covers custom functions (@function) only.
Specification
https://drafts.csswg.org/css-mixins-1
Note: despite its shortname (css-mixins), the spec currently describes custom functions only.
Summary
Custom Functions are similar to custom properties, but instead of returning a single fixed value, it returns a value based on other custom properties, parameters, and conditionals.
Example: Custom light-dark function:
@function --light-dark(--light, --dark) {
result: var(--light);
@media (prefers-color-scheme: dark) {
result: var(--dark);
}
}
div {
background-image: --light-dark(black-logo.png, white-logo.png);
}
Blink component
TAG review
https://github.com/w3ctag/design-reviews/issues/1031
TAG review status
Pending
Risks
Interoperability and Compatibility
None
Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1148)
WebKit: No signal (https://github.com/WebKit/standards-positions/issues/437)
Web developers: Positive
(Dug up what I could find per goo.gle/developer-signals):
https://medium.com/css-magic/custom-css-functions-the-next-big-leap-in-styling-5acbd69f5526
https://johannesodland.github.io/2024/12/12/web-wish-12-custom-css-functions.html
Appeared as a missing feature in State of CSS 2024.
Other signals:
WebView application risks
None
Debuggability
The Devtools team is working on “basic support” for @function: https://docs.google.com/document/d/17UCa0XDXAG9EBx18w1fXAA9SL3V9Lr4vTptaXYyE1CA/
Unfortunately that doc requires @google.com to access, but “basic support” primarily means that callsites can be clicked, you’ll be taken to the relevant function, and you’ll be able to edit the contents of the function.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
Yes
Is this feature fully tested by web-platform-tests?
Yes
https://wpt.fyi/results/css/css-mixins
at-function-cssom.tentative.html is marked tentative because the spec is currently missing a few obvious parts from the API.
The subtest "Indexed property getter" is failing due to a Bindings bug. This is an existing issue (likely low impact) that's unrelated to Custom Functions. crbug.com/333965945
dashed-function-cycles.tentative.html is marked tentative because the spec has not yet caught up with the resolution in https://github.com/w3c/csswg-drafts/issues/11500.
In both cases, I’ll make sure we get these things edited so we can remove the .tentative suffixes before shipping.
I do not plan to fix crbug.com/333965945 before shipping, which means that a failure on "Indexed property getter" is to be expected. I will not ship with any other test failures; unexpected red boxes on wpt.fyi may be considered temporary, usually due to Canary not having picked up the latest changes yet.
Flag name on about://flags
CSSFunctions
Finch feature name
CSSFunctions
Requires code in //chrome?
False
Tracking bug
https://issues.chromium.org/issues/325504770
Estimated milestones
Anticipated spec changes
At this point, I anticipate only one real spec change: disallowing argument values that begin with two dashes (‘--’). This is to make #11749 (named arguments) possible in the future without compat concerns.
All other issues are not interesting in terms of compat risk.
Full list (only the top one being interesting):
This can be added later. However, we should reserve space for this in the syntax immediately, to avoid compat issues in the future. Issue 398887938 tracks this.
Editorial issue. The commenter seems satisfied now: “So this issue may therefore be considered fixed”.
#10006 [css-mixins] Allow mixins/functions to be called via custom properties
We can choose to add this later; it does not affect the API shipping now.
Same as the previous issue.
#9990 [css-values][css-variables][css-mixins] Generic fallback syntax for IACVT values
Same as the previous issue.
#10222 [css-mixins] Proposal: @like rule for repurposing page default styles
Unrelated to CSS Functions. (Marked css-mixins since it has conceptual similarities with mixins.)
Resolved, just needs a spec edit.
#11455 [css-values-5][css-mixins-1] Add an if-test for local variables
Same as the previous issue.
#11190 [css-functions-mixins] Handling superfluous arguments
Same as the previous issue.
#10562 [css-mixins] Should result be mandatory in @function?
Same as the previous issue.
Same as the previous issue.
Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/5179721933651968?gate=5074532782309376
Links to previous Intent discussions
Intent to Prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/b-BTxKD-Ldc/m/1pyobjq7AQAJ
Alan Stearns
Another signal for implementing behind a feature flag for now: https://blog.kizu.dev/intent-to-experiment-for-longer/
Anders Hartvoll Ruud
Panos Astithas
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKFBnUofT%2BKD_b7r28JUJRdUgCs9HJaFhStgZsg8QyTUfJgR3Q%40mail.gmail.com.