Skip to content

Commit

Permalink
tweak docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@ematipico
ematipico committed Jan 24, 2024
1 parent 627484d commit e078cbf
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 78 deletions.
19 changes: 18 additions & 1 deletion crates/biome_js_analyze/src/semantic_analyzers/nursery/use_sorted_classes.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,23 @@ declare_rule! {
/// <div class="px-2 foo p-4 bar" />;
/// ```
///
/// ```jsx,expect_diagnostic
/// <div className="px-2 foo p-4 bar" />
/// ```
///
/// ### Valid
///
/// ```jsx
/// <div class="foo bar p-4 px-2"></div>
/// 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"] },
/// ],
/// });
/// ```
///
/// ## Options
///
/// ### Code-related
Expand All @@ -64,7 +81,7 @@ declare_rule! {
///
/// Tagged template literals are also supported, for example:
///
/// ```js
/// ```js,ignore
/// tw`px-2`;
/// tw.div`px-2`;
/// ```
Expand Down
9 changes: 0 additions & 9 deletions crates/biome_js_analyze/tests/specs/nursery/useSortedClasses/unsorted.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,6 @@
<div class="gap-8 bg-indigo-100 text-indigo-900 p-3 border-l-4 border-indigo-500 custom-border" />
</>;

// functions
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
<div class={"px-2 foo p-4 bar"} />;
<div class={["px-2 foo p-4 bar"]} />;
Expand Down
127 changes: 59 additions & 68 deletions crates/biome_js_analyze/tests/specs/nursery/useSortedClasses/unsorted.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,6 @@ expression: unsorted.jsx
<div class="gap-8 bg-indigo-100 text-indigo-900 p-3 border-l-4 border-indigo-500 custom-border" />
</>;

// functions
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
<div class={"px-2 foo p-4 bar"} />;
<div class={["px-2 foo p-4 bar"]} />;
Expand Down Expand Up @@ -345,120 +336,120 @@ unsorted.jsx:17:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━
```

```
unsorted.jsx:30:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
unsorted.jsx:21:13 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
29 │ // nested values
> 30 │ <div class={"px-2 foo p-4 bar"} />;
20 │ // nested values
> 21 │ <div class={"px-2 foo p-4 bar"} />;
│ ^^^^^^^^^^^^^^^^^^
31 │ <div class={["px-2 foo p-4 bar"]} />;
32 │ <div
22 │ <div class={["px-2 foo p-4 bar"]} />;
23 │ <div
i Unsafe fix: Sort the classes.
28 28 │
29 29 │ // nested values
30 │ - <div·class={"px-2·foo·p-4·bar"}·/>;
30 │ + <div·class={"foo·bar·p-4·px-2"}·/>;
31 31 │ <div class={["px-2 foo p-4 bar"]} />;
32 32 │ <div
19 19 │
20 20 │ // nested values
21 │ - <div·class={"px-2·foo·p-4·bar"}·/>;
21 │ + <div·class={"foo·bar·p-4·px-2"}·/>;
22 22 │ <div class={["px-2 foo p-4 bar"]} />;
23 23 │ <div
```

```
unsorted.jsx:31:14 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
unsorted.jsx:22:14 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
29 │ // nested values
30 │ <div class={"px-2 foo p-4 bar"} />;
> 31 │ <div class={["px-2 foo p-4 bar"]} />;
20 │ // nested values
21 │ <div class={"px-2 foo p-4 bar"} />;
> 22 │ <div class={["px-2 foo p-4 bar"]} />;
│ ^^^^^^^^^^^^^^^^^^
32 │ <div
33 │ class={{
23 │ <div
24 │ class={{
i Unsafe fix: Sort the classes.
29 29 │ // nested values
30 30 │ <div class={"px-2 foo p-4 bar"} />;
31 │ - <div·class={["px-2·foo·p-4·bar"]}·/>;
31 │ + <div·class={["foo·bar·p-4·px-2"]}·/>;
32 32 │ <div
33 33 │ class={{
20 20 │ // nested values
21 21 │ <div class={"px-2 foo p-4 bar"} />;
22 │ - <div·class={["px-2·foo·p-4·bar"]}·/>;
22 │ + <div·class={["foo·bar·p-4·px-2"]}·/>;
23 23 │ <div
24 24 │ class={{
```

```
unsorted.jsx:36:4 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
unsorted.jsx:27:4 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
34 │ // TODO: property should be sorted
35 │ "px-2 foo p-4 bar": [
> 36 │ "px-2 foo p-4 bar",
25 │ // TODO: property should be sorted
26 │ "px-2 foo p-4 bar": [
> 27 │ "px-2 foo p-4 bar",
│ ^^^^^^^^^^^^^^^^^^
37 │ // TODO: property should be sorted
38 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
28 │ // TODO: property should be sorted
29 │ { "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.
34 34 │ // TODO: property should be sorted
35 35 │ "px-2 foo p-4 bar": [
36 │ - → → → "px-2·foo·p-4·bar",
36 │ + → → → "foo·bar·p-4·px-2",
37 37 │ // TODO: property should be sorted
38 38 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
25 25 │ // TODO: property should be sorted
26 26 │ "px-2 foo p-4 bar": [
27 │ - → → → "px-2·foo·p-4·bar",
27 │ + → → → "foo·bar·p-4·px-2",
28 28 │ // TODO: property should be sorted
29 29 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
```

```
unsorted.jsx:38:26 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
unsorted.jsx:29:26 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
36 │ "px-2 foo p-4 bar",
37 │ // TODO: property should be sorted
> 38 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
27 │ "px-2 foo p-4 bar",
28 │ // TODO: property should be sorted
> 29 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
│ ^^^^^^^^^^^^^^^^^^
39 │ ],
40 │ }}
30 │ ],
31 │ }}
i Unsafe fix: Sort the classes.
36 36 │ "px-2 foo p-4 bar",
37 37 │ // TODO: property should be sorted
38 │ - → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["px-2·foo·p-4·bar"]·},
38 │ + → → → {·"px-2·foo·p-4·bar":·"foo·bar·p-4·px-2",·custom:·["px-2·foo·p-4·bar"]·},
39 39 │ ],
40 40 │ }}
27 27 │ "px-2 foo p-4 bar",
28 28 │ // TODO: property should be sorted
29 │ - → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["px-2·foo·p-4·bar"]·},
29 │ + → → → {·"px-2·foo·p-4·bar":·"foo·bar·p-4·px-2",·custom:·["px-2·foo·p-4·bar"]·},
30 30 │ ],
31 31 │ }}
```

```
unsorted.jsx:38:55 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
unsorted.jsx:29:55 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
! These CSS classes should be sorted.
36 │ "px-2 foo p-4 bar",
37 │ // TODO: property should be sorted
> 38 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
27 │ "px-2 foo p-4 bar",
28 │ // TODO: property should be sorted
> 29 │ { "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
│ ^^^^^^^^^^^^^^^^^^
39 │ ],
40 │ }}
30 │ ],
31 │ }}
i Unsafe fix: Sort the classes.
36 36 │ "px-2 foo p-4 bar",
37 37 │ // TODO: property should be sorted
38 │ - → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["px-2·foo·p-4·bar"]·},
38 │ + → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["foo·bar·p-4·px-2"]·},
39 39 │ ],
40 40 │ }}
27 27 │ "px-2 foo p-4 bar",
28 28 │ // TODO: property should be sorted
29 │ - → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["px-2·foo·p-4·bar"]·},
29 │ + → → → {·"px-2·foo·p-4·bar":·"px-2·foo·p-4·bar",·custom:·["foo·bar·p-4·px-2"]·},
30 30 │ ],
31 31 │ }}
```
Expand Down
33 changes: 33 additions & 0 deletions website/src/content/docs/linter/rules/use-sorted-classes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,39 @@ NOTE: this rule is only partially implemented. Progress is being tracked in the

</code></pre>

```jsx
<div className="px-2 foo p-4 bar" />
```

<pre class="language-text"><code class="language-text">nursery/useSortedClasses.js:1:16 <a href="https://biomejs.dev/linter/rules/use-sorted-classes">lint/nursery/useSortedClasses</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━

<strong><span style="color: Orange;"> </span></strong><strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">These CSS classes should be sorted.</span>

<strong><span style="color: Tomato;"> </span></strong><strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;div className=&quot;px-2 foo p-4 bar&quot; /&gt;
<strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong>
<strong>2 │ </strong>

<strong><span style="color: lightgreen;"> </span></strong><strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unsafe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Sort the classes.</span>

<strong>1</strong> <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;">&lt;</span><span style="color: Tomato;">d</span><span style="color: Tomato;">i</span><span style="color: Tomato;">v</span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;">c</span><span style="color: Tomato;">l</span><span style="color: Tomato;">a</span><span style="color: Tomato;">s</span><span style="color: Tomato;">s</span><span style="color: Tomato;">N</span><span style="color: Tomato;">a</span><span style="color: Tomato;">m</span><span style="color: Tomato;">e</span><span style="color: Tomato;">=</span><span style="color: Tomato;">&quot;</span><span style="color: Tomato;"><strong>p</strong></span><span style="color: Tomato;"><strong>x</strong></span><span style="color: Tomato;"><strong>-</strong></span><span style="color: Tomato;"><strong>2</strong></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><strong>f</strong></span><span style="color: Tomato;"><strong>o</strong></span><span style="color: Tomato;"><strong>o</strong></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;">p</span><span style="color: Tomato;">-</span><span style="color: Tomato;">4</span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><strong>b</strong></span><span style="color: Tomato;"><strong>a</strong></span><span style="color: Tomato;"><strong>r</strong></span><span style="color: Tomato;">&quot;</span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;">/</span><span style="color: Tomato;">&gt;</span>
<strong>1</strong><strong> │ </strong><span style="color: MediumSeaGreen;">+</span> <span style="color: MediumSeaGreen;">&lt;</span><span style="color: MediumSeaGreen;">d</span><span style="color: MediumSeaGreen;">i</span><span style="color: MediumSeaGreen;">v</span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;">c</span><span style="color: MediumSeaGreen;">l</span><span style="color: MediumSeaGreen;">a</span><span style="color: MediumSeaGreen;">s</span><span style="color: MediumSeaGreen;">s</span><span style="color: MediumSeaGreen;">N</span><span style="color: MediumSeaGreen;">a</span><span style="color: MediumSeaGreen;">m</span><span style="color: MediumSeaGreen;">e</span><span style="color: MediumSeaGreen;">=</span><span style="color: MediumSeaGreen;">&quot;</span><span style="color: MediumSeaGreen;"><strong>f</strong></span><span style="color: MediumSeaGreen;"><strong>o</strong></span><span style="color: MediumSeaGreen;"><strong>o</strong></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><strong>b</strong></span><span style="color: MediumSeaGreen;"><strong>a</strong></span><span style="color: MediumSeaGreen;"><strong>r</strong></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;">p</span><span style="color: MediumSeaGreen;">-</span><span style="color: MediumSeaGreen;">4</span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><strong>p</strong></span><span style="color: MediumSeaGreen;"><strong>x</strong></span><span style="color: MediumSeaGreen;"><strong>-</strong></span><span style="color: MediumSeaGreen;"><strong>2</strong></span><span style="color: MediumSeaGreen;">&quot;</span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;">/</span><span style="color: MediumSeaGreen;">&gt;</span>
<strong>2</strong> <strong>2</strong><strong> │ </strong>

</code></pre>

### Valid

```jsx
<div class="foo bar p-4 px-2"></div>
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"] },
],
});
```

## Options

### Code-related
Expand Down

0 comments on commit e078cbf

Please sign in to comment.