feat/no-unregistered-classes

README.md

@@ -59,8 +59,8 @@
 <br/>
 <br/>
 
-ESLint plugin to automatically break up long tailwind class strings into multiple lines based on a specified print width or class count. This improves readability and eliminates horizontal scrolling.  
-In addition it sorts the classes logically, removes unnecessary whitespaces and duplicate classes and groups the classes by their variants. It works in React, Solid.js, Qwik, Svelte, Vue, Angular, HTML, JavaScript and TypeScript projects.
+ESLint plugin with a strong focus on improving readability of lengthy tailwindcss class strings. The core feature is to automatically break up long tailwind class strings into multiple lines based on a specified print width or class count. This makes your code cleaner and easier to read while eliminating the need for horizontal scrolling.  
+Beyond formatting, it also sorts classes in a logical order, removes duplicates and unnecessary whitespace, and groups classes by their variants. It works in React, Solid.js, Qwik, Svelte, Vue, Angular, HTML, JavaScript and TypeScript projects.
 
 <br/>
 <br/>
@@ -161,6 +161,7 @@ The following table shows the available rules and if they are enabled by default
 | [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. | ✔ | ✔ | ✔ |
 | [no-duplicate-classes](docs/rules/no-duplicate-classes.md) | Remove duplicate classes. | ✔ | ✔ | ✔ |
+| [no-unregistered-classes](docs/rules/no-unregistered-classes.md) | Report classes not registered with tailwindcss. |  |  |  |
 
 <br/>
 <br/>
@@ -195,7 +196,7 @@ Read the [API documentation](./docs/api/defaults.md) to learn how to override or
 
 ##### Auto-fix on save
 
-All rules are intended to automatically fix the tailwind classes. If you have installed the [VSCode ESLint plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), you can configure it to automatically fix the classes on save by adding the following options to your `.vscode/settings.json`:
+Most rules are intended to automatically fix the tailwind classes. If you have installed the [VSCode ESLint plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), you can configure it to automatically fix the classes on save by adding the following options to your `.vscode/settings.json`:
 
 ```jsonc
 {

docs/rules/no-unregistered-classes.md

@@ -0,0 +1,70 @@
+# readable-tailwind/no-unregistered-classes
+
+Disallow unregistered classes in tailwindcss class strings. Unregistered classes are classes that are not defined in your tailwind config file and therefore not recognized by tailwindcss.
+
+<br/>
+
+## Options
+
+### `ignore`
+
+  List of classes that should not report an error. The entries in this list are treated as regular expressions.
+
+  The rule works, by checking the output that a given class will produce. By default, the utilities `group` and `peer` are ignored, because they don't produce any css output.
+
+  If you want to customize the ignore list, it is recommended to add the default options to the ignore override. You can use the function `getDefaultIgnoredUnregisteredClasses()` exported from `/api/defaults` to get the original ignore list.
+
+  **Type**: `string[]`  
+  **Default**: `["^group(?:\\/(\\S*))?$", "^peer(?:\\/(\\S*))?$"]`
+
+<br/>
+
+### `attributes`
+
+  The name of the attribute that contains the tailwind classes. This can also be set globally via the [`settings` object](../settings/settings.md#attributes).  
+
+  **Type**: Array of [Name](../concepts/concepts.md#name), [Regex](../concepts/concepts.md#regular-expressions) or [Matchers](../concepts/concepts.md#matchers)  
+  **Default**: [Name](../concepts/concepts.md#name) for `"class"` and [strings Matcher](../concepts/concepts.md#types-of-matchers) for `"class", "className"`
+
+<br/>
+
+### `callees`
+
+  List of function names which arguments should also get linted. This can also be set globally via the [`settings` object](../settings/settings.md#callees).  
+
+  **Type**: Array of [Name](../concepts/concepts.md#name), [Regex](../concepts/concepts.md#regular-expressions) or [Matchers](../concepts/concepts.md#matchers)  
+  **Default**: [Matchers](../concepts/concepts.md#types-of-matchers) for `"cc", "clb", "clsx", "cn", "cnb", "ctl", "cva", "cx", "dcnb", "objstr", "tv", "twJoin", "twMerge"`
+
+<br/>
+
+### `variables`
+
+  List of variable names whose initializer should also get linted. This can also be set globally via the [`settings` object](../settings/settings.md#variables).  
+
+  **Type**: Array of [Name](../concepts/concepts.md#name), [Regex](../concepts/concepts.md#regular-expressions) or [Matchers](../concepts/concepts.md#matchers)  
+  **Default**:  [strings Matcher](../concepts/concepts.md#types-of-matchers) for `"className", "classNames", "classes", "style", "styles"`
+
+<br/>
+
+### `tags`
+
+  List of template literal tag names whose content should get linted. This can also be set globally via the [`settings` object](../settings/settings.md#tags).  
+
+  **Type**: Array of [Name](../concepts/concepts.md#name), [Regex](../concepts/concepts.md#regular-expressions) or [Matchers](../concepts/concepts.md#matchers)  
+  **Default**: None
+
+  Note: When using the `tags` option, it is recommended to use the [strings Matcher](../concepts/concepts.md#types-of-matchers) for your tag names. This will ensure that nested expressions get linted correctly.
+
+<br/>
+
+## Examples
+
+```tsx
+// ❌ BAD: unregistered class
+<div class="my-class" />;
+```
+
+```tsx
+// ✅ GOOD: only valid tailwindcss classes
+<div class="font-bold hover:underline" />;
+```

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.1",
+  "version": "2.2.0-no-unregistered-classes.0",
   "type": "module",
   "name": "eslint-plugin-readable-tailwind",
   "description": "auto-wraps tailwind classes after a certain print width or class count into multiple lines to improve readability.",

src/api/defaults.ts

@@ -4,6 +4,7 @@ import {
   DEFAULT_TAG_NAMES,
   DEFAULT_VARIABLE_NAMES
 } from "readable-tailwind:options:default-options.js";
+import { DEFAULT_IGNORED_UNREGISTERED_CLASSES } from "readable-tailwind:rules:tailwind-no-unregistered-classes.js";
 
 
 export function getDefaultCallees() {
@@ -21,3 +22,7 @@ export function getDefaultVariables() {
 export function getDefaultTags() {
   return DEFAULT_TAG_NAMES;
 }
+
+export function getDefaultIgnoredUnregisteredClasses() {
+  return DEFAULT_IGNORED_UNREGISTERED_CLASSES;
+}

src/configs/config.ts

@@ -1,6 +1,7 @@
 import { tailwindMultiline } from "readable-tailwind:rules:tailwind-multiline.js";
 import { tailwindNoDuplicateClasses } from "readable-tailwind:rules:tailwind-no-duplicate-classes.js";
 import { tailwindNoUnnecessaryWhitespace } from "readable-tailwind:rules:tailwind-no-unnecessary-whitespace.js";
+import { tailwindNoUnregisteredClasses } from "readable-tailwind:rules:tailwind-no-unregistered-classes.js";
 import { tailwindSortClasses } from "readable-tailwind:rules:tailwind-sort-classes.js";
 
 import type { ESLint } from "eslint";
@@ -31,6 +32,7 @@ export const config = {
     [tailwindMultiline.name]: tailwindMultiline.rule,
     [tailwindNoDuplicateClasses.name]: tailwindNoDuplicateClasses.rule,
     [tailwindNoUnnecessaryWhitespace.name]: tailwindNoUnnecessaryWhitespace.rule,
+    [tailwindNoUnregisteredClasses.name]: tailwindNoUnregisteredClasses.rule,
     [tailwindSortClasses.name]: tailwindSortClasses.rule
   }
 } satisfies ESLint.Plugin;

src/options/descriptions.ts

@@ -272,3 +272,17 @@ export const TAG_SCHEMA = {
     type: "array"
   }
 } satisfies Rule.RuleMetaData["schema"];
+
+export const ENTRYPOINT_SCHEMA = {
+  entryPoint: {
+    description: "The path to the css entry point of the project. If not specified, the plugin will fall back to the default tailwind classes.",
+    type: "string"
+  }
+};
+
+export const TAILWIND_CONFIG_SCHEMA = {
+  tailwindConfig: {
+    description: "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.",
+    type: "string"
+  }
+};