prettier-plugin-tailwindcss - npm Package Compare versions

Comparing version 0.0.0-insiders.f667b21 to 0.0.0-insiders.f69f739

dist/index.d.ts

@@ -1,27 +0,32 @@
-import { Parser, Printer, SupportOption } from 'prettier';
+import { SupportOption, Printer, Parser } from 'prettier';
 
-export interface PluginOptions {
-  /**
-   * Path to the Tailwind config file.
-   */
-  tailwindConfig?: string
+declare const options: Record<string, SupportOption>;
 
-  /**
-   * List of custom function and tag names that contain classes.
-   */
-  tailwindFunctions: string[]
-
-  /**
-   * List of custom attributes that contain classes.
-   */
-  tailwindAttributes: string[]
+declare const printers: Record<string, Printer>;
+declare const parsers: Record<string, Parser>;
+interface PluginOptions {
+    /**
+     * Path to the Tailwind config file.
+     */
+    tailwindConfig?: string;
+    /**
+     * Path to the Tailwind entry point (v4+)
+     */
+    tailwindEntryPoint?: string;
+    /**
+     * List of custom function and tag names that contain classes.
+     */
+    tailwindFunctions?: string[];
+    /**
+     * List of custom attributes that contain classes.
+     */
+    tailwindAttributes?: string[];
 }
-
 declare module 'prettier' {
-  interface RequiredOptions extends PluginOptions {}
-  interface ParserOptions extends PluginOptions {}
+    interface RequiredOptions extends PluginOptions {
+    }
+    interface ParserOptions extends PluginOptions {
+    }
 }
 
-export const options: Record<keyof PluginOptions, SupportOption>
-export const parsers: Record<string, Parser>
-export const printers: Record<string, Printer>
+export { type PluginOptions, options, parsers, printers };

package.json

 {
+  "type": "module",
   "name": "prettier-plugin-tailwindcss",
-  "version": "0.0.0-insiders.f667b21",
+  "version": "0.0.0-insiders.f69f739",
   "description": "A Prettier plugin for sorting Tailwind CSS classes.",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
@@ -18,11 +21,12 @@ "dist"
   "scripts": {
-    "_pre": "rimraf dist && cpy node_modules/tailwindcss/lib/css dist/css",
+    "_pre": "rimraf dist && cpy 'node_modules/tailwindcss/lib/css/*' dist/css",
     "_esbuild": "node build.mjs",
     "prebuild": "npm run _pre",
     "build": "npm run _esbuild -- --minify",
+    "postbuild": "tsup src/index.ts",
     "predev": "npm run _pre",
     "dev": "npm run _esbuild -- --watch",
     "pretest": "node scripts/install-fixture-deps.js",
-    "test": "jest",
-    "prepublishOnly": "npm run build && npm test && node scripts/copy-licenses.js",
+    "test": "vitest",
+    "prepublishOnly": "npm run build && node scripts/copy-licenses.js",
     "format": "prettier \"src/**/*.js\" \"scripts/**/*.js\" \"tests/test.js\" --write --print-width 100 --single-quote --no-semi --plugin-search-dir ./tests",
@@ -33,34 +37,40 @@ "release-channel": "node ./scripts/release-channel.js",
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^3.7.0",
-    "@marko/translator-default": "^5.25.7",
-    "@prettier/plugin-pug": "^2.3.0",
-    "@shopify/prettier-plugin-liquid": "^1.0.3",
-    "@shufo/prettier-plugin-blade": "^1.8.4",
-    "@trivago/prettier-plugin-sort-imports": "^3.4.0",
+    "@babel/types": "^7.24.7",
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
+    "@microsoft/api-extractor": "^7.47.0",
+    "@prettier/plugin-pug": "^3.0",
+    "@shopify/prettier-plugin-liquid": "^1.4.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@zackad/prettier-plugin-twig-melody": "^0.5.0",
+    "ast-types": "^0.14.2",
     "clear-module": "^4.1.2",
-    "cpy-cli": "^3.1.1",
-    "esbuild": "^0.18.0",
+    "cpy-cli": "^5.0.0",
+    "esbuild": "^0.19.8",
     "escalade": "^3.1.1",
     "import-sort-style-module": "^6.0.0",
-    "jest": "^27.4.7",
     "jsesc": "^2.5.2",
     "license-checker": "^25.0.1",
     "line-column": "^1.0.2",
-    "object-hash": "^2.2.0",
-    "prettier": "^2.8.8",
-    "prettier-plugin-astro": "^0.7.2",
-    "prettier-plugin-css-order": "^1.3.0",
+    "marko": "^5.31.18",
+    "postcss": "^8.4.35",
+    "postcss-import": "^16.0.1",
+    "prettier": "^3.2",
+    "prettier-plugin-astro": "^0.12.2",
+    "prettier-plugin-css-order": "^2.0.0",
     "prettier-plugin-import-sort": "^0.0.7",
-    "prettier-plugin-jsdoc": "^0.4.2",
-    "prettier-plugin-marko": "^1.4.3",
-    "prettier-plugin-organize-attributes": "^0.0.5",
-    "prettier-plugin-organize-imports": "^3.2.1",
+    "prettier-plugin-jsdoc": "^1.0.1",
+    "prettier-plugin-marko": "^3.1.1",
+    "prettier-plugin-multiline-arrays": "^3.0.6",
+    "prettier-plugin-organize-attributes": "^1.0.0",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-sort-imports": "^1.8.1",
     "prettier-plugin-style-order": "^0.2.2",
-    "prettier-plugin-svelte": "^2.9.0",
-    "prettier-plugin-twig-melody": "^0.4.6",
-    "recast": "^0.20.5",
+    "prettier-plugin-svelte": "^3.1.2",
+    "recast": "0.20.5",
     "resolve-from": "^5.0.0",
-    "rimraf": "^3.0.2",
-    "svelte": "^3.55.0",
-    "tailwindcss": "^3.3.0"
+    "rimraf": "^5.0.5",
+    "svelte": "^4.2.8",
+    "tailwindcss": "^3.4.2",
+    "tsup": "^8.1.0",
+    "vitest": "^1.6.0"
   },
@@ -71,5 +81,5 @@ "peerDependencies": {
     "@shopify/prettier-plugin-liquid": "*",
-    "@shufo/prettier-plugin-blade": "*",
     "@trivago/prettier-plugin-sort-imports": "*",
-    "prettier": "^2.2 || ^3.0",
+    "@zackad/prettier-plugin-twig-melody": "*",
+    "prettier": "^3.0",
     "prettier-plugin-astro": "*",
@@ -80,7 +90,8 @@ "prettier-plugin-css-order": "*",
     "prettier-plugin-marko": "*",
+    "prettier-plugin-multiline-arrays": "*",
     "prettier-plugin-organize-attributes": "*",
     "prettier-plugin-organize-imports": "*",
+    "prettier-plugin-sort-imports": "*",
     "prettier-plugin-style-order": "*",
-    "prettier-plugin-svelte": "*",
-    "prettier-plugin-twig-melody": "*"
+    "prettier-plugin-svelte": "*"
   },
@@ -97,6 +108,6 @@ "peerDependenciesMeta": {
     },
-    "@shufo/prettier-plugin-blade": {
+    "@trivago/prettier-plugin-sort-imports": {
       "optional": true
     },
-    "@trivago/prettier-plugin-sort-imports": {
+    "@zackad/prettier-plugin-twig-melody": {
       "optional": true
@@ -119,2 +130,5 @@ },
     },
+    "prettier-plugin-multiline-arrays": {
+      "optional": true
+    },
     "prettier-plugin-organize-attributes": {
@@ -126,2 +140,5 @@ "optional": true
     },
+    "prettier-plugin-sort-imports": {
+      "optional": true
+    },
     "prettier-plugin-style-order": {
@@ -132,9 +149,6 @@ "optional": true
       "optional": true
-    },
-    "prettier-plugin-twig-melody": {
-      "optional": true
     }
   },
   "engines": {
-    "node": ">=12.17.0"
+    "node": ">=14.21.3"
   },
@@ -141,0 +155,0 @@ "importSort": {

README.md

 <img src="https://raw.githubusercontent.com/tailwindlabs/prettier-plugin-tailwindcss/main/.github/banner.jpg" alt="prettier-plugin-tailwindcss" />
 
-A [Prettier](https://prettier.io/) plugin for Tailwind CSS v3.0+ that automatically sorts classes based on [our recommended class order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted).
+A [Prettier v3+](https://prettier.io/) plugin for Tailwind CSS v3.0+ that automatically sorts classes based on [our recommended class order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted).
 
 ## Installation
 
-To get started, just install `prettier-plugin-tailwindcss` as a dev-dependency:
+To get started, install `prettier-plugin-tailwindcss` as a dev-dependency:
 
@@ -13,13 +13,15 @@ ```sh
 
-When using Prettier v2, this plugin follows Prettier’s autoloading convention, so as long as you’ve got Prettier set up in your project, it’ll start working automatically as soon as it’s installed.
+Then add the plugin to your [Prettier configuration](https://prettier.io/docs/en/configuration.html):
 
-_Note that plugin autoloading is not supported when using Prettier v3, or when using certain package managers with Prettier v2, such as pnpm or Yarn PnP. In this case you may need to add the plugin to your Prettier config explicitly:_
-
-```js
-// prettier.config.js
-module.exports = {
-  plugins: [require('prettier-plugin-tailwindcss')],
+```json5
+// .prettierrc
+{
+  "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).
+
 ## Options
@@ -35,6 +37,6 @@
 
-```js
-// prettier.config.js
-module.exports = {
-  tailwindConfig: './styles/tailwind.config.js',
+```json5
+// .prettierrc
+{
+  "tailwindConfig": "./styles/tailwind.config.js"
 }
@@ -47,10 +49,10 @@ ```
 
-By default this plugin only sorts classes in the `class` attribute as well as any framework-specific equivalents like `class`, `className`, `:class`, `[ngClass]`, etc.
+By default this plugin sorts classes in the `class` attribute, any framework-specific equivalents like `className`, `:class`, `[ngClass]`, and any Tailwind `@apply` directives.
 
 You can sort additional attributes using the `tailwindAttributes` option, which takes an array of attribute names:
 
-```js
-// prettier.config.js
-module.exports = {
-  tailwindAttributes: ['myClassList'],
+```json5
+// .prettierrc
+{
+  "tailwindAttributes": ["myClassList"]
 }
@@ -77,6 +79,6 @@ ```
 
-```js
-// prettier.config.js
-module.exports = {
-  tailwindFunctions: ['clsx'],
+```json5
+// .prettierrc
+{
+  "tailwindFunctions": ["clsx"]
 }
@@ -112,6 +114,6 @@ ```
 
-```js
-// prettier.config.js
-module.exports = {
-  tailwindFunctions: ['tw'],
+```json5
+// .prettierrc
+{
+  "tailwindFunctions": ["tw"],
 }
@@ -135,2 +137,65 @@ ```
 
+This feature can be used with third-party libraries like `twrnc` or you can create your own tagged template by defining this "identity" function:
+
+```js
+const tw = (strings, ...values) => String.raw({ raw: strings }, ...values)
+```
+
+Once added, tag your strings with the function and the plugin will sort them:
+
+```js
+const mySortedClasses = tw`bg-white p-4 dark:bg-black`
+```
+
+## Preserving whitespace
+
+This plugin automatically removes unnecessary whitespace between classes to ensure consistent formatting. If you prefer to preserve whitespace, you can use the `tailwindPreserveWhitespace` option:
+
+```json5
+// .prettierrc
+{
+  "tailwindPreserveWhitespace": true,
+}
+```
+
+With this configuration, any whitespace surrounding classes will be preserved:
+
+```jsx
+import clsx from 'clsx'
+
+function MyButton({ isHovering, children }) {
+  return (
+    <button className=" rounded  bg-blue-500 px-4  py-2     text-base text-white ">
+      {children}
+    </button>
+  )
+}
+```
+
+## Preserving duplicate classes
+
+This plugin automatically removes duplicate classes from your class lists. However, this can cause issues in some templating languages, like Fluid or Blade, where we can't distinguish between classes and the templating syntax.
+
+If removing duplicate classes is causing issues in your project, you can use the `tailwindPreserveDuplicates` option to disable this behavior:
+
+```json5
+// .prettierrc
+{
+  "tailwindPreserveDuplicates": true,
+}
+```
+
+With this configuration, anything we perceive as duplicate classes will be preserved:
+
+```html
+<div
+  class="
+    {f:if(condition: isCompact, then: 'grid-cols-3', else: 'grid-cols-5')}
+    {f:if(condition: isDark, then: 'bg-black/50', else: 'bg-white/50')}
+    grid gap-4 p-4
+  "
+>
+</div>
+```
+
 ## Compatibility with other Prettier plugins
@@ -140,5 +205,5 @@
 
+- `@ianvs/prettier-plugin-sort-imports`
 - `@prettier/plugin-pug`
 - `@shopify/prettier-plugin-liquid`
-- `@ianvs/prettier-plugin-sort-imports`
 - `@trivago/prettier-plugin-sort-imports`
@@ -149,2 +214,3 @@ - `prettier-plugin-astro`
 - `prettier-plugin-jsdoc`
+- `prettier-plugin-multiline-arrays`
 - `prettier-plugin-organize-attributes`
@@ -154,5 +220,5 @@ - `prettier-plugin-organize-imports`
 - `prettier-plugin-svelte`
-- `prettier-plugin-twig-melody`
+- `prettier-plugin-sort-imports`
 
-One limitation with this approach is that `prettier-plugin-tailwindcss` *must* be loaded last, meaning Prettier auto-loading needs to be disabled. You can do this by setting the `pluginSearchDirs` option to `false` and then listing each of your Prettier plugins in the `plugins` array:
+One limitation with this approach is that `prettier-plugin-tailwindcss` *must* be loaded last.
 
@@ -167,5 +233,4 @@ ```json5
     "prettier-plugin-tailwindcss" // MUST come last
-  ],
-  "pluginSearchDirs": false
+  ]
 }
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2583755

increased by2.69%

Number of package files

36

increased by16.13%

Lines of code

11652

increased by1.45%

Number of lines in readme file

227

increased by40.12%

Is type module

Yes

Worsened metrics

Dependency count

17

increased by6.25%

Dev dependency count

38

increased by18.75%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes