How to set up prettier on vscode for css modules

Question

Prettier is formatting my module.css files strangely.

Expected:

.foo {
  @apply 
  border-2
  rounded
}

Actual (the first style is moved next to apply and a ; is added to the end

.foo {
  @apply border-2
  rounded;
}

All other files are formatted correctly.

It is detecting that the file is CSS.

Here is the vscode output after saving a module.css file

["INFO" - 4:12:25 PM] Formatting file:///src/components/Card/Card.module.css
["INFO" - 4:12:25 PM] Using config file at '/.prettierrc'
["INFO" - 4:12:25 PM] Using ignore file (if present) at /.prettierignore
["INFO" - 4:12:25 PM] File Info:
{
  "ignored": false,
  "inferredParser": "css"
}
["INFO" - 4:12:25 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 4:12:25 PM] Prettier Options:
{
  "filepath": "/src/components/Card/Card.module.css",
  "parser": "css",
  "trailingComma": "none",
  "semi": false,
  "singleQuote": true,
  "arrowParens": "always",
  "printWidth": 120
}
["INFO" - 4:12:25 PM] Formatting completed in 0.01ms.

Answer 1

You should separate class names in @apply with spaces instead of new lines as it is probably struggling to handle your invalid vanilla CSS (@apply is an extension upon the language):

.foo {
  @apply border-2 rounded;
}

Prettier Playground Link

Answer 2

you don`t have to use new lines in @apply you can use space like that:

.foo {
      @apply border-2 rounded; // don`t use new line
}