prettier-plugin-tailwindcss
Advanced tools
Comparing version 0.0.0-insiders.c51df4d to 0.0.0-insiders.c5eed72
@@ -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 }; |
{ | ||
"type": "module", | ||
"name": "prettier-plugin-tailwindcss", | ||
"version": "0.0.0-insiders.c51df4d", | ||
"version": "0.0.0-insiders.c5eed72", | ||
"description": "A Prettier plugin for sorting Tailwind CSS classes.", | ||
@@ -20,10 +21,11 @@ "license": "MIT", | ||
"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": "NODE_OPTIONS=--experimental-vm-modules jest", | ||
"test": "vitest", | ||
"prepublishOnly": "npm run build && node scripts/copy-licenses.js", | ||
@@ -35,31 +37,40 @@ "format": "prettier \"src/**/*.js\" \"scripts/**/*.js\" \"tests/test.js\" --write --print-width 100 --single-quote --no-semi --plugin-search-dir ./tests", | ||
"devDependencies": { | ||
"@babel/types": "^7.24.7", | ||
"@ianvs/prettier-plugin-sort-imports": "^4.1.0", | ||
"@marko/translator-default": "^5.30.1", | ||
"@microsoft/api-extractor": "^7.47.0", | ||
"@prettier/plugin-pug": "^3.0", | ||
"@shopify/prettier-plugin-liquid": "^1.2.2", | ||
"@trivago/prettier-plugin-sort-imports": "^4.2.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": "^29.6.2", | ||
"jsesc": "^2.5.2", | ||
"license-checker": "^25.0.1", | ||
"line-column": "^1.0.2", | ||
"object-hash": "^2.2.0", | ||
"prettier": "3.0", | ||
"prettier-plugin-astro": "^0.11.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": "^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.3", | ||
"prettier-plugin-organize-imports": "^3.2.4", | ||
"prettier-plugin-sort-imports": "^1.8.1", | ||
"prettier-plugin-style-order": "^0.2.2", | ||
"prettier-plugin-svelte": "^3.0.3", | ||
"prettier-plugin-svelte": "^3.1.2", | ||
"recast": "0.20.5", | ||
"resolve-from": "^5.0.0", | ||
"rimraf": "^3.0.2", | ||
"svelte": "^4.1.2", | ||
"tailwindcss": "^3.3.3" | ||
"rimraf": "^5.0.5", | ||
"svelte": "^4.2.8", | ||
"tailwindcss": "^3.4.2", | ||
"tsup": "^8.1.0", | ||
"vitest": "^1.6.0" | ||
}, | ||
@@ -70,4 +81,4 @@ "peerDependencies": { | ||
"@shopify/prettier-plugin-liquid": "*", | ||
"@shufo/prettier-plugin-blade": "*", | ||
"@trivago/prettier-plugin-sort-imports": "*", | ||
"@zackad/prettier-plugin-twig-melody": "*", | ||
"prettier": "^3.0", | ||
@@ -78,4 +89,7 @@ "prettier-plugin-astro": "*", | ||
"prettier-plugin-jsdoc": "*", | ||
"prettier-plugin-marko": "*", | ||
"prettier-plugin-multiline-arrays": "*", | ||
"prettier-plugin-organize-attributes": "*", | ||
"prettier-plugin-organize-imports": "*", | ||
"prettier-plugin-sort-imports": "*", | ||
"prettier-plugin-style-order": "*", | ||
@@ -94,6 +108,6 @@ "prettier-plugin-svelte": "*" | ||
}, | ||
"@shufo/prettier-plugin-blade": { | ||
"@trivago/prettier-plugin-sort-imports": { | ||
"optional": true | ||
}, | ||
"@trivago/prettier-plugin-sort-imports": { | ||
"@zackad/prettier-plugin-twig-melody": { | ||
"optional": true | ||
@@ -116,2 +130,5 @@ }, | ||
}, | ||
"prettier-plugin-multiline-arrays": { | ||
"optional": true | ||
}, | ||
"prettier-plugin-organize-attributes": { | ||
@@ -123,2 +140,5 @@ "optional": true | ||
}, | ||
"prettier-plugin-sort-imports": { | ||
"optional": true | ||
}, | ||
"prettier-plugin-style-order": { | ||
@@ -129,5 +149,2 @@ "optional": true | ||
"optional": true | ||
}, | ||
"prettier-plugin-twig-melody": { | ||
"optional": true | ||
} | ||
@@ -134,0 +151,0 @@ }, |
@@ -13,8 +13,8 @@ <img src="https://raw.githubusercontent.com/tailwindlabs/prettier-plugin-tailwindcss/main/.github/banner.jpg" alt="prettier-plugin-tailwindcss" /> | ||
Then add the plugin to your Prettier config: | ||
Then add the plugin to your [Prettier configuration](https://prettier.io/docs/en/configuration.html): | ||
```js | ||
// prettier.config.js | ||
module.exports = { | ||
plugins: ['prettier-plugin-tailwindcss'], | ||
```json5 | ||
// .prettierrc | ||
{ | ||
"plugins": ["prettier-plugin-tailwindcss"] | ||
} | ||
@@ -37,6 +37,6 @@ ``` | ||
```js | ||
// prettier.config.js | ||
module.exports = { | ||
tailwindConfig: './styles/tailwind.config.js', | ||
```json5 | ||
// .prettierrc | ||
{ | ||
"tailwindConfig": "./styles/tailwind.config.js" | ||
} | ||
@@ -49,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"] | ||
} | ||
@@ -79,6 +79,6 @@ ``` | ||
```js | ||
// prettier.config.js | ||
module.exports = { | ||
tailwindFunctions: ['clsx'], | ||
```json5 | ||
// .prettierrc | ||
{ | ||
"tailwindFunctions": ["clsx"] | ||
} | ||
@@ -114,6 +114,6 @@ ``` | ||
```js | ||
// prettier.config.js | ||
module.exports = { | ||
tailwindFunctions: ['tw'], | ||
```json5 | ||
// .prettierrc | ||
{ | ||
"tailwindFunctions": ["tw"], | ||
} | ||
@@ -149,2 +149,53 @@ ``` | ||
## 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 | ||
@@ -162,2 +213,3 @@ | ||
- `prettier-plugin-jsdoc` | ||
- `prettier-plugin-multiline-arrays` | ||
- `prettier-plugin-organize-attributes` | ||
@@ -167,2 +219,3 @@ - `prettier-plugin-organize-imports` | ||
- `prettier-plugin-svelte` | ||
- `prettier-plugin-sort-imports` | ||
@@ -169,0 +222,0 @@ One limitation with this approach is that `prettier-plugin-tailwindcss` *must* be loaded last. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis 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
License Policy Violation
LicenseThis 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
2583755
36
11652
227
Yes
17
38