eslint-plugin-tailwind-variants 1.0.2 → 2.0.1

package/README.md

@@ -43,14 +43,25 @@ npm i -D vue-eslint-parser
 import tailwindVariants from "eslint-plugin-tailwind-variants";
 
 export default defineConfig([
-	tailwindVariants.configs.recommended,
+  ...tailwindVariants.configs.recommended,
 ]);
 ```
 
+### Editor setup
+
+If you are using the ESLint plugin in VS Code add the following to your `settings.json` to enable `css` linting:
+
+```json
+{
+  "eslint.validate": ["css"]
+}
+```
+
 ### Rules
 
 | Name                                                                                 | Description                                                                                                                                               | `recommended` | autofix |
 | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------- |
 | [require-variants-call-styles-name](docs/rules/require-variants-call-styles-name.md) | enforce that when calling a function returned by tailwind-variants (`tv()`), the result is assigned to a variable named `styles` (or a configurable name) | ✔             | ✔       |
 | [require-variants-suffix](docs/rules/require-variants-suffix.md)                     | require variables assigned from tv() to end with a specific suffix                                                                                        | ✔             | ✔       |
-| [limited-inline-classes](docs/rules/limited-inline-classes.md)                       | enforce limited number of inline class names and prohibit cn() usage                                                                                      | ✔             |         |
+| [limited-inline-classes](docs/rules/limited-inline-classes.md)                       | enforce limited number of inline class names and prohibit cn() usage                                                                                      | ✔             |         |
+| [sort-custom-properties](docs/rules/sort-custom-properties.md)                       | enforce consistent ordering of CSS custom properties (CSS variables)                                                                                      | ✔             | ✔       |

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ESLint, Linter } from "eslint";
 type PluginConfigs = {
-    recommended: Linter.Config;
+    recommended: Linter.Config[];
 };
 declare const plugin: ESLint.Plugin;
 export declare const configs: PluginConfigs;

package/dist/index.js

@@ -1,3 +1,4 @@
+import css from "@eslint/css";
 import { name as packageName, version as packageVersion, } from "../package.json";
 import { rules } from "./rules/index.js";
 const pluginName = "tailwind-variants";
@@ -9,16 +10,31 @@ const plugin = {
     rules,
 };
 export const configs = {
-    recommended: {
-        plugins: {
-            [pluginName]: plugin,
+    recommended: [
+        {
+            plugins: {
+                [pluginName]: plugin,
+            },
+            rules: {
+                [`${pluginName}/limited-inline-classes`]: "error",
+                [`${pluginName}/require-variants-call-styles-name`]: "error",
+                [`${pluginName}/require-variants-suffix`]: "error",
+            },
         },
-        rules: {
-            [`${pluginName}/limited-inline-classes`]: "error",
-            [`${pluginName}/require-variants-call-styles-name`]: "error",
-            [`${pluginName}/require-variants-suffix`]: "error",
+        {
+            files: ["**/*.css"],
+            language: "css/css",
+            plugins: { css },
+            rules: {
+                [`${pluginName}/sort-custom-properties`]: [
+                    "error",
+                    {
+                        emptyLineBetweenGroups: true,
+                    },
+                ],
+            },
         },
-    },
+    ],
 };
 export { plugin };
 export default {

package/dist/rules/index.js

@@ -1,9 +1,11 @@
 import { rule as limitedInlineClasses } from "./limited-inline-classes.js";
 import { rule as requireVariantsCallStylesName } from "./require-variants-call-styles-name.js";
 import { rule as requireVariantsSuffix } from "./require-variants-suffix.js";
+import { rule as sortCustomProperties } from "./sort-custom-properties.js";
 export const rules = {
     "limited-inline-classes": limitedInlineClasses,
     "require-variants-call-styles-name": requireVariantsCallStylesName,
     "require-variants-suffix": requireVariantsSuffix,
+    "sort-custom-properties": sortCustomProperties,
     // as unknown due to ESLint and TSESLint types not aligning perfectly
 };

package/dist/rules/limited-inline-classes.d.ts

@@ -3,8 +3,8 @@ export declare const MESSAGE_IDS: {
     readonly limitedInlineClasses: "limitedInlineClasses";
     readonly noCnInClassName: "noCnInClassName";
 };
-type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
-type Options = [
+export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
+export type Options = [
     {
         /**
          * Directory pattern to match
@@ -21,4 +21,3 @@ type Options = [
 export declare const rule: ESLintUtils.RuleModule<MessageIds, Options, unknown, ESLintUtils.RuleListener> & {
     name: string;
 };
-export {};

package/dist/rules/require-variants-call-styles-name.d.ts

@@ -2,7 +2,8 @@ import { ESLintUtils } from "@typescript-eslint/utils";
 export declare const MESSAGE_IDS: {
     readonly requireVariantsCallStylesName: "requireVariantsCallStylesName";
 };
-type Options = [
+export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
+export type Options = [
     {
         /**
          * Name required for variables assigned from tv()
@@ -14,4 +15,3 @@ type Options = [
 export declare const rule: ESLintUtils.RuleModule<"requireVariantsCallStylesName", Options, unknown, ESLintUtils.RuleListener> & {
     name: string;
 };
-export {};

package/dist/rules/require-variants-suffix.d.ts

@@ -2,7 +2,8 @@ import { ESLintUtils } from "@typescript-eslint/utils";
 export declare const MESSAGE_IDS: {
     readonly requireVariantsSuffix: "requireVariantsSuffix";
 };
-type Options = [
+export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
+export type Options = [
     {
         /**
          * Suffix required for variables assigned from tv()
@@ -14,4 +15,3 @@ type Options = [
 export declare const rule: ESLintUtils.RuleModule<"requireVariantsSuffix", Options, unknown, ESLintUtils.RuleListener> & {
     name: string;
 };
-export {};

package/dist/rules/sort-custom-properties.d.ts

@@ -0,0 +1,37 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+export declare const MESSAGE_IDS: {
+    readonly missingEmptyLineBetweenGroups: "missingEmptyLineBetweenGroups";
+    readonly patternTooLong: "patternTooLong";
+    readonly unsortedCustomProperties: "unsortedCustomProperties";
+};
+export type MessageIds = (typeof MESSAGE_IDS)[keyof typeof MESSAGE_IDS];
+export type Options = [
+    {
+        /**
+         * Add empty line between different prefix groups
+         * @default false
+         */
+        emptyLineBetweenGroups?: boolean;
+        /**
+         * Order of patterns (RegExp strings) for custom properties.
+         * Properties matching the first pattern appear first.
+         * @default [
+         * 	"^--spacing-",
+         * 	"^--size-",
+         * 	"^--font-",
+         * 	"^--weight-",
+         * 	"^--leading-",
+         * 	"^--tracking-",
+         * 	"^--radius-",
+         * 	"^--shadow-",
+         * 	"^--animate-",
+         * 	"^--transition-",
+         * 	"^--color-",
+         * ]
+         */
+        order?: string[];
+    }
+];
+export declare const rule: ESLintUtils.RuleModule<MessageIds, Options, unknown, ESLintUtils.RuleListener> & {
+    name: string;
+};

package/dist/rules/sort-custom-properties.js

@@ -0,0 +1,192 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+const createRule = ESLintUtils.RuleCreator((name) => name);
+const BLOCK_SELECTOR = "Rule > Block, AtRule[name='theme'] > Block, AtRule[name='utility'] > Block";
+const defaultOrder = [
+    "^--spacing-",
+    "^--size-",
+    "^--font-",
+    "^--weight-",
+    "^--leading-",
+    "^--tracking-",
+    "^--radius-",
+    "^--shadow-",
+    "^--animate-",
+    "^--transition-",
+    "^--color-",
+];
+export const MESSAGE_IDS = {
+    missingEmptyLineBetweenGroups: "missingEmptyLineBetweenGroups",
+    patternTooLong: "patternTooLong",
+    unsortedCustomProperties: "unsortedCustomProperties",
+};
+export const rule = createRule({
+    name: "sort-custom-properties",
+    meta: {
+        docs: {
+            description: "Enforce sorting of CSS custom properties based on RegEx patterns within declaration blocks.",
+        },
+        fixable: "code",
+        messages: {
+            missingEmptyLineBetweenGroups: "Expected empty line between different custom property prefix groups",
+            patternTooLong: "The pattern '{{pattern}}' is too long and may cause performance issues",
+            unsortedCustomProperties: "Custom properties should be sorted by the defined order: {{order}}",
+        },
+        schema: [
+            {
+                additionalProperties: false,
+                properties: {
+                    emptyLineBetweenGroups: {
+                        default: false,
+                        description: "Add empty line between different prefix groups",
+                        type: "boolean",
+                    },
+                    order: {
+                        default: defaultOrder,
+                        description: "Array of RegEx patterns defining the sort order",
+                        items: {
+                            type: "string",
+                        },
+                        type: "array",
+                    },
+                },
+                type: "object",
+            },
+        ],
+        type: "layout",
+    },
+    defaultOptions: [
+        {
+            emptyLineBetweenGroups: false,
+            order: defaultOrder,
+        },
+    ],
+    create: (context) => {
+        const options = context.options[0] || {};
+        const order = options.order || defaultOrder;
+        const emptyLineBetweenGroups = options.emptyLineBetweenGroups || false;
+        const { sourceCode } = context;
+        const compiledOrder = order.map((pattern) => {
+            if (pattern.length > 100) {
+                context.report({
+                    data: { pattern },
+                    loc: { column: 1, line: 1 },
+                    messageId: MESSAGE_IDS.patternTooLong,
+                });
+                return /(?!)/; // Matches nothing
+            }
+            try {
+                return new RegExp(pattern);
+            }
+            catch {
+                // Fallback: escape special chars and treat as a prefix match
+                return new RegExp(`^${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`);
+            }
+        });
+        const getMatchingOrderIndex = (propName) => {
+            for (let i = 0; i < compiledOrder.length; i++) {
+                if (compiledOrder[i].test(propName)) {
+                    return i;
+                }
+            }
+            return compiledOrder.length; // Unmatched properties go to the end
+        };
+        const blockStack = [];
+        return {
+            [`${BLOCK_SELECTOR}:exit`]() {
+                const currentBlockProperties = blockStack.pop();
+                if (!currentBlockProperties || currentBlockProperties.length < 2) {
+                    return;
+                }
+                let isSorted = true;
+                let needsEmptyLines = false;
+                for (let i = 1; i < currentBlockProperties.length; i++) {
+                    const prev = currentBlockProperties[i - 1];
+                    const curr = currentBlockProperties[i];
+                    if (prev.orderIndex > curr.orderIndex) {
+                        isSorted = false;
+                        break;
+                    }
+                    else if (prev.orderIndex === curr.orderIndex &&
+                        prev.property > curr.property) {
+                        isSorted = false;
+                        break;
+                    }
+                    if (emptyLineBetweenGroups && prev.orderIndex !== curr.orderIndex) {
+                        const prevNode = prev.node;
+                        const currNode = curr.node;
+                        const linesBetween = currNode.loc.start.line - prevNode.loc.end.line;
+                        if (linesBetween < 2) {
+                            needsEmptyLines = true;
+                        }
+                    }
+                }
+                if (isSorted && !needsEmptyLines)
+                    return;
+                const messageId = !isSorted
+                    ? MESSAGE_IDS.unsortedCustomProperties
+                    : MESSAGE_IDS.missingEmptyLineBetweenGroups;
+                context.report({
+                    ...(messageId === MESSAGE_IDS.unsortedCustomProperties && {
+                        data: {
+                            order: order.join(", "),
+                        },
+                    }),
+                    fix: (fixer) => {
+                        const sorted = [...currentBlockProperties].sort((a, b) => {
+                            if (a.orderIndex !== b.orderIndex) {
+                                return a.orderIndex - b.orderIndex;
+                            }
+                            return a.property.localeCompare(b.property);
+                        });
+                        const getFullLine = (node) => {
+                            const lines = sourceCode.lines;
+                            const startLine = node.loc.start.line - 1;
+                            return lines[startLine];
+                        };
+                        const fixes = currentBlockProperties.map((prop, index) => {
+                            const sortedNode = sorted[index].node;
+                            const sortedLine = getFullLine(sortedNode);
+                            const currentLineStart = sourceCode.getIndexFromLoc({
+                                column: 1,
+                                line: prop.node.loc.start.line,
+                            });
+                            const currentLineEnd = sourceCode.getIndexFromLoc({
+                                column: 1,
+                                line: prop.node.loc.start.line + 1,
+                            });
+                            let replacement = "";
+                            if (emptyLineBetweenGroups && index > 0) {
+                                const prevOrderIndex = sorted[index - 1].orderIndex;
+                                const currOrderIndex = sorted[index].orderIndex;
+                                if (prevOrderIndex !== currOrderIndex) {
+                                    replacement = "\n";
+                                }
+                            }
+                            replacement += sortedLine + "\n";
+                            return fixer.replaceTextRange([currentLineStart, currentLineEnd], replacement);
+                        });
+                        return fixes;
+                    },
+                    messageId: messageId,
+                    node: currentBlockProperties[0].node,
+                });
+            },
+            [`:matches(${BLOCK_SELECTOR}) > Declaration`](node) {
+                if (!node.property.startsWith("--"))
+                    return;
+                const orderIndex = getMatchingOrderIndex(node.property);
+                const currentBlock = blockStack[blockStack.length - 1];
+                if (!currentBlock)
+                    return;
+                currentBlock.push({
+                    node,
+                    orderIndex,
+                    property: node.property,
+                });
+            },
+            [BLOCK_SELECTOR]() {
+                blockStack.push([]);
+            },
+        };
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-tailwind-variants",
-  "version": "1.0.2",
+  "version": "2.0.1",
   "description": "ESLint plugin for Tailwind Variants",
   "repository": {
     "type": "git",
@@ -41,6 +41,7 @@
     "eslint": ">9.0.0"
   },
   "dependencies": {
+    "@eslint/css": "^0.14.1",
     "@typescript-eslint/utils": "^8.51.0"
   },
   "devDependencies": {