css-color-5

[depoulo]

What would you want to propose?

While I know that css-color-4 is just being implemented, I already wish postcss-preset-env supported https://drafts.csswg.org/css-color-5/.

• color-mix
• color-contrast (css-color-6 now)
• relative colors

Suggested solution

🤷🏽‍♂️

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

[romainmenke]

🎉 shipped :

• color-mix-function: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function
• gradients-interpolation-method: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method

[t0byman]

Do you have an ETA when the relative colors polyfill (with full support for dynamic CSS Custom Properties) ships?
Would make me very happy because then I can change:

:root {
    --c-dark: #333;

    @supports (color: oklch(0 0 0)) {
        --c-dark: oklch(0.3211 0 0);
    }
}

@supports not (background-color: oklch(from #000 l c h / 0%)) {
    background-color: color-mod(var(--c-dark) a(80%));
}

@supports (background-color: oklch(from #000 l c h / 0%)) {
    background-color: oklch(from var(--c-dark) l c h / 80%);
}

to just:

:root {
    --c-dark: oklch(0.3211 0 0);
}

background-color: oklch(from var(--c-title) l c h / 80%);

[romainmenke]

@t0byman We will never ship support for variables because it is impossible to statically determine their value.

We are still waiting on the specification to finalize.
Currently we have no idea what we need to create.

[romainmenke]

🎉 shipped :

• https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax#readme

We now cover css-color-5 as much as possible.
We will open a new issue for css-color-6 and color-contrast when the specification progresses enough.

Thank you everyone for your interest in these features 🚀

[t0byman]

@t0byman We will never ship support for variables because it is impossible to statically determine their value.

We are still waiting on the specification to finalize. Currently we have no idea what we need to create.

Is it maybe possible to do it the the color-mod way?
By default, var() variables will be used if their corresponding Custom Properties are found in a :root rule, or if a fallback value is specified.

[romainmenke]

Is it maybe possible to do it the the color-mod way?
By default, var() variables will be used if their corresponding Custom Properties are found in a :root rule, or if a fallback value is specified.

That is arguably a bug, not a feature :/

It is only correct when people are using custom properties as named constant values.
Which is not the intended use case of custom properties.

It is not good for the community when postcss-preset-env rolls out features that are sometimes wrong.

If you want to use custom properties as named constant values you can use postcss-custom-properties (standalone, not through postcss-preset-env) to resolve all values.

[t0byman]

Thanks for the tip, I got it working!

module.exports = {
  plugins: {
    '@csstools/postcss-global-data': { files: ['assets/css/base/variables.css'] },
    'postcss-custom-properties': { preserve: false },
    '@csstools/postcss-relative-color-syntax': { preserve: true },
    'postcss-extend': {},
    'postcss-advanced-variables': {},
    'postcss-preset-env': {
      stage: 1,
      features: {
        'gradients-interpolation-method': false,
      },
    },
  },
};