Skip to content

Invalid oklab() in production during CSS minification #17782

@oleksandr-rakomin

Description

@oleksandr-rakomin

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:
Image

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

Image

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:

Image

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions