Invalid oklab() in production during CSS minification

[web-dev-it]

In development mode, everything always works correctly.

In production mode, everything works visually, but Lighthouse reports an
error: axe-core Error: Unable to parse color "oklab(1 0 5.96046e-8 / 0.08)"

The error occurs specifically when alpha transparency is applied to colors.

From this point on, the discussion will focus only on production mode, since everything works correctly in development.

@theme inline {
--color-color-dark: #030712;
--color-color-light: #ffffff;
}

Example:

className="bg-color-dark dark:bg-color-light"
npm run build
npm start
Result:

Adding transparency:
className="bg-color-dark/8 dark:bg-color-light/8"
npm run build
npm start
Result:

HOW TO FIX IT!
in:
@theme inline {
--color-color-dark: #030712;
--color-color-light: #ffffff;
}
remove - inline
result:
@theme {
--color-color-dark: #030712;
--color-color-light: #ffffff;
}

Now with transparency:
className="bg-color-dark/8 dark:bg-color-light/8"
npm run build
npm start
Result:

[wongjn]

The color value that causes the error is a valid CSS color value. It happens only in production because that's only where Lighting CSS is run. Lightning CSS is used for transiplation and optimization.

Consider opening an issue in the Axe repository, where the error is happening: https://github.com/dequelabs/axe-core

[philipp-spiess]

Hmm the 5.96046e-8 does appear somewhat unexpected indeed. It seems like this should be a 0 component instead haha. That said it does appear to work in browsers (thankfully) so this is both a wrong error during the linting (as it works) and an issue in lightningcss where this should be rounded down to 0 pretty sure:

-Lightning Playground

•