Whitespace removal is applied to `.css` files

[velin-deity]

What version of prettier-plugin-tailwindcss are you using?

Trying to update to version 0.6.4. but the issue is present on 0.6.0 as well.

What version of Tailwind CSS are you using?

3.4.4

What version of Node.js are you using?

20.10.0

What package manager are you using?

Yarn

What operating system are you using?

macOS

Reproduction URL

https://github.com/velin-deity/prettier-plugin-tailwind-reproduction

Describe your issue

prettier-plugin-tailwindcss changes how Prettier formats .css files. If I have a class declared like

.dropdown-content {
  @apply z-50
    min-w-[8rem]
    overflow-hidden
    rounded-radius-border-sm
    border-[1px]
    border-border-neutral-muted-normal
    bg-popover
    p-1;
}

Prettier will raise a warning due to the wrapped lines. In our project repository, we noticed this when trying to upgrade from 0.5.14 to 0.6.4. In the reproduction repository, however, I see the issue even in older versions (e.g. 0.5.12).

Expected behaviour: As described in the docs, the plugin should not affect CSS files.

[thecrypticace]

This plugin intentionally sorts classes in @apply blocks, removes duplicate tailwind classes, and removes whitespace.

That said, if you want to keep whitespace in CSS files but not everywhere else you can configure Prettier to do that by adding an overrides key:

{
  // …
  "overrides": [
    {
      "files": "*.css",
      "options": {
        "tailwindPreserveWhitespace": false
      }
    }
  ]
}

I'll update the readme to clarify that this plugin also sorts things in @apply.