Breaks with import assertions (assert { type: 'json' })

[jthrilly]

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

0.5.11

What version of Tailwind CSS are you using?

3.4.1

What version of Node.js are you using?

LTS

What package manager are you using?

pnpm

What operating system are you using?

macOS

Describe your issue

As per this issue: trivago/prettier-plugin-sort-imports#270

The sort imports plugin included by this plugin doesn't work properly with import assertions. My project does not use the import sorting plugin, so this should not impact me - but it does. Prettier crashes when trying to format any file with an import assertion with the error caused by the above plugin:

["ERROR" - 11:37:33] Error formatting document.
SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): "importAttributes", "importAssertions". (3:48)

[thecrypticace]

Note that we don't include any plugins — if you don't have the sorting plugin installed then support for it won't be loaded — but this is probably is related to the use of the babel parser elsewhere. I'll take a look. Thanks!

[jthrilly]

Note that we don't include any plugins — if you don't have the sorting plugin installed then support for it won't be loaded — but this is probably is related to the use of the babel parser elsewhere. I'll take a look. Thanks!

I completely understand and agree, which is why I was so surprised to be impacted by this. I am not using either @trivago/prettier-plugin-sort-imports or @ianvs/prettier-plugin-sort-imports in my project - they are installed as peer deps of prettier-plugin-tailwindcss.

My prettier config, for reference:

import { fileURLToPath } from "url";

/** @typedef {import("prettier").Config} PrettierConfig */
/** @typedef {import("prettier-plugin-tailwindcss").PluginOptions} TailwindConfig */

/** @type { PrettierConfig | TailwindConfig } */
const config = {
  plugins: [
    "prettier-plugin-tailwindcss",
  ],
  tailwindConfig: fileURLToPath(
    new URL("../../tooling/tailwind/fresco.ts", import.meta.url),
  ),
  tailwindFunctions: ["cn", "cva"],
  printWidth: 80,
  quoteProps: 'consistent',
  singleQuote: true,
};

export default config;

[thecrypticace]

@jthrilly Hey, any chance you could provide a reproduction? Like a file that always crashes or something? I'm testing this right now and it definitely works for me.

Also, can you provide your exact Node version? I'm using Node 18 but if you're using something different it might be related.

[jthrilly]

You're absolutely correct that this doesn't repro - I tried now with a fresh repository and things are working correctly.

I can only assume that because I was working in a monorepo the configuration changes I made to the tailwind package were not being propagated correctly until after I restarted/ran pnpm install again.

Really sorry for the noise! Thanks for all your work.