CSS Custom Functions and Mixins #1752

What would you want to propose?

Spec: https://drafts.csswg.org/css-mixins/

The time has come. SCSS mixins are coming to CSS. Currently, this is hidden behind a feature flag in Chrome. We need a PostCSS preprocessor for it.

Suggested solution

Similar to https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media, I would recommend to create a postcss-custom-functions package that adds the functionality. In the future, the (polyfil at build time) could be removed. However, that will certainly take several years.

@function --shadow(--shadow-color <color> : inherit) {
  /* If --shadow-color argument isn't passed,
     or doesn't successfully parse as a <color>,
     try to use the --shadow-color *property*
     from the element instead */

  /* var(--shadow-color) refers to the --shadow-color parameter,
     rather than a custom property,
     but can still use a fallback value as normal */
  result: 2px 2px var(--shadow-color, black);
}

.foo {
  --shadow-color: blue;
  box-shadow: --shadow(); /* produces a blue shadow */
  /* or just */
  box-shadow: --shadow(blue);
}

Additional context

No response

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR