fix: enforce compatible plugins load order for proper interoperability (#372)

* fix: enforce compatible plugins load order for proper interoperability

* Pull in dedent

to make some tests nicer

* Add test

* Tweak test

* Add comments

* Update changelog

---------

Co-authored-by: Jordan Pittman <[email protected]>

Author: astrochemx

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 - Prevent Svelte files from breaking when there are duplicate classes ([#359](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/359))
+- Ensure `prettier-plugin-multiline-arrays` and `prettier-plugin-jsdoc` work used together with this plugin ([#372](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/372))
 
 ## [0.6.12] - 2025-05-30
 

package-lock.json

@@ -44,6 +44,7 @@
     "ast-types": "^0.14.2",
     "clear-module": "^4.1.2",
     "cpy-cli": "^5.0.0",
+    "dedent": "^1.6.0",
     "enhanced-resolve": "^5.17.1",
     "esbuild": "^0.19.8",
     "escalade": "^3.1.1",

package.json

@@ -128,7 +128,6 @@ async function loadBuiltinPlugins(): Promise<PluginDetails> {
 }
 
 async function loadThirdPartyPlugins(): Promise<PluginDetails> {
-  // Commented out plugins do not currently work with Prettier v3.0
   let [astro, liquid, marko, twig, pug, svelte] = await Promise.all([
     loadIfExistsESM('prettier-plugin-astro'),
     loadIfExistsESM('@shopify/prettier-plugin-liquid'),
@@ -153,18 +152,25 @@ async function loadThirdPartyPlugins(): Promise<PluginDetails> {
 }
 
 async function loadCompatiblePlugins() {
-  // Commented out plugins do not currently work with Prettier v3.0
+  // Plugins are loaded in a specific order for proper interoperability
   let plugins = [
-    '@ianvs/prettier-plugin-sort-imports',
-    '@trivago/prettier-plugin-sort-imports',
-    'prettier-plugin-organize-imports',
     'prettier-plugin-css-order',
-    'prettier-plugin-import-sort',
-    'prettier-plugin-jsdoc',
-    'prettier-plugin-multiline-arrays',
     'prettier-plugin-organize-attributes',
     'prettier-plugin-style-order',
+
+    // The following plugins must come *before* the jsdoc plugin for it to
+    // function correctly. Additionally `multiline-arrays` usually needs to be
+    // placed before import sorting plugins.
+    //
+    // https://github.com/electrovir/prettier-plugin-multiline-arrays#compatibility
+    'prettier-plugin-multiline-arrays',
+    '@ianvs/prettier-plugin-sort-imports',
+    '@trivago/prettier-plugin-sort-imports',
+    'prettier-plugin-import-sort',
+    'prettier-plugin-organize-imports',
     'prettier-plugin-sort-imports',
+
+    'prettier-plugin-jsdoc',
   ]
 
   // Load all the available compatible plugins up front

src/plugins.ts

@@ -1,4 +1,5 @@
 import { createRequire } from 'node:module'
+import dedent from 'dedent'
 import { test } from 'vitest'
 import type { TestEntry } from './utils.js'
 import { format, no, pluginPath, t, yes } from './utils.js'
@@ -467,6 +468,57 @@ import Custom from '../components/Custom.astro'
       ],
     },
   },
+
+  // This test ensures that our plugin works with the multiline array, JSDoc,
+  // and import sorting plugins when used together.
+  //
+  // The plugins actually have to be *imported* in a specific order for
+  // them to function correctly *together*.
+  {
+    plugins: [
+      'prettier-plugin-multiline-arrays',
+      '@trivago/prettier-plugin-sort-imports',
+      'prettier-plugin-jsdoc',
+    ],
+    options: {
+      multilineArraysWrapThreshold: 0,
+      importOrder: ['^@one/(.*)$', '^@two/(.*)$', '^[./]'],
+      importOrderSortSpecifiers: true,
+    },
+    tests: {
+      babel: [
+        [
+          dedent`
+            import './three'
+            import '@two/file'
+            import '@one/file'
+
+            /**
+              * - Position
+              */
+            const position = {}
+            const arr = ['a', 'b', 'c', 'd', 'e', 'f']
+          `,
+          dedent`
+            import '@one/file'
+            import '@two/file'
+            import './three'
+
+            /** - Position */
+            const position = {}
+            const arr = [
+              'a',
+              'b',
+              'c',
+              'd',
+              'e',
+              'f',
+            ]
+          `,
+        ],
+      ],
+    },
+  },
 ]
 
 for (const group of tests) {