|
2 | 2 |
|
3 | 3 |  |
4 | 4 |
|
| 5 | +## Rules |
| 6 | + |
| 7 | +<!-- begin auto-generated rules list --> |
| 8 | + |
| 9 | +🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).\ |
| 10 | +💡 Manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions). |
| 11 | + |
| 12 | +| Name | Description | 🔧 | 💡 | |
| 13 | +| :------------------------------------------------- | :---------------------------------------------------------------------------------- | :- | :- | |
| 14 | +| [classnames-order](docs/rules/classnames-order.md) | Enforces a consistent order for the Tailwind CSS classnames, based on the compiler. | 🔧 | 💡 | |
| 15 | + |
| 16 | +<!-- end auto-generated rules list --> |
| 17 | + |
| 18 | +## Settings |
| 19 | + |
| 20 | +You should specify settings that will be shared across all the plugin rules. ([More about eslint shared settings](https://eslint.org/docs/latest/use/configure/configuration-files#configuring-shared-settings)) |
| 21 | + |
| 22 | +```js |
| 23 | +// eslint.config.mjs |
| 24 | +{ |
| 25 | + settings: { |
| 26 | + tailwindcss: { |
| 27 | + // Attributes/props that could contain Tailwind CSS classes... |
| 28 | + // Optional, default values: ["class", "className", "ngClass", "@apply"] |
| 29 | + attributes: ["class"], |
| 30 | + // The absolute path pointing to you main Tailwind CSS v4 config file. |
| 31 | + // It must be a `.css` file (v4), not a `.js` file (v3) |
| 32 | + // REQUIRED, default value will not help |
| 33 | + cssConfigPath: dirname(fileURLToPath(import.meta.url)) + "/styles/tailwind.css", |
| 34 | + // Functions/tagFunctions that will be parsed by the plugin. |
| 35 | + // Optional, default values: ["classnames", "clsx", "ctl", "cva", "tv", "tw"] |
| 36 | + functions: ["twClasses"] |
| 37 | + }, |
| 38 | + } |
| 39 | +} |
| 40 | +``` |
| 41 | +
|
| 42 | +The default settings are exported via the [`DEFAULT_SETTINGS`](src/utils/parse-plugin-settings.ts). |
| 43 | +
|
| 44 | +## Made fro Tailwind CSS v4 |
| 45 | +
|
5 | 46 | Version 4 of the `eslint-plugin-tailwindcss` is: |
6 | 47 |
|
7 | 48 | - re-written from scratch |
@@ -29,89 +70,16 @@ This version is far from finished, yet it is available and open for contribution |
29 | 70 |
|
30 | 71 | - restore the automated tests running on the merge requests of the repo |
31 | 72 | - implement and test the usage of `tailwind-api-utils` |
| 73 | +- read the settings from eslint (shared settings & rules settings) |
32 | 74 |
|
33 | 75 | ### Next steps |
34 | 76 |
|
35 | | -- read the settings from eslint (shared settings & rules settings) |
36 | 77 | - create the config utility |
37 | 78 | - implement the `classnames-order` rule and its tests |
38 | 79 |
|
39 | | -## Getting started |
40 | | - |
41 | | -I worked on this repo using `pnpm` but it should work with other package manager. |
42 | | - |
43 | | -### Install |
44 | | - |
45 | | -`pnpm i` |
46 | | - |
47 | | -### Build |
48 | | - |
49 | | -`pnpm build` |
50 | | - |
51 | | -### Test |
52 | | - |
53 | | -`pnpm test` |
54 | | - |
55 | | -or |
56 | | - |
57 | | -`pnpm test:jest` |
58 | | - |
59 | | -#### `jest` or `vitest` |
60 | | - |
61 | | -Tests were setup to work with `jest` and `vitest` both comes with pros and cons... |
62 | | - |
63 | | -I would recommend Vitest but I also added Jest in case you want it. |
64 | | - |
65 | | -| Jest | Vitest | |
66 | | -| :----------------------- | :--------------------------------------------- | |
67 | | -| Based on `commonjs` | Based on `ESM` | |
68 | | -| ✅ Mocking | ✅ Mocking | |
69 | | -| ✅ Snapshots | ✅ Snapshots | |
70 | | -| ✅ Parallel testing | ✅ Parallel testing | |
71 | | -| ✅ Fast | ✅ Often faster | |
72 | | -| - | ✅ Support benches | |
73 | | -| ❌ Require `ts-jest` lib | ❌ Requires `setupFile` and `vitest.config.ts` | |
74 | | - |
75 | | -NB: In order to use, the [`RuleTester`](https://typescript-eslint.io/packages/rule-tester) from `@typescript-eslint/rule-tester`, we must: |
76 | | - |
77 | | -- Have a `tsconfig.json` with: |
78 | | - ``` |
79 | | - { |
80 | | - "compilerOptions": { |
81 | | - "module": "nodenext", |
82 | | - "moduleResolution": "nodenext" |
83 | | - } |
84 | | - } |
85 | | - ``` |
86 | | - More info can be found on [`v6`: Cannot find module `@typescript-eslint/*` or its corresponding type declarations](https://github.com/typescript-eslint/typescript-eslint/issues/7284). |
87 | | - > You can use `bundler`, `node16`, or `nodenext` for `moduleResolution`. |
88 | | -- Use `eslint` with `v8`, [`typescript-eslint` does not support `v9` yet](https://github.com/typescript-eslint/typescript-eslint/issues/8211) |
89 | | - |
90 | | -### Docs |
91 | | - |
92 | | -`pnpm docs:init` will create new files for each rule if necessary. |
93 | | - |
94 | | -`pnpm docs:update` will update existing files and the rules list. |
95 | | - |
96 | | -You can see an example of generated documentation in the next section. |
97 | | - |
98 | | -### Rules |
99 | | - |
100 | | -<!-- begin auto-generated rules list --> |
101 | | - |
102 | | -💡 Manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions). |
103 | | - |
104 | | -| Name | Description | 💡 | |
105 | | -| :------------------------------- | :--------------------- | :- | |
106 | | -| [my-rule](docs/rules/my-rule.md) | An example ESLint rule | 💡 | |
107 | | - |
108 | | -<!-- end auto-generated rules list --> |
109 | | - |
110 | | -## Additional resources |
111 | | - |
112 | | -See [`eslint-plugin-example-typed-linting`](https://github.com/typescript-eslint/examples/tree/main/packages/eslint-plugin-example-typed-linting) for an example plugin that supports typed linting. |
| 80 | +## Contributing |
113 | 81 |
|
114 | | -Another example of eslint-plugin using `typescript-eslint` is [`eslint-plugin-vitest`](https://github.com/vitest-dev/eslint-plugin-vitest)... |
| 82 | +The project is open to all developers, you can [contribute the `eslint-plugin-tailwindcss`](CONTRIBUTING.md). |
115 | 83 |
|
116 | 84 | ## 🤝 Support `eslint-plugin-tailwindcss` |
117 | 85 |
|
|
0 commit comments