Note: this feature is not being prototyped from scratch. Chromium developers had already started an initial implementation of @mixin behind a flag (CSSMixins), but no I2P or dev trial announcement was ever sent to blink-dev. We are picking it up from there, having gained clarity on some open spec issues and are adjusting the implementation to match CSSWG resolutions. This Intent to Prototype formalizes and continues that work.
Contact emails [email protected]<mailto:[email protected]>, [email protected]<mailto:[email protected]>, [email protected]<mailto:[email protected]> Explainer https://css.oddbird.net/sasslike/mixins-functions<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcss.oddbird.net%2Fsasslike%2Fmixins-functions&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C55a8e74f4de9444bc33008dee28d3aaa%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639197293407743387%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=QgEYhCbgE77nkh2cCWRIOwC5aoWFm5Kk10K8rLa4kZU%3D&reserved=0> Specification https://drafts.csswg.org/css-mixins-1/#defining-mixins<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdrafts.csswg.org%2Fcss-mixins-1%2F&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C55a8e74f4de9444bc33008dee28d3aaa%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639197293407755689%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=ozSYyqbb015oakXoPbM8Sj8uzc79CKRFCqWyFyaxzjA%3D&reserved=0> Summary Defines a reusable, parameterized block of style declarations and nested style rules with the @mixin rule, then expands them in place within a style rule via @apply as if the mixin's contents had been written there directly. The mixin body puts the declarations and rules to emit inside an @result block, while any local custom properties used to compute them stay private and never reach the element; parameters can be typed and given defaults, and @result can contain conditional rules such as @supports and @media. This lets authors package consistent patterns - component styles, effects like gradient text, responsive shorthands - once and reuse them across a stylesheet without a CSS pre-processor. Blink component Blink>CSS<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fissues.chromium.org%2Fissues%3Fq%3Dcustomfield1222907%3A%2522Blink%253ECSS%2522&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C55a8e74f4de9444bc33008dee28d3aaa%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639197293407842527%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=ihSlYLcOSl9veT3H6HuSBqEfvclVq%2FxqVtCsRhwQV1g%3D&reserved=0> Web Feature ID mixin<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwebstatus.dev%2Ffeatures%2Fmixin&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C55a8e74f4de9444bc33008dee28d3aaa%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639197293407856009%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=Ek2xs9FOp70Mv7i82ECjW3Q5Ez6YOT1GNMf3FRLRoHk%3D&reserved=0> Motivation To reuse a consistent pattern across a stylesheet, whether component styles, effects like gradient text, or responsive shorthands, authors currently must either duplicate the same declarations and nested rules in every style rule that needs them, which drifts out of sync and is error prone, or reach for a CSS pre-processor such as Sass, which introduces a separate language and build step and cannot respond to the cascade at runtime. Custom properties share individual values but not whole blocks of declarations and rules and offer no way to parameterize a pattern or keep the local custom properties used to compute it private. The @mixin rule fills this gap natively, letting authors package such patterns once and expand them in place as if the contents had been written there directly. Initial public proposal https://github.com/w3c/csswg-drafts/issues/9350<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fw3c%2Fcsswg-drafts%2Fissues%2F9350&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C55a8e74f4de9444bc33008dee28d3aaa%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639197293407870698%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=jXiVwL%2FYwhvFCK%2BcLA%2FLc9DA5UgFelQM0fvJqPYIIKA%3D&reserved=0> Goals for experimentation None Requires code in //chrome? False Tracking bug https://issues.chromium.org/issues/406935599<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fissues.chromium.org%2Fissues%2F406935599&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C55a8e74f4de9444bc33008dee28d3aaa%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639197293407882666%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=6tCVilQylBYjsdJbMMYdf6Rvh2ARTxWmY%2F5M6c38esE%3D&reserved=0> Estimated milestones No milestones specified Link to entry on the Chrome Platform Status https://chromestatus.com/feature/5108022310469632?gate=5139569205968896<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fchromestatus.com%2Ffeature%2F5108022310469632%3Fgate%3D5139569205968896&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C55a8e74f4de9444bc33008dee28d3aaa%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639197293407894191%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=2Cro%2BpXGXdwy6agsHqnXtvliDpl87LVH2AZQsf0K9r4%3D&reserved=0> This intent message was generated by Chrome Platform Status<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fchromestatus.com%2F&data=05%7C02%7Cstephanie.zhang%40microsoft.com%7C55a8e74f4de9444bc33008dee28d3aaa%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C639197293407905546%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=K2XXZ8ysOzsN3LX3bx2EUV0iLMuIWphlPTt0i7pZWy8%3D&reserved=0>. -- 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 [email protected]. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CH3PR00MB2611B2C4E459E23D53A186F0ECC72%40CH3PR00MB2611.namprd00.prod.outlook.com.
