Polyfill for CSS Mixins level 1, @function rule.

[kanashimia]

What would you want to propose?

Spec: https://www.w3.org/TR/css-mixins-1/
This one would be pretty useful and should be easy to polyfill.
Currently available in Chromium for testing.

Suggested solution

To implement this plugin one has to do something as follows:
Inline function contents, mangle local variable names, remember to handle inline media queries and nested function calls.

Additional context

Some examples:
https://una.im/5-css-functions/

With regards to how it resolves variables it is slightly weird.
Spec is in the early stages, I'm sure it will change in the future.

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

[romainmenke]

Hi @kanashimia,
Thank you for opening this issue.

I tried to create a plugin for this but got stuck.
I was working on this branch: https://github.com/csstools/postcss-plugins/compare/postcss-custom-functions--amiable-deer-0f9bf424a9

The issue is with typed arguments and typed return values.
How those work is completely novel to CSS and can't be polyfilled with a PostCSS plugin.

I did consider creating a plugin that only processes untyped functions.
But I am unsure how useful that would be.

[kanashimia]

Hello @romainmenke,
Thanks for answering and sharing the code, indeed there are complications around types.
I though they could be mimicked by specifying type of a variable using @property rule for some part, but it seems there are problems, with inherits for example not sure if it could be mimicked as is written in the spec.
I think this would be useful even without supporting typed arguments though.