Merge branch 'main' into add-support-for-callable-template-literals

Author: thecrypticace

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- Don't augment global Prettier `ParserOptions` and `RequiredOptions` types ([#354](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/354))
+- Drop support for `prettier-plugin-import-sort` ([#385](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/385))
+- Format quotes in `@source`, `@plugin`, and `@config` ([#387](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/387))
 - Support sorting in callable template literals ([#367](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/367))
 - Support sorting in function calls mixed with property accesses ([#367](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/367))
 

README.md

@@ -19,6 +19,17 @@ Then add the plugin to your [Prettier configuration](https://prettier.io/docs/en
 }
 ```
 
+When using a JavaScript config, you can import the types for IntelliSense:
+
+```js
+// prettier.config.js
+
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+export default {
+  plugins: ["prettier-plugin-tailwindcss"],
+}
+```
+
 ## Upgrading to v0.5.x
 
 As of v0.5.x, this plugin now requires Prettier v3 and is ESM-only. This means it cannot be loaded via `require()`. For more information see our [upgrade guide](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/207#issuecomment-1698071122).
@@ -215,7 +226,6 @@ This plugin uses Prettier APIs that can only be used by one plugin at a time, ma
 - `@trivago/prettier-plugin-sort-imports`
 - `prettier-plugin-astro`
 - `prettier-plugin-css-order`
-- `prettier-plugin-import-sort`
 - `prettier-plugin-jsdoc`
 - `prettier-plugin-multiline-arrays`
 - `prettier-plugin-organize-attributes`

package-lock.json

@@ -61,7 +61,6 @@
     "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-import-sort": "^0.0.7",
     "prettier-plugin-jsdoc": "^1.3.3",
     "prettier-plugin-marko": "^3.3.0",
     "prettier-plugin-multiline-arrays": "^4.0.3",
@@ -89,7 +88,6 @@
     "prettier": "^3.0",
     "prettier-plugin-astro": "*",
     "prettier-plugin-css-order": "*",
-    "prettier-plugin-import-sort": "*",
     "prettier-plugin-jsdoc": "*",
     "prettier-plugin-marko": "*",
     "prettier-plugin-multiline-arrays": "*",
@@ -127,9 +125,6 @@
     "prettier-plugin-css-order": {
       "optional": true
     },
-    "prettier-plugin-import-sort": {
-      "optional": true
-    },
     "prettier-plugin-jsdoc": {
       "optional": true
     },

package.json

@@ -773,7 +773,38 @@ function transformJavaScript(
 }
 
 function transformCss(ast: any, { env }: TransformerContext) {
+  // `parseValue` inside Prettier's CSS parser is private API so we have to
+  // produce the same result by parsing an import statement with the same params
+  function tryParseAtRuleParams(name: string, params: any) {
+    // It might already be an object or array. Could happen in the future if
+    // Prettier decides to start parsing these.
+    if (typeof params !== 'string') return params
+
+    // Otherwise we let prettier re-parse the params into its custom value AST
+    // based on postcss-value parser.
+    try {
+      let parser = base.parsers.css
+      let root = parser.parse(`@import ${params};`, env.options)
+
+      return root.nodes[0].params
+    } catch (err) {
+      console.warn(`[prettier-plugin-tailwindcss] Unable to parse at rule`)
+      console.warn({ name, params })
+      console.warn(err)
+    }
+
+    return params
+  }
+
   ast.walk((node: any) => {
+    if (
+      node.name === 'plugin' ||
+      node.name === 'config' ||
+      node.name === 'source'
+    ) {
+      node.params = tryParseAtRuleParams(node.name, node.params)
+    }
+
     if (node.type === 'css-atrule' && node.name === 'apply') {
       let isImportant = /\s+(?:!important|#{(['"]*)!important\1})\s*$/.test(
         node.params,
@@ -1275,8 +1306,3 @@ export interface PluginOptions {
    */
   tailwindPreserveDuplicates?: boolean
 }
-
-declare module 'prettier' {
-  interface RequiredOptions extends PluginOptions {}
-  interface ParserOptions extends PluginOptions {}
-}

src/index.ts

@@ -1,4 +1,6 @@
-export interface InternalOptions {
+import type { PluginOptions } from '.'
+
+export interface InternalOptions extends PluginOptions {
   printer: Printer<any>
 
   /**

src/internal.d.ts

@@ -1,6 +1,5 @@
 import type { RequiredOptions, SupportOption } from 'prettier'
 import type { Customizations } from './types'
-import './index'
 
 export const options: Record<string, SupportOption> = {
   tailwindConfig: {

src/options.ts

@@ -181,7 +181,6 @@ async function loadCompatiblePlugins() {
     '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',
 

src/plugins.ts

@@ -212,23 +212,6 @@ let tests: PluginTest[] = [
       ],
     },
   },
-  {
-    // NOTE: This plugin doesn't officially support Prettier v3 but it seems to work fine
-    plugins: ['prettier-plugin-import-sort'],
-    tests: {
-      babel: [
-        [
-          `
-            import './three'
-            import '@one/file'
-            import '@two/file'
-            export default function Foo() { return <div className="sm:p-0 p-4"></div> }
-          `,
-          `import '@one/file'\nimport '@two/file'\n\nimport './three'\n\nexport default function Foo() {\n  return <div className="p-4 sm:p-0"></div>\n}`,
-        ],
-      ],
-    },
-  },
   {
     plugins: ['prettier-plugin-jsdoc'],
     tests: {

tests/plugins.test.ts

@@ -43,6 +43,14 @@ let css: TestEntry[] = [
     '@apply p-0\n   sm:p-0;',
     { tailwindPreserveWhitespace: true },
   ],
+
+  // Quote conversion for custom at-rules
+  [`@import "./file.css";`, `@import './file.css';`],
+  [`@plugin "./file.js";`, `@plugin './file.js';`],
+  [`@config "./file.js";`, `@config './file.js';`],
+  [`@source "./file.js";`, `@source './file.js';`],
+  [`@source not "./file.js";`, `@source not './file.js';`],
+  [`@source inline("./file.js");`, `@source inline('./file.js');`],
 ]
 
 export let javascript: TestEntry[] = [