Contact emails andr...@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 <https://drafts.csswg.org/css-variables>, 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 Blink>CSS <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22> 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 - “sorely needed functionality for authors” <https://github.com/w3ctag/design-reviews/issues/1031#issuecomment-2637024845> - LeaVerou <https://github.com/LeaVerou> - Appeared as a missing feature in State of CSS 2024 <https://2024.stateofcss.com/en-US/usage/#css_missing_features>. 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 <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> ? Yes https://wpt.fyi/results/css/css-mixins - at-function-cssom.tentative.html <https://wpt.fyi/results/css/css-mixins/at-function-cssom.tentative.html?label=experimental&label=master&aligned> 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 <https://wpt.fyi/results/css/css-mixins/dashed-function-cycles.tentative.html?label=master&label=experimental&aligned> 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 Shipping on desktop 136 Shipping on Android 136 Shipping on WebView 136 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) <https://github.com/w3c/csswg-drafts/issues/11749> 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): - #11749 [css-mixins-1] Named argument passing? <https://github.com/w3c/csswg-drafts/issues/11749> - 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 <https://issues.chromium.org/issues/398887938> tracks this. - #10558 [css-mixins] <dashed-function> syntax seems invalid <https://github.com/w3c/csswg-drafts/issues/10558> - Editorial issue. The commenter seems satisfied now: “So this issue may therefore be considered fixed” <https://github.com/w3c/csswg-drafts/issues/10558#issuecomment-2255746650> . - #10006 [css-mixins] Allow mixins/functions to be called via custom properties <https://github.com/w3c/csswg-drafts/issues/10006> - We can choose to add this later; it does not affect the API shipping now. - #9992 Proposal: CSS Variable Groups <https://github.com/w3c/csswg-drafts/issues/9992> - Same as the previous issue. - #9990 [css-values][css-variables][css-mixins] Generic fallback syntax for IACVT values <https://github.com/w3c/csswg-drafts/issues/9990> - Same as the previous issue. - #10222 [css-mixins] Proposal: @like rule for repurposing page default styles <https://github.com/w3c/csswg-drafts/issues/10222> - Unrelated to CSS Functions. (Marked css-mixins since it has conceptual similarities with mixins.) - #11500 [css-values] Short-circuit if() evaluation <https://github.com/w3c/csswg-drafts/issues/11500> - Resolved, just needs a spec edit. - #11455 [css-values-5][css-mixins-1] Add an if-test for local variables <https://github.com/w3c/csswg-drafts/issues/11455> - Same as the previous issue. - #11190 [css-functions-mixins] Handling superfluous arguments <https://github.com/w3c/csswg-drafts/issues/11190> - Same as the previous issue. - #10562 [css-mixins] Should result be mandatory in @function? <https://github.com/w3c/csswg-drafts/issues/10562> - Same as the previous issue. - #9350 Proposal: Custom CSS Functions & Mixins <https://github.com/w3c/csswg-drafts/issues/9350> - 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 -- 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+unsubscr...@chromium.org. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKFBnUq_X_VvmWMobKTd_ypPA0SrL2VuKc%2BjVqqxiaoieEEFkw%40mail.gmail.com.
