You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
prettier-plugin-tailwindcss
Advanced tools
prettier-plugin-tailwindcss - npm Package Compare versions
Comparing version 0.0.0-insiders.8a9094f to 0.0.0-insiders.8e4efba
@@ -1,32 +0,46 @@ | ||
| 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>; | ||
| /** | ||
| * 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 const printers: Record<string, Printer>; | ||
| declare const parsers: Record<string, Parser>; | ||
| interface PluginOptions { | ||
| /** | ||
| * Path to the Tailwind config file. | ||
| */ | ||
| tailwindConfig?: string; | ||
| /** | ||
| * Path to the CSS stylesheet used by Tailwind CSS (v4+) | ||
| */ | ||
| tailwindStylesheet?: string; | ||
| /** | ||
| * Path to the CSS stylesheet used by Tailwind CSS (v4+) | ||
| * | ||
| * @deprecated Use `tailwindStylesheet` instead | ||
| */ | ||
| tailwindEntryPoint?: string; | ||
| /** | ||
| * List of custom function and tag names that contain classes. | ||
| */ | ||
| tailwindFunctions?: string[]; | ||
| /** | ||
| * List of custom attributes that contain classes. | ||
| */ | ||
| tailwindAttributes?: string[]; | ||
| /** | ||
| * Preserve whitespace around Tailwind classes when sorting. | ||
| */ | ||
| tailwindPreserveWhitespace?: boolean; | ||
| /** | ||
| * Preserve duplicate classes inside a class list when sorting. | ||
| */ | ||
| tailwindPreserveDuplicates?: boolean; | ||
| } | ||
| 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 }; |
@@ -68,14 +68,15 @@ <h1 align="center" style="position: relative;" > | ||
| | Name | Default | Description | | ||
| | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | `printWidth` | `120` | Changed from Prettier's default (`80`) ([see prettier docs](https://prettier.io/docs/en/options.html#print-width)) | | ||
| | `tabWidth` | `2` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#tab-width)) | | ||
| | `useTabs` | `false` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#tabs)) | | ||
| | `singleQuote` | `false` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#quotes)) | | ||
| | `bracketSameLine` | `false` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#bracket-line)) | | ||
| | `liquidSingleQuote` | `true` | Use single quotes instead of double quotes in Liquid tag and objects (since v0.2.0). | | ||
| | `embeddedSingleQuote` | `true` | Use single quotes instead of double quotes in embedded languages (JavaScript, CSS, TypeScript inside `<script>`, `<style>` or Liquid equivalent) (since v0.4.0). | | ||
| | `htmlWhitespaceSensitivity` | `css` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity)) | | ||
| | `singleLineLinkTags` | `false` | If set to `true`, will print `<link>` tags on a single line to remove clutter | | ||
| | `indentSchema` | `false` | If set to `true`, will indent the contents of the `{% schema %}` tag | | ||
| | Name | Default | Description | | ||
| | ------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `printWidth` | `120` | Changed from Prettier's default (`80`) ([see prettier docs](https://prettier.io/docs/en/options.html#print-width)) | | ||
| | `tabWidth` | `2` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#tab-width)) | | ||
| | `useTabs` | `false` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#tabs)) | | ||
| | `singleQuote` | `false` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#quotes)) | | ||
| | `bracketSameLine` | `false` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#bracket-line)) | | ||
| | `liquidSingleQuote` | `true` | Use single quotes instead of double quotes in Liquid tag and objects (since v0.2.0). | | ||
| | `embeddedSingleQuote` | `true` | Use single quotes instead of double quotes in embedded languages (JavaScript, CSS, TypeScript inside `<script>`, `<style>` or Liquid equivalent) (since v0.4.0). | | ||
| | `htmlWhitespaceSensitivity` | `css` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity)) | | ||
| | `captureWhitespaceSensitivity` | `strict` | Specify the default whitespace sensitivity of the `capture` Liquid tag. Valid options: `"strict"` \| `"ignore"`. | | ||
| | `singleLineLinkTags` | `false` | If set to `true`, will print `<link>` tags on a single line to remove clutter | | ||
| | `indentSchema` | `false` | If set to `true`, will indent the contents of the `{% schema %}` tag | | ||
@@ -104,2 +105,46 @@ ## Ignoring code | ||
| ## Whitespace handling | ||
| You'll quickly notice that the default value for `--htmlWhitespaceSensitivity` is set to `css` (like [Prettier's](https://prettier.io/blog/2018/11/07/1.15.0#whitespace-sensitive-formatting)). | ||
| If you want to change this behaviour for a specific tag that has a different default, you can use either the `display` or `white-space` comment to alter the behaviour. | ||
| Examples: | ||
| ```liquid | ||
| {% # this tag is whitespace sensitive by default, since the value of the string shouldn't change by formatting. %} | ||
| {% capture value %} | ||
| Hello {% name %} | ||
| {% endcapture %} | ||
| {% # here we alter its white-space property so that we allow pretty printing of its body %} | ||
| {% # white-space: normal %} | ||
| {% capture _ %} | ||
| <div> | ||
| {% render 'snip' %} | ||
| </div> | ||
| {% endcapture %} | ||
| {% # this will prevent prettier from formatting it %} | ||
| {% # white-space: pre %} | ||
| {% capture _ %} | ||
| <div> | ||
| {% render 'snip' %} | ||
| </div> | ||
| {% endcapture %} | ||
| {% # a span is normally sensitive to whitespace on both ends %} | ||
| <span | ||
| ><b | ||
| >hi</b | ||
| ></span | ||
| > | ||
| {% # with display: block, it isn't %} | ||
| {% # display: block %} | ||
| <span> | ||
| <b>hi</b> | ||
| </span> | ||
| ``` | ||
| ## Known issues | ||
@@ -106,0 +151,0 @@ |
@@ -8,2 +8,4 @@ # Prettier Plugin: Sort imports | ||
|  | ||
| ## Installation | ||
@@ -64,2 +66,22 @@ | ||
| ### 1.8.6 | ||
| - Add keywords to NPM package listing | ||
| ### 1.8.5 | ||
| - When sorting by line length, adjecent subgroups are also sorted together | ||
| ### 1.8.4 | ||
| - Add `.prettierrc.mjs` and `prettier.config.mjs` to the list of possible config files | ||
| ### 1.8.3 | ||
| - Remove some logs from release | ||
| ### 1.8.2 | ||
| - Fix bug where `package.json` files were not resolved relative to prettier config file but only to CWD | ||
| ### 1.8.1 | ||
@@ -66,0 +88,0 @@ |
| { | ||
| "type": "module", | ||
| "name": "prettier-plugin-tailwindcss", | ||
| "version": "0.0.0-insiders.8a9094f", | ||
| "version": "0.0.0-insiders.8e4efba", | ||
| "description": "A Prettier plugin for sorting Tailwind CSS classes.", | ||
@@ -24,6 +25,7 @@ "license": "MIT", | ||
| "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,13 +37,21 @@ "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", | ||
| "@microsoft/api-extractor": "^7.47.0", | ||
| "@prettier/plugin-hermes": "^0.0.3", | ||
| "@prettier/plugin-oxc": "^0.0.4", | ||
| "@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", | ||
| "@types/node": "^22.10.9", | ||
| "@zackad/prettier-plugin-twig": "^0.14.1", | ||
| "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", | ||
| "import-sort-style-module": "^6.0.0", | ||
| "jest": "^29.6.2", | ||
| "jiti": "^2.4.2", | ||
| "jsesc": "^2.5.2", | ||
@@ -53,8 +63,9 @@ "license-checker": "^25.0.1", | ||
| "postcss-import": "^16.0.1", | ||
| "prettier": "^3.2", | ||
| "prettier": "^3.6", | ||
| "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-jsdoc": "^1.3.3", | ||
| "prettier-plugin-marko": "^3.1.1", | ||
| "prettier-plugin-multiline-arrays": "^3.0.6", | ||
| "prettier-plugin-organize-attributes": "^1.0.0", | ||
@@ -69,10 +80,14 @@ "prettier-plugin-organize-imports": "^3.2.4", | ||
| "svelte": "^4.2.8", | ||
| "tailwindcss": "^3.4.2" | ||
| "tailwindcss": "^3.4.2", | ||
| "tsup": "^8.1.0", | ||
| "vitest": "^1.6.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "@ianvs/prettier-plugin-sort-imports": "*", | ||
| "@prettier/plugin-hermes": "*", | ||
| "@prettier/plugin-oxc": "*", | ||
| "@prettier/plugin-pug": "*", | ||
| "@shopify/prettier-plugin-liquid": "*", | ||
| "@trivago/prettier-plugin-sort-imports": "*", | ||
| "@zackad/prettier-plugin-twig-melody": "*", | ||
| "@zackad/prettier-plugin-twig": "*", | ||
| "prettier": "^3.0", | ||
@@ -84,2 +99,3 @@ "prettier-plugin-astro": "*", | ||
| "prettier-plugin-marko": "*", | ||
| "prettier-plugin-multiline-arrays": "*", | ||
| "prettier-plugin-organize-attributes": "*", | ||
@@ -95,2 +111,8 @@ "prettier-plugin-organize-imports": "*", | ||
| }, | ||
| "@prettier/plugin-hermes": { | ||
| "optional": true | ||
| }, | ||
| "@prettier/plugin-oxc": { | ||
| "optional": true | ||
| }, | ||
| "@prettier/plugin-pug": { | ||
@@ -105,3 +127,3 @@ "optional": true | ||
| }, | ||
| "@zackad/prettier-plugin-twig-melody": { | ||
| "@zackad/prettier-plugin-twig": { | ||
| "optional": true | ||
@@ -124,2 +146,5 @@ }, | ||
| }, | ||
| "prettier-plugin-multiline-arrays": { | ||
| "optional": true | ||
| }, | ||
| "prettier-plugin-organize-attributes": { | ||
@@ -126,0 +151,0 @@ "optional": true |
@@ -28,4 +28,17 @@ <img src="https://raw.githubusercontent.com/tailwindlabs/prettier-plugin-tailwindcss/main/.github/banner.jpg" alt="prettier-plugin-tailwindcss" /> | ||
| ### Customizing your Tailwind config path | ||
| ### Specifying your Tailwind stylesheet path (Tailwind CSS v4+) | ||
| When using Tailwind CSS v4 you must specify your CSS file entry point, which includes your theme, custom utilities, and other Tailwind configuration options. To do this, use the `tailwindStylesheet` option in your Prettier configuration. | ||
| Note that paths are resolved relative to the Prettier configuration file. | ||
| ```json5 | ||
| // .prettierrc | ||
| { | ||
| "tailwindStylesheet": "./resources/css/app.css" | ||
| } | ||
| ``` | ||
| ### Specifying your Tailwind JavaScript config path (Tailwind CSS v3) | ||
| 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`). | ||
@@ -48,3 +61,3 @@ | ||
| 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. | ||
@@ -209,2 +222,3 @@ You can sort additional attributes using the `tailwindAttributes` option, which takes an array of attribute names: | ||
| - `prettier-plugin-jsdoc` | ||
| - `prettier-plugin-multiline-arrays` | ||
| - `prettier-plugin-organize-attributes` | ||
@@ -211,0 +225,0 @@ - `prettier-plugin-organize-imports` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
Fixed alerts
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
4385528
70.49%- Number of package files
42
27.27%- Number of lines in readme file
240
6.19%- Is type module
Yes
NaNWorsened metrics
- Dependency count
19
18.75%- Dev dependency count
44
33.33%- Lines of code
1363
-88.29%No dependency changes