prettier-plugin-tailwindcss
Advanced tools
Comparing version 0.0.0-insiders.6533049 to 0.0.0-insiders.9844623
112
package.json
{ | ||
"type": "module", | ||
"name": "prettier-plugin-tailwindcss", | ||
"version": "0.0.0-insiders.6533049", | ||
"version": "0.0.0-insiders.9844623", | ||
"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,54 +21,63 @@ "dist" | ||
"scripts": { | ||
"_pre": "rimraf dist && cpy node_modules/tailwindcss/lib/css dist/css", | ||
"_esbuild": "node build.js", | ||
"_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", | ||
"test": "jest", | ||
"prepublishOnly": "npm run build && npm test && 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" | ||
"pretest": "node scripts/install-fixture-deps.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", | ||
"release-channel": "node ./scripts/release-channel.js", | ||
"release-notes": "node ./scripts/release-notes.js" | ||
}, | ||
"devDependencies": { | ||
"@ianvs/prettier-plugin-sort-imports": "^3.7.0", | ||
"@prettier/plugin-php": "^0.19.2", | ||
"@prettier/plugin-pug": "^2.3.0", | ||
"@shopify/prettier-plugin-liquid": "^1.0.3", | ||
"@shufo/prettier-plugin-blade": "^1.8.4", | ||
"@tailwindcss/line-clamp": "^0.3.0", | ||
"@trivago/prettier-plugin-sort-imports": "^3.4.0", | ||
"cpy-cli": "^3.1.1", | ||
"esbuild": "^0.14.11", | ||
"@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": "^5.0.0", | ||
"esbuild": "^0.19.8", | ||
"escalade": "^3.1.1", | ||
"import-fresh": "^3.3.0", | ||
"import-from": "^4.0.0", | ||
"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.5.1", | ||
"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-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", | ||
"rimraf": "^3.0.2", | ||
"svelte": "^3.55.0", | ||
"tailwindcss": "^3.0.23" | ||
"prettier-plugin-svelte": "^3.1.2", | ||
"recast": "0.20.5", | ||
"resolve-from": "^5.0.0", | ||
"rimraf": "^5.0.5", | ||
"svelte": "^4.2.8", | ||
"tailwindcss": "^3.4.2", | ||
"tsup": "^8.1.0", | ||
"vitest": "^1.6.0" | ||
}, | ||
"peerDependencies": { | ||
"@ianvs/prettier-plugin-sort-imports": "*", | ||
"@prettier/plugin-php": "*", | ||
"@prettier/plugin-pug": "*", | ||
"@shopify/prettier-plugin-liquid": "*", | ||
"@shufo/prettier-plugin-blade": "*", | ||
"@trivago/prettier-plugin-sort-imports": "*", | ||
"prettier": ">=2.2.0", | ||
"@zackad/prettier-plugin-twig-melody": "*", | ||
"prettier": "^3.0", | ||
"prettier-plugin-astro": "*", | ||
@@ -75,7 +87,9 @@ "prettier-plugin-css-order": "*", | ||
"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": "*", | ||
"prettier-plugin-svelte": "*", | ||
"prettier-plugin-twig-melody": "*" | ||
"prettier-plugin-svelte": "*" | ||
}, | ||
@@ -86,5 +100,2 @@ "peerDependenciesMeta": { | ||
}, | ||
"@prettier/plugin-php": { | ||
"optional": true | ||
}, | ||
"@prettier/plugin-pug": { | ||
@@ -96,6 +107,6 @@ "optional": true | ||
}, | ||
"@shufo/prettier-plugin-blade": { | ||
"@trivago/prettier-plugin-sort-imports": { | ||
"optional": true | ||
}, | ||
"@trivago/prettier-plugin-sort-imports": { | ||
"@zackad/prettier-plugin-twig-melody": { | ||
"optional": true | ||
@@ -115,2 +126,8 @@ }, | ||
}, | ||
"prettier-plugin-marko": { | ||
"optional": true | ||
}, | ||
"prettier-plugin-multiline-arrays": { | ||
"optional": true | ||
}, | ||
"prettier-plugin-organize-attributes": { | ||
@@ -122,2 +139,5 @@ "optional": true | ||
}, | ||
"prettier-plugin-sort-imports": { | ||
"optional": true | ||
}, | ||
"prettier-plugin-style-order": { | ||
@@ -128,9 +148,6 @@ "optional": true | ||
"optional": true | ||
}, | ||
"prettier-plugin-twig-melody": { | ||
"optional": true | ||
} | ||
}, | ||
"engines": { | ||
"node": ">=12.17.0" | ||
"node": ">=14.21.3" | ||
}, | ||
@@ -141,3 +158,6 @@ "importSort": { | ||
} | ||
}, | ||
"jest": { | ||
"testTimeout": 15000 | ||
} | ||
} |
195
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,17 +13,21 @@ ```sh | ||
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 certain package managers, 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"] | ||
} | ||
``` | ||
## Resolving your Tailwind configuration | ||
## Upgrading to v0.5.x | ||
To ensure that the class sorting is taking into consideration any of your project's Tailwind customizations, it needs access to your [Tailwind configuration file](https://tailwindcss.com/docs/configuration) (`tailwind.config.js`). | ||
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 | ||
### Customizing your Tailwind config path | ||
To ensure that the class sorting takes into consideration any of your project's Tailwind customizations, it needs access to your [Tailwind configuration file](https://tailwindcss.com/docs/configuration) (`tailwind.config.js`). | ||
By default the plugin will look for this file in the same directory as your Prettier configuration file. However, if your Tailwind configuration is somewhere else, you can specify this using the `tailwindConfig` option in your Prettier configuration. | ||
@@ -33,6 +37,6 @@ | ||
```js | ||
// prettier.config.js | ||
module.exports = { | ||
tailwindConfig: './styles/tailwind.config.js', | ||
```json5 | ||
// .prettierrc | ||
{ | ||
"tailwindConfig": "./styles/tailwind.config.js" | ||
} | ||
@@ -43,2 +47,152 @@ ``` | ||
## Sorting non-standard attributes | ||
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: | ||
```json5 | ||
// .prettierrc | ||
{ | ||
"tailwindAttributes": ["myClassList"] | ||
} | ||
``` | ||
With this configuration, any classes found in the `myClassList` attribute will be sorted: | ||
```jsx | ||
function MyButton({ children }) { | ||
return ( | ||
<button myClassList="rounded bg-blue-500 px-4 py-2 text-base text-white"> | ||
{children} | ||
</button> | ||
); | ||
} | ||
``` | ||
## Sorting classes in function calls | ||
In addition to sorting classes in attributes, you can also sort classes in strings provided to function calls. This is useful when working with libraries like [clsx](https://github.com/lukeed/clsx) or [cva](https://cva.style/). | ||
You can sort classes in function calls using the `tailwindFunctions` option, which takes a list of function names: | ||
```json5 | ||
// .prettierrc | ||
{ | ||
"tailwindFunctions": ["clsx"] | ||
} | ||
``` | ||
With this configuration, any classes in `clsx()` function calls will be sorted: | ||
```jsx | ||
import clsx from 'clsx' | ||
function MyButton({ isHovering, children }) { | ||
let classes = clsx( | ||
'rounded bg-blue-500 px-4 py-2 text-base text-white', | ||
{ | ||
'bg-blue-700 text-gray-100': isHovering, | ||
}, | ||
) | ||
return ( | ||
<button className={classes}> | ||
{children} | ||
</button> | ||
) | ||
} | ||
``` | ||
## Sorting classes in template literals | ||
This plugin also enables sorting of classes in tagged template literals. | ||
You can sort classes in template literals using the `tailwindFunctions` option, which takes a list of function names: | ||
```json5 | ||
// .prettierrc | ||
{ | ||
"tailwindFunctions": ["tw"], | ||
} | ||
``` | ||
With this configuration, any classes in template literals tagged with `tw` will automatically be sorted: | ||
```jsx | ||
import { View, Text } from 'react-native' | ||
import tw from 'twrnc' | ||
function MyScreen() { | ||
return ( | ||
<View style={tw`bg-white p-4 dark:bg-black`}> | ||
<Text style={tw`text-md text-black dark:text-white`}>Hello World</Text> | ||
</View> | ||
) | ||
} | ||
``` | ||
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 | ||
@@ -48,6 +202,5 @@ | ||
- `@prettier/plugin-php` | ||
- `@ianvs/prettier-plugin-sort-imports` | ||
- `@prettier/plugin-pug` | ||
- `@shopify/prettier-plugin-liquid` | ||
- `@ianvs/prettier-plugin-sort-imports` | ||
- `@trivago/prettier-plugin-sort-imports` | ||
@@ -58,2 +211,3 @@ - `prettier-plugin-astro` | ||
- `prettier-plugin-jsdoc` | ||
- `prettier-plugin-multiline-arrays` | ||
- `prettier-plugin-organize-attributes` | ||
@@ -63,5 +217,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. | ||
@@ -76,5 +230,4 @@ ```json5 | ||
"prettier-plugin-tailwindcss" // MUST come last | ||
], | ||
"pluginSearchDirs": false | ||
] | ||
} | ||
``` |
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
Major refactor
Supply chain riskPackage 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
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
Uses eval
Supply chain riskPackage uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Debug access
Supply chain riskUses debug, reflection and dynamic code execution features.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 6 instances in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
2584004
36
11653
2
227
0
Yes
17
38