--- source: crates/biome_js_analyze/tests/spec_tests.rs expression: codeOptionsUnsorted.jsx --- # Input ```jsx <> {/* attributes */} {/* SHOULD emit diagnostics (class/className attributes supported by default) */}
{/* SHOULD emit diagnostics (customClassAttribute attribute specified in options) */}
{/* SHOULD NOT emit diagnostics (notClassAttribute attribute NOT specified in options) */}
{/* utility sorting */} {/* SHOULD emit diagnostics (class attribute supported by default) */}
; // functions /* SHOULD emit diagnostics (functions specified in options) */ clsx("px-2 foo p-4 bar"); // TODO: tagged template literals are not supported yet tw`px-2 foo p-4 bar`; 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 emit diagnostics (clsx function 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 ``` codeOptionsUnsorted.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 emit diagnostics (customClassAttribute attribute 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 emit diagnostics (customClassAttribute attribute specified in options) */} ``` ``` codeOptionsUnsorted.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 emit diagnostics (customClassAttribute attribute 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 emit diagnostics (customClassAttribute attribute specified in options) */} 7 7 │
``` ``` codeOptionsUnsorted.jsx:7:28 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 5 │
6 │ {/* SHOULD emit diagnostics (customClassAttribute attribute specified in options) */} > 7 │
│ ^^^^^^^^^^^^^^^^^^ 8 │ {/* SHOULD NOT emit diagnostics (notClassAttribute attribute NOT specified in options) */} 9 │
i Unsafe fix: Sort the classes. 5 5 │
6 6 │ {/* SHOULD emit diagnostics (customClassAttribute attribute specified in options) */} 7 │ - → 7 │ + → 8 8 │ {/* SHOULD NOT emit diagnostics (notClassAttribute attribute NOT specified in options) */} 9 9 │
``` ``` codeOptionsUnsorted.jsx:12:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 10 │ {/* utility sorting */} 11 │ {/* SHOULD emit diagnostics (class attribute supported by default) */} > 12 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 13 │
14 │
i Unsafe fix: Sort the classes. 10 10 │ {/* utility sorting */} 11 11 │ {/* SHOULD emit diagnostics (class attribute supported by default) */} 12 │ - → 12 │ + → 13 13 │
14 14 │
``` ``` codeOptionsUnsorted.jsx:13:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 11 │ {/* SHOULD emit diagnostics (class attribute supported by default) */} 12 │
> 13 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 14 │
15 │
i Unsafe fix: Sort the classes. 11 11 │ {/* SHOULD emit diagnostics (class attribute supported by default) */} 12 12 │
13 │ - → 13 │ + → 14 14 │
15 15 │
``` ``` codeOptionsUnsorted.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 │
``` ``` codeOptionsUnsorted.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 │
``` ``` codeOptionsUnsorted.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 │
``` ``` codeOptionsUnsorted.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 │
``` ``` codeOptionsUnsorted.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 │
``` ``` codeOptionsUnsorted.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 │
``` ``` codeOptionsUnsorted.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 │ ; ``` ``` codeOptionsUnsorted.jsx:21:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 19 │
20 │
> 21 │
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 22 │ ; 23 │ i Unsafe fix: Sort the classes. 19 19 │
20 20 │
21 │ - → 21 │ + → 22 22 │ ; 23 23 │ ``` ``` codeOptionsUnsorted.jsx:26:6 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 24 │ // functions 25 │ /* SHOULD emit diagnostics (functions specified in options) */ > 26 │ clsx("px-2 foo p-4 bar"); │ ^^^^^^^^^^^^^^^^^^ 27 │ // TODO: tagged template literals are not supported yet 28 │ tw`px-2 foo p-4 bar`; i Unsafe fix: Sort the classes. 24 24 │ // functions 25 25 │ /* SHOULD emit diagnostics (functions specified in options) */ 26 │ - clsx("px-2·foo·p-4·bar"); 26 │ + clsx("foo·bar·p-4·px-2"); 27 27 │ // TODO: tagged template literals are not supported yet 28 28 │ tw`px-2 foo p-4 bar`; ``` ``` codeOptionsUnsorted.jsx:28:4 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 26 │ clsx("px-2 foo p-4 bar"); 27 │ // TODO: tagged template literals are not supported yet > 28 │ tw`px-2 foo p-4 bar`; │ ^^^^^^^^^^^^^^^^ 29 │ tw.div`px-2 foo p-4 bar`; 30 │ notClassFunction("px-2 foo p-4 bar"); i Unsafe fix: Sort the classes. 26 26 │ clsx("px-2 foo p-4 bar"); 27 27 │ // TODO: tagged template literals are not supported yet 28 │ - tw`px-2·foo·p-4·bar`; 28 │ + tw`foo·bar·p-4·px-2`; 29 29 │ tw.div`px-2 foo p-4 bar`; 30 30 │ notClassFunction("px-2 foo p-4 bar"); ``` ``` codeOptionsUnsorted.jsx:36:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 34 │ // nested values 35 │ /* SHOULD emit diagnostics (class attribute supported by default) */ > 36 │
; │ ^^^^^^^^^^^^^^^^^^ 37 │
; 38 │
; 36 │ + ; 37 37 │
; 38 38 │
; > 37 │
; │ ^^^^^^^^^^^^^^^^^^ 38 │
; 37 │ - ; 37 │ + ; 38 38 │
42 │ "px-2 foo p-4 bar", │ ^^^^^^^^^^^^^^^^^^ 43 │ // TODO: property should be sorted 44 │ { "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. 40 40 │ // TODO: property should be sorted 41 41 │ "px-2 foo p-4 bar": [ 42 │ - → → → "px-2·foo·p-4·bar", 42 │ + → → → "foo·bar·p-4·px-2", 43 43 │ // TODO: property should be sorted 44 44 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] }, ``` ``` codeOptionsUnsorted.jsx:44:26 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 42 │ "px-2 foo p-4 bar", 43 │ // TODO: property should be sorted > 44 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] }, │ ^^^^^^^^^^^^^^^^^^ 45 │ ], 46 │ }} i Unsafe fix: Sort the classes. 42 42 │ "px-2 foo p-4 bar", 43 43 │ // TODO: property should be sorted 44 │ - → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["px-2·foo·p-4·bar"]·}, 44 │ + → → → {·"px-2·foo·p-4·bar":·"foo·bar·p-4·px-2",·custom:·["px-2·foo·p-4·bar"]·}, 45 45 │ ], 46 46 │ }} ``` ``` codeOptionsUnsorted.jsx:44:55 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 42 │ "px-2 foo p-4 bar", 43 │ // TODO: property should be sorted > 44 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] }, │ ^^^^^^^^^^^^^^^^^^ 45 │ ], 46 │ }} i Unsafe fix: Sort the classes. 42 42 │ "px-2 foo p-4 bar", 43 43 │ // TODO: property should be sorted 44 │ - → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["px-2·foo·p-4·bar"]·}, 44 │ + → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["foo·bar·p-4·px-2"]·}, 45 45 │ ], 46 46 │ }} ``` ``` codeOptionsUnsorted.jsx:49:7 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 47 │ />; 48 │ /* SHOULD emit diagnostics (clsx function specified in options) */ > 49 │ clsx(["px-2 foo p-4 bar"]); │ ^^^^^^^^^^^^^^^^^^ 50 │ clsx({ 51 │ "px-2 foo p-4 bar": [ i Unsafe fix: Sort the classes. 47 47 │ />; 48 48 │ /* SHOULD emit diagnostics (clsx function specified in options) */ 49 │ - clsx(["px-2·foo·p-4·bar"]); 49 │ + clsx(["foo·bar·p-4·px-2"]); 50 50 │ clsx({ 51 51 │ "px-2 foo p-4 bar": [ ``` ``` codeOptionsUnsorted.jsx:52:3 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 50 │ clsx({ 51 │ "px-2 foo p-4 bar": [ > 52 │ "px-2 foo p-4 bar", │ ^^^^^^^^^^^^^^^^^^ 53 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] }, 54 │ ], i Unsafe fix: Sort the classes. 50 50 │ clsx({ 51 51 │ "px-2 foo p-4 bar": [ 52 │ - → → "px-2·foo·p-4·bar", 52 │ + → → "foo·bar·p-4·px-2", 53 53 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] }, 54 54 │ ], ``` ``` codeOptionsUnsorted.jsx:53:25 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 51 │ "px-2 foo p-4 bar": [ 52 │ "px-2 foo p-4 bar", > 53 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] }, │ ^^^^^^^^^^^^^^^^^^ 54 │ ], 55 │ }); i Unsafe fix: Sort the classes. 51 51 │ "px-2 foo p-4 bar": [ 52 52 │ "px-2 foo p-4 bar", 53 │ - → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["px-2·foo·p-4·bar"]·}, 53 │ + → → {·"px-2·foo·p-4·bar":·"foo·bar·p-4·px-2",·custom:·["px-2·foo·p-4·bar"]·}, 54 54 │ ], 55 55 │ }); ``` ``` codeOptionsUnsorted.jsx:53:54 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ! These CSS classes should be sorted. 51 │ "px-2 foo p-4 bar": [ 52 │ "px-2 foo p-4 bar", > 53 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] }, │ ^^^^^^^^^^^^^^^^^^ 54 │ ], 55 │ }); i Unsafe fix: Sort the classes. 51 51 │ "px-2 foo p-4 bar": [ 52 52 │ "px-2 foo p-4 bar", 53 │ - → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["px-2·foo·p-4·bar"]·}, 53 │ + → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["foo·bar·p-4·px-2"]·}, 54 54 │ ], 55 55 │ }); ```