hsl(a)/rgb(a) values don't seem to work

[bcomnes]

@value backgroundColor: hsla(220, 13.0%, 18.0%, 1);
.background {
  background-color: backgroundColor
}

Seems to result in

background-color: hsla(220);

Is that a bug? Or am I doing something wrong?

[joeybaker]

hsla doesn't take percent. Try unit less numbers.

[bcomnes]

hsla doesn't take percent. Try unit less numbers.

They seem to take them in these examples: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl() Am I missing a critical detail?

Try unit less numbers.

Same output with unitless numbers. Also with rgb(a):

@value links: rgb(100, 148, 237);
// rgb(100);

Running: https://github.com/css-modules/css-modulesify/tree/values-support (but with css-modules-loader-core 1.0.0 from css-modules/css-modulesify#55).

[joeybaker]

Fair enough. Seems like a bug!

[bcomnes]

Fantastic work btw!

[geelen]

Fixed by css-modules/postcss-modules-values@c24881e (ignore the issue number in the commit message, need more ☕)

[lukehedger]

I'm using v1.1.1 via css-loader (with c24881e fix) but have come across a similar issue with commas...

This:

@value easing: cubic-bezier(.77, 0, .175, 1);

transition: all easing .5s;

compiles to:

transition: all cubic-bezier(.77 .5s;

In case it helps, another comma edge-case that also doesn't compile correctly:

@value retina: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);