After migration of postcss-preset-env from v6.7.0 to v7.4.1, how to add color-mod-function support ?

ghost commented 2 years ago

Reproduction link

No response

Bug description

Hi there, I am new to postcss plugins. I have to migrate postcss-preset-env from v6.7.0 to the latest v7.4.1 My postcss plugins stack for v6.7.0 looks like :-

                       const result = await postcss([
                              require('postcss-extend-rule')(),
                              require('postcss-advanced-variables')(),
                              require('postcss-preset-env')({
                                  stage: 0,
                                  features: {
                                      'color-mod-function': { unresolved: 'warn' },
                                  },
                              }),
                              require('postcss-atroot')(),
                              require('postcss-property-lookup')(),
                              require('postcss-nested')(),
                              require('postcss-hexrgba')(),
                              require('css-mqpacker')(),
                          ]).process(css, options);

When I bumped the version of postcss-preset-env to v7.4.1, I got to know that the color-mod-function support is removed. Could someone please suggest what should we use in place of it so that browser will recognize color-mod function.

i tried to have color-function in place of it but it is not working

Actual Behavior

No response

Expected Behavior

browser should recognize color-mod function

Can you reproduce it with `npx @csstools/csstools-cli <plugin-name> minimal-example.css`?

No response

`npx` Output

No response

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Preset Env

Plugin version

7.4.1

What OS are you experiencing this on?

macOS

Node Version

12

Validations

[X] Follow our Code of Conduct
[X] 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 bug?

[ ] I'm willing to open a PR

romainmenke commented 2 years ago

Hi @mycodedig

postcss-color-mod was deprecated because the specification died. This means that browsers will never add support for it.

This might help you get unstuck :

https://github.com/romainmenke/postcss-preset-env-migrations

It has two pieces :

npm package that contains the plugins you need
vscode extension to simplify updating your CSS source code.

The npm package will never be updated and is only intended to be used temporarily. This makes it possible to update postcss-preset-env today and then take the next few weeks to update your source code.

romainmenke commented 2 years ago

Closing as user was deleted.

tshakah commented 2 years ago

What is the alternative to color-mod?

romainmenke commented 2 years ago

These have become color-mix and relative color syntax

We hope to have PostCSS plugins for these at some point

csstools / postcss-plugins