This is a feature that is greatly desired by developers, and as such runs increased risk that whatever gets shipped first gets heavily used and then cannot be improved due to web compat. I think it’s premature to ship without signals from other engines and without a TAG review. We should have more time with this feature behind a flag.
Another signal for implementing behind a feature flag for now: https://blog.kizu.dev/intent-to-experiment-for-longer/ On Tuesday, February 25, 2025 at 4:26:25 AM UTC-8 and...@chromium.org wrote: > 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 > <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/c4083109-94f0-45ff-8455-094f41d998d3n%40chromium.org.
