---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: unsorted.jsx
---
# Input
```jsx
<>
{/* attributes */}
{/* SHOULD emit diagnostics (class/className attributes supported by default) */}
{/* SHOULD NOT emit diagnostics (custom attributes not specified in options) */}
{/* utility sorting */}
{/* SHOULD emit diagnostics (class attribute supported by default) */}
;
// functions
/* SHOULD NOT emit diagnostics (functions not specified in options) */
clsx("px-2 foo p-4 bar");
tw`px-2 foo p-4 bar`;
// TODO: tagged template literals with static member expressions
tw.div`px-2 foo p-4 bar`;
notClassFunction("px-2 foo p-4 bar");
notTemplateFunction`px-2 foo p-4 bar`;
notTemplateFunction.div`px-2 foo p-4 bar`;
// nested values
/* SHOULD emit diagnostics (class attribute supported by default) */
;
;
;
;
;
/* SHOULD NOT emit diagnostics (clsx function not specified in options) */
clsx(["px-2 foo p-4 bar"]);
clsx({
"px-2 foo p-4 bar": [
"px-2 foo p-4 bar",
{ "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
],
});
```
# Diagnostics
```
unsorted.jsx:4:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
2 │ {/* attributes */}
3 │ {/* SHOULD emit diagnostics (class/className attributes supported by default) */}
> 4 │
│ ^^^^^^^^^^^^^^^^^^
5 │
6 │ {/* SHOULD NOT emit diagnostics (custom attributes not specified in options) */}
i Unsafe fix: Sort the classes.
2 2 │ {/* attributes */}
3 3 │ {/* SHOULD emit diagnostics (class/className attributes supported by default) */}
4 │ - →
4 │ + →
5 5 │
6 6 │ {/* SHOULD NOT emit diagnostics (custom attributes not specified in options) */}
```
```
unsorted.jsx:5:17 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
3 │ {/* SHOULD emit diagnostics (class/className attributes supported by default) */}
4 │
> 5 │
│ ^^^^^^^^^^^^^^^^^^
6 │ {/* SHOULD NOT emit diagnostics (custom attributes not specified in options) */}
7 │
i Unsafe fix: Sort the classes.
3 3 │ {/* SHOULD emit diagnostics (class/className attributes supported by default) */}
4 4 │
5 │ - →
5 │ + →
6 6 │ {/* SHOULD NOT emit diagnostics (custom attributes not specified in options) */}
7 7 │
```
```
unsorted.jsx:11:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
9 │ {/* utility sorting */}
10 │ {/* SHOULD emit diagnostics (class attribute supported by default) */}
> 11 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 │
13 │
i Unsafe fix: Sort the classes.
9 9 │ {/* utility sorting */}
10 10 │ {/* SHOULD emit diagnostics (class attribute supported by default) */}
11 │ - →
11 │ + →
12 12 │
13 13 │
```
```
unsorted.jsx:12:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
10 │ {/* SHOULD emit diagnostics (class attribute supported by default) */}
11 │
> 12 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 │
14 │
i Unsafe fix: Sort the classes.
10 10 │ {/* SHOULD emit diagnostics (class attribute supported by default) */}
11 11 │
12 │ - →
12 │ + →
13 13 │
14 14 │
```
```
unsorted.jsx:13:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
11 │
12 │
> 13 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
14 │
15 │
i Unsafe fix: Sort the classes.
11 11 │
12 12 │
13 │ - →
13 │ + →
14 14 │
15 15 │
```
```
unsorted.jsx:14:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
12 │
13 │
> 14 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
15 │
16 │
i Unsafe fix: Sort the classes.
12 12 │
13 13 │
14 │ - →
14 │ + →
15 15 │
16 16 │
```
```
unsorted.jsx:15:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
13 │
14 │
> 15 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
16 │
17 │
i Unsafe fix: Sort the classes.
13 13 │
14 14 │
15 │ - →
15 │ + →
16 16 │
17 17 │
```
```
unsorted.jsx:16:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
14 │
15 │
> 16 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
17 │
18 │
i Unsafe fix: Sort the classes.
14 14 │
15 15 │
16 │ - →
16 │ + →
17 17 │
18 18 │
```
```
unsorted.jsx:17:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
15 │
16 │
> 17 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
18 │
19 │
i Unsafe fix: Sort the classes.
15 15 │
16 16 │
17 │ - →
17 │ + →
18 18 │
19 19 │
```
```
unsorted.jsx:18:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
16 │
17 │
> 18 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
19 │
20 │
i Unsafe fix: Sort the classes.
16 16 │
17 17 │
18 │ - →
18 │ + →
19 19 │
20 20 │
```
```
unsorted.jsx:19:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
17 │
18 │
> 19 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
20 │
21 │ ;
i Unsafe fix: Sort the classes.
17 17 │
18 18 │
19 │ - →
19 │ + →
20 20 │
21 21 │ ;
```
```
unsorted.jsx:20:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
18 │
19 │
> 20 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
21 │ ;
22 │
i Unsafe fix: Sort the classes.
18 18 │
19 19 │
20 │ - →
20 │ + →
21 21 │ ;
22 22 │
```
```
unsorted.jsx:35:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
33 │ // nested values
34 │ /* SHOULD emit diagnostics (class attribute supported by default) */
> 35 │ ;
│ ^^^^^^^^^^^^^^^^^^
36 │ ;
37 │ ;
i Unsafe fix: Sort the classes.
33 33 │ // nested values
34 34 │ /* SHOULD emit diagnostics (class attribute supported by default) */
35 │ - ;
35 │ + ;
36 36 │ ;
37 37 │ ;
```
```
unsorted.jsx:36:14 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
34 │ /* SHOULD emit diagnostics (class attribute supported by default) */
35 │ ;
> 36 │ ;
│ ^^^^^^^^^^^^^^^^
37 │ ;
38 │ ;
i Unsafe fix: Sort the classes.
34 34 │ /* SHOULD emit diagnostics (class attribute supported by default) */
35 35 │ ;
36 │ - ;
36 │ + ;
37 37 │ ;
38 38 │ ;
```
```
unsorted.jsx:37:14 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
35 │ ;
36 │ ;
> 37 │ ;
│ ^^^^^^^^^^^^^^^^^^
38 │ ;
39 │ ;
36 36 │ ;
37 │ - ;
37 │ + ;
38 38 │ ;
39 39 │ ;
37 │ ;
> 38 │ ;
│ ^^^^^^^^^^^^^^^^
39 │ ;
37 37 │ ;
38 │ - ;
38 │ + ;
39 39 │ 43 │ "px-2 foo p-4 bar",
│ ^^^^^^^^^^^^^^^^^^
44 │ // TODO: property should be sorted
45 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
i Unsafe fix: Sort the classes.
41 41 │ // TODO: property should be sorted
42 42 │ "px-2 foo p-4 bar": [
43 │ - → → → "px-2·foo·p-4·bar",
43 │ + → → → "foo·bar·p-4·px-2",
44 44 │ // TODO: property should be sorted
45 45 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
```
```
unsorted.jsx:45:26 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
43 │ "px-2 foo p-4 bar",
44 │ // TODO: property should be sorted
> 45 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
│ ^^^^^^^^^^^^^^^^^^
46 │ ],
47 │ }}
i Unsafe fix: Sort the classes.
43 43 │ "px-2 foo p-4 bar",
44 44 │ // TODO: property should be sorted
45 │ - → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["px-2·foo·p-4·bar"]·},
45 │ + → → → {·"px-2·foo·p-4·bar":·"foo·bar·p-4·px-2",·custom:·["px-2·foo·p-4·bar"]·},
46 46 │ ],
47 47 │ }}
```
```
unsorted.jsx:45:55 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
43 │ "px-2 foo p-4 bar",
44 │ // TODO: property should be sorted
> 45 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
│ ^^^^^^^^^^^^^^^^^^
46 │ ],
47 │ }}
i Unsafe fix: Sort the classes.
43 43 │ "px-2 foo p-4 bar",
44 44 │ // TODO: property should be sorted
45 │ - → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["px-2·foo·p-4·bar"]·},
45 │ + → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["foo·bar·p-4·px-2"]·},
46 46 │ ],
47 47 │ }}
```