You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Use `generateRules` for `no-custom-classname`
* chore: updating `groups.js`
* tests: add tests for listed issues
* Speeding up the rule using @mpsijm ’s code
* fix: support for v3.1.0
* Drop support for `officialSorting` & `prependCustom` (`classnames-order`)
* Include fix from #144 (by @mpsijm)
* chore: removing the `groups` option
* chore: remove unused code
-**BREAKING CHANGE:**`groups`, `groupByResponsive`, `officialSorting` and `prependCustom` are deprecated ☠️.
43
+
The official sorting from `prettier-plugin-tailwindcss` is always used by `classnames-order`.
44
+
> This was required in order to support classnames generated by plugins.
45
+
- FIX: [Many fixes](https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/132) including support for classnames generated by plugins.
40
46
- FIX: [speeds up `enforces-shorthand` and `classnames-order`](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/136) with `officialSorting: true` by introducing WeakMap caches to reduce duplicate calculations (by [mpsijm](https://github.com/mpsijm) 🙏)
41
47
- New strategy for whitespaces and linebreaks: the plugin will attempt to leave them intact
42
48
- New option `officialSorting` for [`classnames-order`](docs/rules/classnames-order.md#officialsorting-default-false) can be set to `true` in order to use the same ordering order as the official [`prettier-plugin-tailwindcss`](https://www.npmjs.com/package/prettier-plugin-tailwindcss)
@@ -152,21 +158,23 @@ All these settings have nice default values that are explained in each rules' do
152
158
153
159
```json5
154
160
{
155
-
"settings": {
156
-
"tailwindcss": {
161
+
settings: {
162
+
tailwindcss: {
157
163
// These are the default values but feel free to customize
# Use a consistent orders for the Tailwind CSS classnames, based on property then on variants (tailwindcss/classnames-order)
1
+
# Use a consistent orders for the Tailwind CSS classnames, based on the official order (tailwindcss/classnames-order)
2
2
3
3
Enforces a consistent order of the Tailwind CSS classnames and its variants.
4
4
5
-
> **Note**: By default, it uses the same order as the official [Tailwind CSS documentation](https://tailwindcss.com/docs/container)**v2.1.1**
5
+
> **Note**: Since version `3.6.0`, the ordering is solely done using the [order process from the official `prettier-plugin-tailwindcss`](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted)
@@ -25,10 +25,6 @@ Examples of **correct** code for this rule:
25
25
"tailwindcss/classnames-order": [<enabled>, {
26
26
"callees":Array<string>,
27
27
"config":<string>|<object>,
28
-
"groupByResponsive":<boolean>,
29
-
"groups":Array<object>,
30
-
"officialSorting":<boolean>,
31
-
"prependCustom":<boolean>,
32
28
"removeDuplicates":<boolean>,
33
29
"tags":Array<string>,
34
30
}]
@@ -55,281 +51,10 @@ It is also possible to directly inject a configuration as plain `object` like `{
55
51
56
52
Finally, the plugin will [merge the provided configuration](https://tailwindcss.com/docs/configuration#referencing-in-java-script) with [Tailwind CSS's default configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js).
57
53
58
-
### `groupByResponsive` (default: `true`)
59
-
60
-
When this option was introduced in version 2.x.x of the plugin, this setting was set to `false` to avoid a tsunami of reorder in the classnames.
61
-
You had to set it to `true` intentionally.
62
-
63
-
Since version 3 of the plugin, the default value is now `true`, grouping by responsive modifier in priority vs. grouping by property.
### `groups` (default defined in [groups.js](../../lib/config/groups.js))
78
-
79
-
If you really need to, you can write your own configuration.
80
-
81
-
`groups` is a fairly long configuration array which defines the hierarchical orders to apply to your classnames prior to variants sorting.
82
-
83
-
I would recommend you to duplicate the `groups.js` file, move it in your own config location and move items as you wish. At its deepest, it is a list of patterns that will be used inside a regular expression.
84
-
85
-
```js
86
-
// custom-groups.js
87
-
module.exports.groups= [
88
-
{
89
-
type:'Layout',
90
-
members: [
91
-
{
92
-
type:'Floats',
93
-
members:'float\\-(right|left|none)',
94
-
},
95
-
{
96
-
type:'Box Sizing',
97
-
members:'box\\-(border|content)',
98
-
},
99
-
...
100
-
],
101
-
},
102
-
...
103
-
];
104
-
```
105
-
106
-
Import your own file then set it in your rules config.
Set `officialSorting` to `true` if you want to use the same ordering rules as the official plugin `prettier-plugin-tailwindcss`. Enabling this settings will cause `groupByResponsive`, `groups`, `prependCustom` and `removeDuplicates` options to be ignored.
122
-
123
-
### `prependCustom` (default: `false`)
124
-
125
-
By default, classnames which doesn't belong to Tailwind CSS will be pushed at the end. Set `prependCustom` to `true` if you prefer to move them at the beginning.
126
-
127
54
### `removeDuplicates` (default: `true`)
128
55
129
56
Duplicate classnames are automatically removed but you can always disable this behavior by setting `removeDuplicates` to `false`.
130
57
131
58
### `tags` (default: `[]`)
132
59
133
60
Optional, if you are using tagged templates, you should provide the tags in this array.
134
-
135
-
## Further Reading
136
-
137
-
### How it works
138
-
139
-
1. Groups classnames by property
140
-
2. Sorts each group based on configuration
141
-
3. Within each group, it sorts the variants:
142
-
1. Responsive (e.g. `sm:` ... `2xl:`, the order is based on the breakpoints defined in `theme.screens`)
143
-
2. Theme
144
-
1. (empty)
145
-
2.`dark:`
146
-
3. State (e.g. `hover:`... the order is based on `variantOrder`)
147
-
148
-
### Default groups
149
-
150
-
The [default `groups` configuration](../../lib/config/groups.js) will apply the following order, as in the official [Tailwind CSS documentation](https://tailwindcss.com/docs/container).
0 commit comments