Next.js Discord

Discord Forum

Disable minification / conversion of CSS hsl() color values

Unanswered
xec posted this in #help-forum
Open in Discord
xecOP
I am using next.js 14.1 and when i run my project locally in dev mode everything works fine.

When i build for production, CSS color values get converted from hsl(x, x, x) format to rgb-hex #xxx format. (I've got some code that expects HSL format, which breaks in production)

Is there a way to disable this behavior?

I've looked at https://nextjs.org/docs/pages/building-your-application/configuring/post-css and I've tried to create a postcss.config.json file with all plugins disabled:

{
  "plugins": []
}


But I still get the same behavior.

I also tried swcMinify: false in next config without luck.

(Bonus question; how to make a reproducible demo/sandbox that uses production build?)

6 Replies

Western paper wasp
Can you say more on “I've got some code that expects HSL format”? How are you accesing the CSS values?
If you’re accessing something like myElement.style.backgroundColor this only returns styles that are set in the style= HTML attribute, not styles that are applied by CSS rules, so CSS minifications shouldn’t affect those.
If you’re using something like getComputedStyle(myElement).backgroundColor, it’s the browser, not next.js, that determines what the color format should be—the browser returns a rgb or rgba format to represent the “computed” colors
xecOP
Thanks for replying! :) I'm using getComputedStyle but reading the computed value of a custom property (css variable) .

When looking at the generated CSS file output, it's fine (untouched) in dev mode but hsl values get "minified" into hex when building for production, causing the issue.

my CSS looks something like this

:root {
  --my-color: hsl(120, 50%, 50%)
}


then accessed in JS with

getComputedStyle(element).getPropertyValue("--my-color")
so the css looks like expected (the hsl above) running in dev, but after next.js build what I get is something like

:root {
  --my-color: #xxxxxx;
}
Western paper wasp
oh got it that makes sense