prettier: css module @value breaks when prettier puts each item on a new line

CSS modules supports multiline @values now (PR here), but you need a wrapping parens:

/* working multiline support syntax */
@value (value1,
  value 2,
  value 3,
  value 4,
  value 5) from "some-other-file.css";

However, Prettier doesn’t seem to do this out of the box, so:

/* Pre-formatted code */
@value value1, value 2, value 3, value 4, value 5 from "some-other-file.css";

becomes:

/* Formatted code from Prettier */
@value value1,
  value 2,
  value 3,
  value 4,
  value 5 from "some-other-file.css";

which doesn’t work.

@vjeux Could we get Prettier to add the parens to @values if they get formatted to multiline? The original problem (multiline support) got added to CSS modules, but since Prettier is handling formatting it seems like it the parens should be handled here.

Thanks for all the hard work!

I’m not seeing this anymore: playground

It still doesn’t add new lines, but it’s not mangling.

@value value1, value 2, value 3, value 4, value 5, value 6, value 7, value 8 from "some-other-file.css";

Becomes

@value value1, value 2, value 3, value 4, value 5, value 6, value 7, value 8 from "some-other-file.css";