OK, maybe I do need to check in dist for now

Author: fongandrew

.gitignore

@@ -1,2 +1 @@
 node_modules
-dist

dist/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview ESLint plugin to validate CSS class usage in JavaScript/TypeScript files
+ * @author ESLint Plugin CSS Class Usage Contributors
+ */
+declare const _default: {
+    /**
+     * List of supported rules
+     */
+    rules: {
+        /**
+         * Rule to validate that CSS classes used in code exist in stylesheets
+         * @see ./rules/no-unknown-class.ts
+         */
+        'no-unknown-classes': import("@typescript-eslint/utils/ts-eslint").RuleModule<"unknownClass", [import("./rules/no-unknown-class").PluginOptions], import("@typescript-eslint/utils/ts-eslint").RuleListener>;
+    };
+    /**
+     * Recommended configuration
+     */
+    configs: {
+        recommended: {
+            plugins: string[];
+            rules: {
+                'css-class-usage/no-unknown-class': (string | {
+                    cssFiles: string[];
+                    classAttributes: string[];
+                    classFunctions: string[];
+                    ignore: string[];
+                })[];
+            };
+        };
+    };
+};
+export = _default;

dist/index.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+const no_unknown_class_1 = __importDefault(require("./rules/no-unknown-class"));
+module.exports = {
+    /**
+     * List of supported rules
+     */
+    rules: {
+        /**
+         * Rule to validate that CSS classes used in code exist in stylesheets
+         * @see ./rules/no-unknown-class.ts
+         */
+        'no-unknown-classes': no_unknown_class_1.default,
+    },
+    /**
+     * Recommended configuration
+     */
+    configs: {
+        recommended: {
+            plugins: ['css-class-usage'],
+            rules: {
+                'css-class-usage/no-unknown-class': [
+                    'error',
+                    {
+                        cssFiles: ['src/**/*.css', 'src/**/*.scss'],
+                        classAttributes: ['className', 'class', 'classList'],
+                        classFunctions: ['clsx', 'classNames', 'cx'],
+                        ignore: ['**/node_modules/**', '**/dist/**', '**/out/**', '**/build/**'],
+                    },
+                ],
+            },
+        },
+    },
+};

dist/rules/no-unknown-class.d.ts

@@ -0,0 +1,13 @@
+import { type RuleModule } from '@typescript-eslint/utils/ts-eslint';
+export interface PluginOptions {
+    /** Attributes to check in JSX elements (e.g., 'className', 'class') */
+    classAttributes?: string[];
+    /** Function names that handle class composition (e.g., 'clsx', 'classNames') */
+    classFunctions?: string[];
+    /** File patterns to watch for CSS classes */
+    cssFiles?: string[];
+    /** Patterns to ignore when searching for CSS files */
+    ignore?: string[];
+}
+declare const rule: RuleModule<'unknownClass', [PluginOptions]>;
+export default rule;

dist/rules/no-unknown-class.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const file_watcher_1 = require("../utils/file-watcher");
+let cssWatcher = null;
+const rule = {
+    defaultOptions: [
+        {
+            classAttributes: ['className', 'class', 'classList'],
+            classFunctions: ['clsx', 'classNames', 'cx'],
+            cssFiles: ['**/*.css'],
+            ignore: ['**/node_modules/**', '**/dist/**', '**/out/**', '**/build/**'],
+        },
+    ],
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Ensure that CSS classes used in JS/TS files exist',
+            recommended: 'recommended',
+        },
+        messages: {
+            unknownClass: "Unknown CSS class '{{className}}'",
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    classAttributes: {
+                        type: 'array',
+                        items: { type: 'string' },
+                    },
+                    classFunctions: {
+                        type: 'array',
+                        items: { type: 'string' },
+                    },
+                    cssFiles: {
+                        type: 'array',
+                        items: { type: 'string' },
+                    },
+                    ignore: {
+                        type: 'array',
+                        items: { type: 'string' },
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+    create(context) {
+        const options = context.options[0];
+        // Initialize watcher if not already done
+        if (!cssWatcher) {
+            cssWatcher = new file_watcher_1.CssWatcher(options.cssFiles, options.ignore);
+        }
+        /** Helper to check if a class exists in our CSS files */
+        const validate = (className, node) => {
+            // Ignore Tailwind classes with arbitrary values
+            if (className.includes('[')) {
+                return;
+            }
+            // Remove any Tailwind modifiers
+            const baseClass = className.split(':').pop();
+            if (!(cssWatcher === null || cssWatcher === void 0 ? void 0 : cssWatcher.hasClass(baseClass))) {
+                context.report({
+                    node,
+                    messageId: 'unknownClass',
+                    data: { className: baseClass },
+                });
+            }
+        };
+        /** Helper to validate class names in object expressions */
+        const validateObjectExpression = (objExpr) => {
+            objExpr.properties.forEach((prop) => {
+                if (prop.type === 'Property') {
+                    if (prop.key.type === 'Literal' && typeof prop.key.value === 'string') {
+                        validate(prop.key.value, prop);
+                    }
+                    else if (prop.key.type === 'Identifier') {
+                        validate(prop.key.name, prop);
+                    }
+                }
+                // We ignore SpreadElement as it can't contain class names directly
+            });
+        };
+        return {
+            // Check JSX className attributes
+            JSXAttribute(node) {
+                var _a, _b, _c;
+                if (node.name.type === 'JSXIdentifier' &&
+                    ((_a = options.classAttributes) === null || _a === void 0 ? void 0 : _a.includes(node.name.name))) {
+                    if (((_b = node.value) === null || _b === void 0 ? void 0 : _b.type) === 'Literal' && typeof node.value.value === 'string') {
+                        const classNames = node.value.value.split(/\s+/);
+                        classNames.forEach((className) => {
+                            validate(className, node);
+                        });
+                    }
+                    else if (((_c = node.value) === null || _c === void 0 ? void 0 : _c.type) === 'JSXExpressionContainer') {
+                        const expr = node.value.expression;
+                        if (expr.type === 'ObjectExpression') {
+                            validateObjectExpression(expr);
+                        }
+                    }
+                }
+            },
+            // Check class utility function calls
+            CallExpression(node) {
+                var _a;
+                if (node.callee.type === 'Identifier' &&
+                    ((_a = options.classFunctions) === null || _a === void 0 ? void 0 : _a.includes(node.callee.name))) {
+                    node.arguments.forEach((arg) => {
+                        if (arg.type === 'Literal' && typeof arg.value === 'string') {
+                            const classNames = arg.value.split(/\s+/);
+                            classNames.forEach((className) => {
+                                validate(className, arg);
+                            });
+                        }
+                        else if (arg.type === 'ObjectExpression') {
+                            validateObjectExpression(arg);
+                        }
+                    });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

dist/utils/css-extractor.d.ts

@@ -0,0 +1 @@
+export declare function extractClassesFromCss(content: string): Set<string>;

dist/utils/css-extractor.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractClassesFromCss = extractClassesFromCss;
+function extractClassesFromCss(content) {
+    const classes = new Set();
+    // Regex for CSS classes
+    const classRegex = /\.([a-zA-Z][a-zA-Z0-9_-]*)/g;
+    let match;
+    while ((match = classRegex.exec(content)) !== null) {
+        if (match[1]) {
+            // Regular CSS class
+            classes.add(match[1]);
+        }
+    }
+    return classes;
+}

dist/utils/file-watcher.d.ts

@@ -0,0 +1,11 @@
+export declare class CssWatcher {
+    private state;
+    private watcher;
+    private patterns;
+    private ignorePatterns;
+    constructor(patterns?: string[], ignore?: string[]);
+    private setupWatcher;
+    private updateClassesForFile;
+    hasClass(className: string): boolean;
+    close(): Promise<void>;
+}

dist/utils/file-watcher.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CssWatcher = void 0;
+const fs_1 = __importDefault(require("fs"));
+const chokidar_1 = __importDefault(require("chokidar"));
+const css_extractor_1 = require("./css-extractor");
+class CssWatcher {
+    constructor(patterns = ['**/*.css'], ignore = ['**/node_modules/**', '**/dist/**', '**/out/**', '**/build/**']) {
+        this.state = {
+            fileClasses: new Map(),
+            lastUpdate: 0,
+        };
+        this.watcher = null;
+        this.patterns = patterns;
+        this.ignorePatterns = ignore;
+        this.setupWatcher();
+    }
+    setupWatcher() {
+        // Initial scan and watch setup
+        const watchPatterns = this.patterns.map((pattern) => {
+            // Convert Windows-style paths if necessary
+            return pattern.replace(/\\/g, '/');
+        });
+        // Set up chokidar with appropriate options
+        this.watcher = chokidar_1.default.watch(watchPatterns, {
+            persistent: true,
+            ignoreInitial: false, // This ensures we get the initial scan
+            ignored: [...this.ignorePatterns, /(^|[/\\])\../], // Ignore dotfiles and user-specified patterns
+            cwd: '.', // Use current working directory as base
+            followSymlinks: true,
+            awaitWriteFinish: {
+                stabilityThreshold: 200,
+                pollInterval: 100,
+            },
+        });
+        // Setup event handlers
+        this.watcher
+            .on('add', (filePath) => {
+            this.updateClassesForFile(filePath);
+        })
+            .on('change', (filePath) => {
+            this.updateClassesForFile(filePath);
+        })
+            .on('unlink', (filePath) => {
+            this.state.fileClasses.delete(filePath);
+            this.state.lastUpdate = Date.now();
+        })
+            .on('error', (error) => {
+            console.error(`Watcher error: ${error}`);
+        });
+    }
+    async updateClassesForFile(filePath) {
+        try {
+            const content = await fs_1.default.promises.readFile(filePath, 'utf8');
+            const fileClasses = (0, css_extractor_1.extractClassesFromCss)(content);
+            this.state.fileClasses.set(filePath, new Set(fileClasses));
+            this.state.lastUpdate = Date.now();
+        }
+        catch (error) {
+            console.error(`Error reading CSS file ${filePath}:`, error);
+            this.state.fileClasses.delete(filePath);
+        }
+    }
+    hasClass(className) {
+        for (const classes of this.state.fileClasses.values()) {
+            if (classes.has(className)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    // Clean up method to close the watcher when done
+    async close() {
+        if (this.watcher) {
+            await this.watcher.close();
+            this.watcher = null;
+        }
+    }
+}
+exports.CssWatcher = CssWatcher;