Skip to content

Commit 62b7a01

Browse files
DunqingDunqing
committed
docs(formatter): clarify experimentalTailwindcss configuration comments (#17898)
1 parent 9e89389 commit 62b7a01

File tree

4 files changed

+43
-28
lines changed

4 files changed

+43
-28
lines changed

‎apps/oxfmt/src/core/oxfmtrc.rs‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,13 @@ pub struct Oxfmtrc {
8989
#[serde(skip_serializing_if = "Option::is_none")]
9090
pub experimental_sort_package_json: Option<SortPackageJsonUserConfig>,
9191

92-
/// Experimental: Enable Tailwind CSS class sorting in JSX class/className attributes.
93-
/// When enabled, class strings will be collected and passed to a callback for sorting.
94-
/// Pass `true` or an object with options from `prettier-plugin-tailwindcss`.
92+
/// Experimental: Sort Tailwind CSS classes in string literals.
93+
///
94+
/// When enabled, `Oxfmt` sorts Tailwind CSS classes using the same algorithm as
95+
/// [`prettier-plugin-tailwindcss`](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).
96+
///
97+
/// See [`TailwindcssConfig`] for available options.
98+
///
9599
/// (Default: disabled)
96100
#[serde(skip_serializing_if = "Option::is_none")]
97101
pub experimental_tailwindcss: Option<TailwindcssConfig>,
@@ -283,12 +287,11 @@ impl SortPackageJsonConfig {
283287
}
284288

285289
/// Configuration for Tailwind CSS class sorting.
286-
/// Based on options from `prettier-plugin-tailwindcss`.
287290
///
288-
/// Note: All `tailwind` prefixes have been removed from option names.
289-
/// For example, use `config` instead of `tailwindConfig`.
291+
/// Option names omit the `tailwind` prefix used in the original plugin
292+
/// (e.g., `config` instead of `tailwindConfig`).
290293
///
291-
/// See <https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options>
294+
/// See [`prettier-plugin-tailwindcss` options](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options) for details.
292295
#[derive(Debug, Clone, Default, Deserialize, Serialize, JsonSchema)]
293296
#[serde(rename_all = "camelCase", default)]
294297
pub struct TailwindcssConfig {
@@ -310,6 +313,8 @@ pub struct TailwindcssConfig {
310313

311314
/// List of custom function names that contain Tailwind CSS classes.
312315
///
316+
/// Note: Regex patterns are not yet supported.
317+
///
313318
/// Example: `["clsx", "cn", "cva", "tw"]`
314319
///
315320
/// Default: `[]`
@@ -318,6 +323,8 @@ pub struct TailwindcssConfig {
318323

319324
/// List of attributes that contain Tailwind CSS classes.
320325
///
326+
/// Note: Regex patterns are not yet supported.
327+
///
321328
/// Example: `["myClassProp", ":class"]`
322329
///
323330
/// Default: `["class", "className"]`

‎npm/oxfmt/configuration_schema.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -157,15 +157,15 @@
157157
"markdownDescription": "User-provided configuration for `package.json` sorting.\n\n- `true`: Enable sorting with default options\n- `false`: Disable sorting\n- `{ sortScripts: true }`: Enable sorting with custom options"
158158
},
159159
"TailwindcssConfig": {
160-
"description": "Configuration for Tailwind CSS class sorting.\nBased on options from `prettier-plugin-tailwindcss`.\n\nNote: All `tailwind` prefixes have been removed from option names.\nFor example, use `config` instead of `tailwindConfig`.\n\nSee <https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options>",
161-
"markdownDescription": "Configuration for Tailwind CSS class sorting.\nBased on options from `prettier-plugin-tailwindcss`.\n\nNote: All `tailwind` prefixes have been removed from option names.\nFor example, use `config` instead of `tailwindConfig`.\n\nSee <https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options>",
160+
"description": "Configuration for Tailwind CSS class sorting.\n\nOption names omit the `tailwind` prefix used in the original plugin\n(e.g., `config` instead of `tailwindConfig`).\n\nSee [`prettier-plugin-tailwindcss` options](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options) for details.",
161+
"markdownDescription": "Configuration for Tailwind CSS class sorting.\n\nOption names omit the `tailwind` prefix used in the original plugin\n(e.g., `config` instead of `tailwindConfig`).\n\nSee [`prettier-plugin-tailwindcss` options](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options) for details.",
162162
"properties": {
163163
"attributes": {
164-
"description": "List of attributes that contain Tailwind CSS classes.\n\nExample: `[\"myClassProp\", \":class\"]`\n\nDefault: `[\"class\", \"className\"]`",
164+
"description": "List of attributes that contain Tailwind CSS classes.\n\nNote: Regex patterns are not yet supported.\n\nExample: `[\"myClassProp\", \":class\"]`\n\nDefault: `[\"class\", \"className\"]`",
165165
"items": {
166166
"type": "string"
167167
},
168-
"markdownDescription": "List of attributes that contain Tailwind CSS classes.\n\nExample: `[\"myClassProp\", \":class\"]`\n\nDefault: `[\"class\", \"className\"]`",
168+
"markdownDescription": "List of attributes that contain Tailwind CSS classes.\n\nNote: Regex patterns are not yet supported.\n\nExample: `[\"myClassProp\", \":class\"]`\n\nDefault: `[\"class\", \"className\"]`",
169169
"type": [
170170
"array",
171171
"null"
@@ -180,11 +180,11 @@
180180
]
181181
},
182182
"functions": {
183-
"description": "List of custom function names that contain Tailwind CSS classes.\n\nExample: `[\"clsx\", \"cn\", \"cva\", \"tw\"]`\n\nDefault: `[]`",
183+
"description": "List of custom function names that contain Tailwind CSS classes.\n\nNote: Regex patterns are not yet supported.\n\nExample: `[\"clsx\", \"cn\", \"cva\", \"tw\"]`\n\nDefault: `[]`",
184184
"items": {
185185
"type": "string"
186186
},
187-
"markdownDescription": "List of custom function names that contain Tailwind CSS classes.\n\nExample: `[\"clsx\", \"cn\", \"cva\", \"tw\"]`\n\nDefault: `[]`",
187+
"markdownDescription": "List of custom function names that contain Tailwind CSS classes.\n\nNote: Regex patterns are not yet supported.\n\nExample: `[\"clsx\", \"cn\", \"cva\", \"tw\"]`\n\nDefault: `[]`",
188188
"type": [
189189
"array",
190190
"null"
@@ -314,8 +314,8 @@
314314
"type": "null"
315315
}
316316
],
317-
"description": "Experimental: Enable Tailwind CSS class sorting in JSX class/className attributes.\nWhen enabled, class strings will be collected and passed to a callback for sorting.\nPass `true` or an object with options from `prettier-plugin-tailwindcss`.\n(Default: disabled)",
318-
"markdownDescription": "Experimental: Enable Tailwind CSS class sorting in JSX class/className attributes.\nWhen enabled, class strings will be collected and passed to a callback for sorting.\nPass `true` or an object with options from `prettier-plugin-tailwindcss`.\n(Default: disabled)"
317+
"description": "Experimental: Sort Tailwind CSS classes in string literals.\n\nWhen enabled, `Oxfmt` sorts Tailwind CSS classes using the same algorithm as\n[`prettier-plugin-tailwindcss`](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).\n\nSee [`TailwindcssConfig`] for available options.\n\n(Default: disabled)",
318+
"markdownDescription": "Experimental: Sort Tailwind CSS classes in string literals.\n\nWhen enabled, `Oxfmt` sorts Tailwind CSS classes using the same algorithm as\n[`prettier-plugin-tailwindcss`](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).\n\nSee [`TailwindcssConfig`] for available options.\n\n(Default: disabled)"
319319
},
320320
"ignorePatterns": {
321321
"description": "Ignore files matching these glob patterns. Current working directory is used as the root.",
@@ -435,4 +435,4 @@
435435
},
436436
"title": "Oxfmtrc",
437437
"type": "object"
438-
}
438+
}

‎tasks/website_formatter/src/snapshots/schema_json.snap‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
source: crates/oxc_formatter/tests/schema.rs
2+
source: tasks/website_formatter/src/json_schema.rs
33
expression: json
44
---
55
{
@@ -161,15 +161,15 @@ expression: json
161161
"markdownDescription": "User-provided configuration for `package.json` sorting.\n\n- `true`: Enable sorting with default options\n- `false`: Disable sorting\n- `{ sortScripts: true }`: Enable sorting with custom options"
162162
},
163163
"TailwindcssConfig": {
164-
"description": "Configuration for Tailwind CSS class sorting.\nBased on options from `prettier-plugin-tailwindcss`.\n\nNote: All `tailwind` prefixes have been removed from option names.\nFor example, use `config` instead of `tailwindConfig`.\n\nSee <https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options>",
165-
"markdownDescription": "Configuration for Tailwind CSS class sorting.\nBased on options from `prettier-plugin-tailwindcss`.\n\nNote: All `tailwind` prefixes have been removed from option names.\nFor example, use `config` instead of `tailwindConfig`.\n\nSee <https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options>",
164+
"description": "Configuration for Tailwind CSS class sorting.\n\nOption names omit the `tailwind` prefix used in the original plugin\n(e.g., `config` instead of `tailwindConfig`).\n\nSee [`prettier-plugin-tailwindcss` options](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options) for details.",
165+
"markdownDescription": "Configuration for Tailwind CSS class sorting.\n\nOption names omit the `tailwind` prefix used in the original plugin\n(e.g., `config` instead of `tailwindConfig`).\n\nSee [`prettier-plugin-tailwindcss` options](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options) for details.",
166166
"properties": {
167167
"attributes": {
168-
"description": "List of attributes that contain Tailwind CSS classes.\n\nExample: `[\"myClassProp\", \":class\"]`\n\nDefault: `[\"class\", \"className\"]`",
168+
"description": "List of attributes that contain Tailwind CSS classes.\n\nNote: Regex patterns are not yet supported.\n\nExample: `[\"myClassProp\", \":class\"]`\n\nDefault: `[\"class\", \"className\"]`",
169169
"items": {
170170
"type": "string"
171171
},
172-
"markdownDescription": "List of attributes that contain Tailwind CSS classes.\n\nExample: `[\"myClassProp\", \":class\"]`\n\nDefault: `[\"class\", \"className\"]`",
172+
"markdownDescription": "List of attributes that contain Tailwind CSS classes.\n\nNote: Regex patterns are not yet supported.\n\nExample: `[\"myClassProp\", \":class\"]`\n\nDefault: `[\"class\", \"className\"]`",
173173
"type": [
174174
"array",
175175
"null"
@@ -184,11 +184,11 @@ expression: json
184184
]
185185
},
186186
"functions": {
187-
"description": "List of custom function names that contain Tailwind CSS classes.\n\nExample: `[\"clsx\", \"cn\", \"cva\", \"tw\"]`\n\nDefault: `[]`",
187+
"description": "List of custom function names that contain Tailwind CSS classes.\n\nNote: Regex patterns are not yet supported.\n\nExample: `[\"clsx\", \"cn\", \"cva\", \"tw\"]`\n\nDefault: `[]`",
188188
"items": {
189189
"type": "string"
190190
},
191-
"markdownDescription": "List of custom function names that contain Tailwind CSS classes.\n\nExample: `[\"clsx\", \"cn\", \"cva\", \"tw\"]`\n\nDefault: `[]`",
191+
"markdownDescription": "List of custom function names that contain Tailwind CSS classes.\n\nNote: Regex patterns are not yet supported.\n\nExample: `[\"clsx\", \"cn\", \"cva\", \"tw\"]`\n\nDefault: `[]`",
192192
"type": [
193193
"array",
194194
"null"
@@ -318,8 +318,8 @@ expression: json
318318
"type": "null"
319319
}
320320
],
321-
"description": "Experimental: Enable Tailwind CSS class sorting in JSX class/className attributes.\nWhen enabled, class strings will be collected and passed to a callback for sorting.\nPass `true` or an object with options from `prettier-plugin-tailwindcss`.\n(Default: disabled)",
322-
"markdownDescription": "Experimental: Enable Tailwind CSS class sorting in JSX class/className attributes.\nWhen enabled, class strings will be collected and passed to a callback for sorting.\nPass `true` or an object with options from `prettier-plugin-tailwindcss`.\n(Default: disabled)"
321+
"description": "Experimental: Sort Tailwind CSS classes in string literals.\n\nWhen enabled, `Oxfmt` sorts Tailwind CSS classes using the same algorithm as\n[`prettier-plugin-tailwindcss`](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).\n\nSee [`TailwindcssConfig`] for available options.\n\n(Default: disabled)",
322+
"markdownDescription": "Experimental: Sort Tailwind CSS classes in string literals.\n\nWhen enabled, `Oxfmt` sorts Tailwind CSS classes using the same algorithm as\n[`prettier-plugin-tailwindcss`](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).\n\nSee [`TailwindcssConfig`] for available options.\n\n(Default: disabled)"
323323
},
324324
"ignorePatterns": {
325325
"description": "Ignore files matching these glob patterns. Current working directory is used as the root.",

‎tasks/website_formatter/src/snapshots/schema_markdown.snap‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -159,9 +159,13 @@ Sort the `scripts` field alphabetically. (Default: `false`)
159159
type: `object | null`
160160

161161

162-
Experimental: Enable Tailwind CSS class sorting in JSX class/className attributes.
163-
When enabled, class strings will be collected and passed to a callback for sorting.
164-
Pass `true` or an object with options from `prettier-plugin-tailwindcss`.
162+
Experimental: Sort Tailwind CSS classes in string literals.
163+
164+
When enabled, `Oxfmt` sorts Tailwind CSS classes using the same algorithm as
165+
[`prettier-plugin-tailwindcss`](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).
166+
167+
See [`TailwindcssConfig`] for available options.
168+
165169
(Default: disabled)
166170

167171

@@ -172,6 +176,8 @@ type: `string[]`
172176

173177
List of attributes that contain Tailwind CSS classes.
174178

179+
Note: Regex patterns are not yet supported.
180+
175181
Example: `["myClassProp", ":class"]`
176182

177183
Default: `["class", "className"]`
@@ -196,6 +202,8 @@ type: `string[]`
196202

197203
List of custom function names that contain Tailwind CSS classes.
198204

205+
Note: Regex patterns are not yet supported.
206+
199207
Example: `["clsx", "cn", "cva", "tw"]`
200208

201209
Default: `[]`

0 commit comments

Comments
 (0)