lightningcss

lightningcss copied to clipboard

I have a file colors.module.css:

:root {
  --red: rgb(255, 0, 0);
  --blue: 0, 0, 255;
}

And a file title.module.css:

.redOnBlue {
  color: var(--red from "./colors.module.css");
  background-color: rgb(var(--blue from "./colors.module.css"));
}

Which is converted to the following CSS:

.d-HkJG_redOnBlue {
  color: var(--sE19ba_red);
  background-color: rgb(var(--wtJ_Ka));
}

As you can see, the second background-color property is wrong. This seems to happen when I put var(... from ...) stuff within rgb, rgba, hsl or hsla function calls (probably others too). I would expect it to generate background-color: rgb(var(--sE19ba_blue)).

I also made a full stackblitz repro. Couldn't get the dashed identifiers to work in Parcel so I used Vite.

(Why would I ever let out the rgb in a variable? So I can set the transparency with rgba(var(--theme-primary), 0.5).)