wip: multiline

schoero · Dec 9, 2023 · 701be54 · 701be54
1 parent b593e92
commit 701be54
Show file tree

Hide file tree

Showing 15 changed files with 389 additions and 358 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,9 @@
 <div align="center">
-  <img alt="eslint-plugin-readable-tailwind" src="https://raw.githubusercontent.com/schoero/eslint-plugin-readable-tailwind/main/assets/eslint-plugin-readable-tailwind-logo.svg">
+  <img alt="eslint-plugin-readable-tailwind" src="https://raw.githubusercontent.com/schoero/eslint-plugin-readable-tailwind/main/assets/eslint-plugin-readable-tailwind-logo.svg?token=AKCR54TFQSHIUXAOXY46JLTFOQ3CU">
 </div>
 
 ---
+
 <div align="center">
 
   [![GitHub license](https://img.shields.io/github/license/schoero/eslint-plugin-readable-tailwind?style=flat-square&labelColor=454c5c&color=00AD51)](https://github.com/schoero/eslint-plugin-readable-tailwind/blob/main/LICENSE)
@@ -19,7 +20,8 @@
 <br/>
 <br/>
 
-auto-wraps tailwind classes after a certain width using template literals.
+ESLint plugin to automatically break up long tailwind class strings into multiple lines for better readability.
+Also sorts the classes logically, removes unnecessary whitespaces and groups the classes by their prefix.
 
 <br/>
 <br/>
@@ -40,12 +42,12 @@ npm install eslint-plugin-readable-tailwind --save-dev
 
 ## Usage
 
-Add `tailwind-multiline` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
+Add `readable-tailwind` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
 
 ```json
 {
   "plugins": [
-    "tailwind-multiline"
+    "readable-tailwind"
   ]
 }
 ```
@@ -68,7 +70,7 @@ Then configure the rules you want to use under the rules section.
 
 | Name                                                                 | Description                                          | 🔧 |
 | :------------------------------------------------------------------- | :--------------------------------------------------- | :- |
-| [jsx-attribute-expression](docs/rules/jsx-attribute-expression.md)   | Enforce consistent jsx attribute expressions.        | 🔧 |
+| [jsx-attribute-expression](docs/rules/jsx-attribute-expression.md)   | Enforce consistent jsx attribute expressions         | 🔧 |
 | [no-unnecessary-whitespace](docs/rules/no-unnecessary-whitespace.md) | Disallow unnecessary whitespace in tailwind classes. | 🔧 |
 | [sort-classes](docs/rules/sort-classes.md)                           | Enforce a consistent order for tailwind classes.     | 🔧 |
 

diff --git a/assets/eslint-plugin-readable-tailwind-logo.svg b/assets/eslint-plugin-readable-tailwind-logo.svg
diff --git a/docs/rules/jsx-attribute-expression.md b/docs/rules/jsx-attribute-expression.md
@@ -3,3 +3,11 @@
 🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
 
 <!-- end auto-generated rule header -->
+
+## Options
+
+<!-- begin auto-generated rule options list -->
+
+
+
+<!-- end auto-generated rule options list -->
diff --git a/docs/rules/no-unnecessary-whitespace.md b/docs/rules/no-unnecessary-whitespace.md
@@ -8,9 +8,10 @@
 
 <!-- begin auto-generated rule options list -->
 
-| Name              | Type     |
-| :---------------- | :------- |
-| `allowMultiline`  | Boolean  |
-| `classAttributes` | String[] |
+| Name              | Description                                                                                                                                              | Type     | Default                           |
+| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | :-------------------------------- |
+| `allowMultiline`  | Allow multi-line class declarations. If this option is disabled, template literal strings will be collapsed into a single line string wherever possible. | Boolean  | `true`                            |
+| `callees`         | List of function names whose arguments should also be considered.                                                                                        | String[] | [`clsx`, `cva`, `ctl`, `twMerge`] |
+| `classAttributes` |                                                                                                                                                          | String[] |                                   |
 
 <!-- end auto-generated rule options list -->
diff --git a/docs/rules/sort-classes.md b/docs/rules/sort-classes.md
@@ -3,3 +3,16 @@
 🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
 
 <!-- end auto-generated rule header -->
+
+## Options
+
+<!-- begin auto-generated rule options list -->
+
+| Name              | Description                                                                                                                                      | Type     | Choices                   | Default                           |
+| :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- | :------- | :------------------------ | :-------------------------------- |
+| `callees`         | List of function names whose arguments should also be considered.                                                                                | String[] |                           | [`clsx`, `cva`, `ctl`, `twMerge`] |
+| `classAttributes` |                                                                                                                                                  | String[] |                           |                                   |
+| `order`           | The algorithm to use when sorting classes.                                                                                                       | String   | `asc`, `desc`, `official` | `official`                        |
+| `tailwindConfig`  | The path to the tailwind config file. If not specified, the plugin will try to find it automatically or falls back to the default configuration. | String   |                           |                                   |
+
+<!-- end auto-generated rule options list -->
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,10 +10,11 @@
   "scripts": {
     "build": "vite build",
     "docs": "eslint-doc-generator",
+    "docs:lint": "npm run update:eslint-docs -- --check",
     "eslint": "eslint --ext .ts,.tsx,.js,.jsx,.json,.jsonc,.yml,.md ./",
     "eslint:ci": "npm run eslint -- --max-warnings 0",
     "eslint:fix": "npm run eslint -- --fix",
-    "lint": "npm run eslint && npm run markdownlint",
+    "lint": "npm run eslint && npm run markdownlint && npm run docs:lint",
     "lint:ci": "npm run eslint:ci && npm run markdownlint:ci",
     "lint:fix": "npm run eslint:fix && npm run markdownlint:fix",
     "markdownlint": "markdownlint-cli2 '**/*.md' '#node_modules'",
@@ -46,7 +47,7 @@
     "vite": "^5.0.7",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-no-bundle": "^3.0.0",
-    "vitest": "^1.0.2"
+    "vitest": "^1.0.3"
   },
   "keywords": [
     "eslint",

diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { jsxAttributeExpression } from "eptm:rules:jsx-attribute-expression.js";
 import { tailwindNoUnnecessaryWhitespace } from "eptm:rules:tailwind-no-unnecessary-whitespace.js";
 import { tailwindSortClasses } from "eptm:rules:tailwind-sort-classes.js";
@@ -6,6 +7,24 @@ import type { ESLint } from "eslint";
 
 
 export default {
+  configs: {
+    "recommended/error": {
+      plugins: ["readable-tailwind"],
+      rules: {
+        [jsxAttributeExpression.name]: "error",
+        [tailwindNoUnnecessaryWhitespace.name]: "error",
+        [tailwindSortClasses.name]: "error"
+      }
+    },
+    "recommended/warn": {
+      plugins: ["readable-tailwind"],
+      rules: {
+        [jsxAttributeExpression.name]: "warn",
+        [tailwindNoUnnecessaryWhitespace.name]: "warn",
+        [tailwindSortClasses.name]: "warn"
+      }
+    }
+  },
   rules: {
     [jsxAttributeExpression.name]: jsxAttributeExpression.rule,
     [tailwindNoUnnecessaryWhitespace.name]: tailwindNoUnnecessaryWhitespace.rule,

diff --git a/src/rules/jsx-attribute-expression.ts b/src/rules/jsx-attribute-expression.ts
@@ -72,13 +72,22 @@ export const jsxAttributeExpression: ESLintRule<Options> = {
     meta: {
       docs: {
         category: "Stylistic Issues",
-        description: "Enforce consistent jsx attribute expressions",
+        description: "Enforce consistent jsx attribute expressions.",
         recommended: true
       },
       fixable: "code",
       schema: [
         {
-          enum: ["always", "as-needed"]
+          additionalItems: false,
+          items: [
+            {
+              default: getOptions().expression,
+              description: "Collapse jsx class attribute expressions to a literal string if possible.",
+              enum: ["always", "as-needed"],
+              type: "string"
+            }
+          ],
+          type: "array"
         }
       ],
       type: "layout"
@@ -96,7 +105,7 @@ function getAllowedQuotes(ctx: Rule.RuleContext, preferredQuotes: QuoteParts): Q
   return { leadingQuote: '"', trailingQuote: '"' };
 }
 
-function getOptions(ctx: Rule.RuleContext): { expression: Options[0]; } {
-  const expression = ctx.options[0] ?? "as-needed";
+function getOptions(ctx?: Rule.RuleContext): { expression: Options[0]; } {
+  const expression = ctx?.options[0] ?? "as-needed";
   return { expression };
 }