Custom formatting breaks with combo of css & js configs

[clarityflowers]

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

v0.6.12

What version of Tailwind CSS are you using?

v3.5.3

What version of Node.js are you using?

v18.19.1

What package manager are you using?

npm

What operating system are you using?

macOS

Reproduction URL

https://github.com/didacticventures/tailwind-prettier-bug

Describe your issue

When a project includes a css tailwind config file with an @config for a legacy tailwind js file, formatting no longer seems to pick up custom variants, and also incorrectly sorts container queries.

I have this css file:

@import "tailwindcss";
@config "./tailwind.config.js"

@theme {  
  --color-mint-500: oklch(0.72 0.11 178);
}

In the example repo, this is how it formats

flex border border-mint-500 bg-red-500 lg:bg-red-500 @4xl:border

But as soon as I add even an empty tailwind.config.js…

module.exports = {
  theme: {},
};

it starts formatting like this:

border-mint-500 @4xl:border flex border bg-red-500 lg:bg-red-500

The styles still render as expected, so this seems to be a bug with the formatter and not with tailwind itself.

[thecrypticace]

You're missing a semicolon after the @config at rule:

@import "tailwindcss";
@config "./tailwind.config.js";
                           /* ^ this was missing */

@theme {  
  --color-mint-500: oklch(0.72 0.11 178);
}

If you run this stylesheet through the CLI you'll see that Tailwind CSS itself will error:

This shouldn't silently "fail" though. I'll work on surfacing the parse error in #369