support for CSS Mixins & Functions

[scott-fryxell]

Description

Supporting mixing and functions in CSS is a critical step towards supporting a feature-rich web that doesn't require build steps. The full functionality, thoroughly explored in the CSS Working Group's proposal, has garnered wide interest in the developer community. It would enable a transition from preprocessors like Stylus and Sass to working directly with native CSS. This represents the next natural evolution in developer experience and tooling.

There is a great explainer that has wide interest in the developer community and would allow us to move on from stylus and SASS to working directly with CSS. This is the next natural evolution in developer experience and tooling`

Native Mixins and Functions:

• Mixins allow for reusable chunks of CSS declarations.
• Functions enable dynamic value calculations within CSS.
• Native support would mean these powerful features become part of the CSS standard, usable directly in browsers without preprocessing.

2. Replacing Preprocessors:

   • This would potentially eliminate the need for preprocessors like Sass and Stylus for many use cases.
   • Developers could write more dynamic and maintainable CSS without relying on additional tools.

3. Buildless Development:

   • Combined with other modern features like CSS nesting and JavaScript import maps, this proposal would support a buildless development workflow.
   • This streamlines the development process, reducing complexity and potential points of failure in the build pipeline.

4. Improved Developer Experience:

   • Direct browser support means faster development cycles and easier debugging.
   • The code written would be the code that runs, eliminating discrepancies between source and compiled CSS.

5. Performance Benefits:

   • Native implementation could potentially offer better performance than preprocessor-based solutions.
   • Reduced reliance on JavaScript for dynamic styling could lead to faster page loads and better runtime performance.

6. Standardization:

   • Bringing these features into the CSS standard would ensure consistent implementation across browsers.
   • It would also future-proof codebases that currently rely on preprocessors for these features.

7. Ecosystem Impact:

   • This change could significantly impact the CSS tooling ecosystem, potentially leading to new tools and workflows built around these native capabilities.

8. Learning Curve:

   • While beneficial in the long run, there might be a learning curve for developers used to preprocessor-specific syntax and behaviors.

This proposal represents a significant step in the evolution of web development, aligning with the trend of empowering native web technologies. It's part of a broader movement to simplify web development by reducing reliance on complex build tools and external preprocessors.

Specification

https://github.com/w3c/csswg-drafts/issues/9350#issuecomment-1939628591

Additional Signals

No response

[jgraham]

Am I correct in understanding that this is an early stage proposal, and doesn't yet have spec text with wide consensus, or tests?