Unexpected `Unknown feature` warning

[equinusocio]

Hello, I'm disabling the oklab-function in my config, and recently I'm getting a warning that the feature doesn't exist. It's suggesting to use lab-function which is a different one.

[next:dev] (1:1) postcss-preset-env: Unknown feature: "postcss-oklab-function", did you mean: "lab-function"

My postcss config:

import postcssMixins from 'postcss-mixins';

{
  plugins: {
    'postcss-import': {},
    'postcss-replace': {
      pattern: /token\(.*?--([^\s]+?)\)/gi,
      data: tokens,
    },
    'postcss-preset-env': {
      stage: 0,
      features: {
        'logical-properties-and-values': false,
        'prefers-color-scheme-query': false,
        'postcss-oklab-function': false,
        'gap-properties': false,
        'cascade-layers': false,
      },
      insertAfter: {
        'custom-media-queries': postcssMixins,
      },
    },
    'postcss-mixins': {},
    cssnano: {
      preset: [
        'default',
        {
          discardComments: {
            removeAll: true,
          },
        },
      ],
    },
  }
}

I'm getting this warning in every file where I use oklch colors

[romainmenke]

Hi @equinusocio,

You can find the feature name here : https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md

The feature name is : oklab-function

I will need to check if we can make it suggest that correctly.

---

You should move 'postcss-mixins': {}, up in your config.

It's better to have non-standard features first, even with PostCSS 8 and later.

---

prefers-color-scheme-query This won't be enabled by default in recent versions of postcss-preset-env, so you can remove this override.

[romainmenke]

@equinusocio,

I am also a bit curious why you are disabling the oklch|oklab plugin.

Is there a specific issue you encountered?

[equinusocio]

the above is an old configuration i'm fixing. Then I'll update it because I think there is no need to disable features manually. We just use browserslist. I guess the following will work:

  plugins: {
    'postcss-mixins': {},
    'postcss-import': {},
    'postcss-replace': {
      pattern: /token\(.*?--([^\s]+?)\)/gi,
      data: tokens,
    },
    'postcss-preset-env': {},
    cssnano: {
      preset: [
        'default',
        {
          discardComments: {
            removeAll: true,
          },
        },
      ],
    },
  },

I think the above config comes from places where the browsers list can’t be set and the only way to disable invasive transformations is by doing it manually in the config since those features are widely supported now.

[romainmenke]

 plugins: {
    // make it a single stylesheet first
    'postcss-import': {},
    // string-level find/replace second
    'postcss-replace': {
      pattern: /token\(.*?--([^\s]+?)\)/gi,
      data: tokens,
    },
    // non-standard scss like things
    'postcss-mixins': {},
    // polyfills and transpiling
    'postcss-preset-env': {},
    // minifier
    cssnano: {
      preset: [
        'default',
        {
          discardComments: {
            removeAll: true,
          },
        },
      ],
    },
  },

[equinusocio]

by renaming the feature it works. Thanks!

[romainmenke]

You're welcome!

Thank you for reporting this.
We've released a new version that will suggest multiple feature names when something unknown is entered.

That should make it easier to get unstuck :)