tailwind-canonical 0.9.0 → 0.10.0

package/dist/core/lexicon.js

@@ -31,6 +31,14 @@ const COLOR_PROPERTIES = new Set([
     'text',
     'bg',
     'border',
+    'border-t',
+    'border-b',
+    'border-l',
+    'border-r',
+    'border-x',
+    'border-y',
+    'border-s',
+    'border-e',
     'ring',
     'ring-offset',
     'divide',
@@ -44,6 +52,8 @@ const COLOR_PROPERTIES = new Set([
     'accent',
     'caret',
     'shadow',
+    'text-shadow',
+    'inset-shadow',
     'placeholder',
 ]);
 export const COLOR_FAMILIES = {
@@ -70,9 +80,32 @@ export const COLOR_FAMILIES = {
     neutral: 'gray',
     stone: 'gray',
 };
-export function stripVariants(cls) {
-    const idx = cls.lastIndexOf(':');
-    return idx === -1 ? cls : cls.slice(idx + 1);
+function stripVariants(cls) {
+    let depth = 0;
+    let colon = -1;
+    for (let i = 0; i < cls.length; i++) {
+        const ch = cls[i];
+        if (ch === '\\')
+            i++;
+        else if (ch === '[' || ch === '(')
+            depth++;
+        else if (ch === ']' || ch === ')')
+            depth--;
+        else if (ch === ':' && depth === 0)
+            colon = i;
+    }
+    return cls.slice(colon + 1);
+}
+export function splitClassModifiers(cls) {
+    const base = stripVariants(cls);
+    const importantBefore = base.startsWith('!') ? '!' : '';
+    const importantAfter = base.endsWith('!') ? '!' : '';
+    return {
+        prefix: cls.slice(0, cls.length - base.length),
+        utility: base.slice(importantBefore.length, base.length - importantAfter.length),
+        importantBefore,
+        importantAfter,
+    };
 }
 /**
  * Parses a color utility class into its property, color name and (optional)
@@ -82,8 +115,11 @@ export function stripVariants(cls) {
  * otherwise `shade` is `''`. Shared by `typos.ts` and `consistency.ts`.
  */
 export function parseColorClass(cls) {
-    const base = stripVariants(cls);
-    if (base.includes('['))
+    const { utility } = splitClassModifiers(cls);
+    const slash = utility.indexOf('/');
+    const base = slash === -1 ? utility : utility.slice(0, slash);
+    const opacity = slash === -1 ? '' : utility.slice(slash);
+    if (base.includes('[') || base.includes('('))
         return null;
     const firstDash = base.indexOf('-');
     if (firstDash === -1)
@@ -106,9 +142,10 @@ export function parseColorClass(cls) {
             property,
             color: rest.slice(0, lastDash),
             shade: rest.slice(lastDash + 1),
+            opacity,
         };
     }
-    return { property, color: rest, shade: '' };
+    return { property, color: rest, shade: '', opacity };
 }
 export const SCALE_PROPERTIES = new Set([
     'p',

package/dist/core/merger.js

@@ -6,9 +6,9 @@ function splitOutsideBrackets(value, separator) {
     let start = 0;
     for (let i = 0; i < value.length; i += 1) {
         const ch = value[i];
-        if (ch === '[')
+        if (ch === '[' || ch === '(')
             depth += 1;
-        else if (ch === ']')
+        else if (ch === ']' || ch === ')')
             depth = Math.max(0, depth - 1);
         else if (ch === separator && depth === 0) {
             parts.push(value.slice(start, i));
@@ -20,14 +20,16 @@ function splitOutsideBrackets(value, separator) {
 }
 function parseClassToken(token) {
     const parts = splitOutsideBrackets(token, ':');
+    const rawBase = parts.at(-1) ?? token;
+    const important = rawBase.startsWith('!') || rawBase.endsWith('!');
     return {
         token,
-        modifiers: parts.slice(0, -1).join(':'),
-        base: parts.at(-1) ?? token,
+        modifiers: `${parts.slice(0, -1).join(':')}${important ? '!' : ''}`,
+        base: rawBase.replace(/^!|!$/g, ''),
     };
 }
 const RE_LEADING = /^!?leading-/;
-const RE_ARBITRARY_TEXT_SIZE = /^!?text-\[-?(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em|ch|ex|lh|rlh|vw|vh|vmin|vmax|vi|vb|svw|lvw|dvw|svh|lvh|dvh)\]$/;
+const RE_ARBITRARY_TEXT_SIZE = /^text-(?:\[(?:length:.+|-?(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em|ch|ex|lh|rlh|vw|vh|vmin|vmax|vi|vb|svw|lvw|dvw|svh|lvh|dvh|%)|(?:calc|min|max|clamp)\(.+\))\]|\(length:--[^)]+\))$/;
 function isUnsafeTextSize(base, customTextClasses) {
     const normalized = base.startsWith('!') ? base.slice(1) : base;
     return (customTextClasses.has(normalized) || RE_ARBITRARY_TEXT_SIZE.test(normalized));

package/dist/core/rules.d.ts

@@ -28,6 +28,8 @@ type DefaultCommandConfig = {
 export type Config = {
     /** Set false for custom themes: only explicitly configured px mappings apply. */
     useDefaultTheme?: boolean;
+    /** Opt in to named text sizes, whose bundled line-height can change rendering. */
+    allowTextSizeLineHeightChanges?: boolean;
     customTextTokens?: Record<number, string>;
     customSpacingTokens?: Record<number, string>;
     ignorePatterns?: RegExp[];

package/dist/core/rules.js

@@ -355,7 +355,8 @@ function spacingSuggestion(cls, prefix, px, spacingTokens, v3) {
     }
     if (px === 1) {
         if (v3 &&
-            (V3_UNSCALED_SPACING_PREFIXES.has(prefix) ||
+            (prefix === 'leading' ||
+                V3_UNSCALED_SPACING_PREFIXES.has(prefix) ||
                 V3_ZERO_ONLY_SPACING_PREFIXES.has(prefix))) {
             return null;
         }
@@ -465,6 +466,9 @@ export function suggestCanonical(cls, config = {}) {
     };
 }
 function suggestUtility(cls, config) {
+    if (config.allowTextSizeLineHeightChanges !== true &&
+        /^text-\[\d+(?:\.\d+)?(?:px|rem)\]$/.test(cls))
+        return null;
     if (config.useDefaultTheme === false) {
         const text = cls.match(/^text-\[(\d+)px\]$/);
         if (text) {

package/dist/core/scanner.d.ts

@@ -3,6 +3,10 @@ export declare const DEFAULT_IGNORE: string[];
 export type ScanOptions = {
     extensions?: string[];
     ignore?: string[];
+    /** Preserve target interpretations across repeated scans (e.g. watch mode).
+     * Keys use forward slashes and omit the leading exclusion marker.
+     */
+    targetKinds?: ReadonlyMap<string, 'literal' | 'glob'>;
 };
 export declare function isGlob(target: string): boolean;
 export { resolveTargets, scanFiles } from '../io/scanner.js';

package/dist/core/typos.js

@@ -1,5 +1,5 @@
 import { extractClassStrings, SINGLE_CLASS_REGEX, toClassStringOpts, } from './class-strings.js';
-import { parseColorClass, TAILWIND_COLORS } from './lexicon.js';
+import { parseColorClass, splitClassModifiers, TAILWIND_COLORS, } from './lexicon.js';
 import { createPositionLookup, getSuppressedLines } from './suppressions.js';
 const MIN_COLOR_LEN = 3;
 function levenshtein(a, b) {
@@ -28,18 +28,17 @@ function nearestColor(name) {
     return null;
 }
 export function detectTypo(cls, extraColors = new Set()) {
-    const colon = cls.lastIndexOf(':');
-    const prefix = colon === -1 ? '' : cls.slice(0, colon + 1);
+    const { prefix, importantBefore, importantAfter } = splitClassModifiers(cls);
     const parsed = parseColorClass(cls);
     if (!parsed)
         return null;
-    const { property, color, shade } = parsed;
+    const { property, color, shade, opacity } = parsed;
     if (TAILWIND_COLORS.has(color) || extraColors.has(color))
         return null;
     const near = nearestColor(color);
     if (!near)
         return null;
-    const suggestion = `${prefix}${property}-${near}${shade ? `-${shade}` : ''}`;
+    const suggestion = `${prefix}${importantBefore}${property}-${near}${shade ? `-${shade}` : ''}${opacity}${importantAfter}`;
     return { suggestion };
 }
 export function analyzeTyposContent(filePath, content, config = {}) {

package/dist/eslint/plugin.js

@@ -7,13 +7,14 @@ const _require = createRequire(import.meta.url);
  * Inner-text range of a `TemplateElement`. In espree, `quasi.range` spans the
  * delimiters too (the opening backtick or `}` plus the closing backtick or
  * `${`). The leading delimiter is always one character, so the raw text starts
- * at `range[0] + 1` and runs for `raw.length` characters.
+ * at `range[0] + 1`. Use source range endpoints for its end because espree
+ * normalizes CRLF in `value.raw`, whose length can differ from the source.
  */
 function quasiTextRange(quasi) {
     if (!quasi.range)
         return undefined;
     const start = quasi.range[0] + 1;
-    return [start, start + quasi.value.raw.length];
+    return [start, quasi.range[1] - (quasi.tail === false ? 2 : 1)];
 }
 /** Only inspect strings whose syntax establishes that they contain classes. */
 function isClassContext(node, config) {
@@ -51,6 +52,11 @@ function isClassContext(node, config) {
             return properties.every((property) => property.isKey);
         }
         if (parent.type === 'Property') {
+            // Computed CVA option names need evaluation to establish their meaning.
+            if (parent.computed)
+                return false;
+            if (current === parent.key && parent.parent?.properties?.length !== 1)
+                return false;
             properties.push({
                 key: String(parent.key?.name ?? parent.key?.value ?? ''),
                 isKey: current === parent.key,
@@ -168,6 +174,7 @@ const noArbitraryCanonical = {
                     ignorePatterns: { type: 'array' },
                     tailwindVersion: { enum: [3, 4] },
                     useDefaultTheme: { type: 'boolean' },
+                    allowTextSizeLineHeightChanges: { type: 'boolean' },
                     functionNames: { type: 'array', items: { type: 'string' } },
                     attributeNames: { type: 'array', items: { type: 'string' } },
                     sortOrder: { type: 'array', items: { type: 'string' } },

package/dist/io/config.js

@@ -133,6 +133,9 @@ export async function loadConfig(cwd, options = {}) {
         }
         throw err;
     }
+    if (mod.default === undefined || mod.default === null) {
+        throw new Error(`Invalid ${filename}: default export must be a configuration object`);
+    }
     const config = validateConfig(mod.default, filename);
     if (hash)
         reloadCache.set(path, { hash, config });

package/dist/io/scanner.js

@@ -1,7 +1,10 @@
-import { existsSync, lstatSync, readdirSync, statSync, } from 'node:fs';
+import { accessSync, constants, existsSync, readdirSync, statSync, } from 'node:fs';
 import { glob } from 'node:fs/promises';
-import { isAbsolute, join, matchesGlob, resolve } from 'node:path';
+import { isAbsolute, join, matchesGlob, relative, resolve } from 'node:path';
 import { DEFAULT_EXTENSIONS, DEFAULT_IGNORE, isGlob, } from '../core/scanner.js';
+function missing(error) {
+    return ['ENOENT', 'ENOTDIR'].includes(error.code ?? '');
+}
 export function scanFiles(target, options = {}) {
     const ignore = options.ignore ?? DEFAULT_IGNORE;
     const extensions = options.extensions ?? DEFAULT_EXTENSIONS;
@@ -11,8 +14,10 @@ export function scanFiles(target, options = {}) {
         try {
             entries = readdirSync(current, { withFileTypes: true });
         }
-        catch {
-            return;
+        catch (error) {
+            if (missing(error))
+                return;
+            throw error;
         }
         for (const entry of entries) {
             if (ignore.includes(entry.name))
@@ -31,8 +36,10 @@ export function scanFiles(target, options = {}) {
     try {
         stat = statSync(target);
     }
-    catch {
-        return [];
+    catch (error) {
+        if (missing(error))
+            return [];
+        throw error;
     }
     if (stat.isFile())
         return extensions.some((ext) => target.endsWith(ext)) ? [target] : [];
@@ -53,18 +60,42 @@ export async function resolveTargets(patterns, options = {}) {
         }
     }
     const files = new Set();
+    const isLiteral = (pattern, allowMissingLiteral = false) => {
+        const kind = options.targetKinds?.get(pattern.replace(/\\/g, '/'));
+        return kind
+            ? kind === 'literal'
+            : existsSync(pattern) || (allowMissingLiteral && !isGlob(pattern));
+    };
     for (const pattern of positive) {
-        if (isGlob(pattern) && !existsSync(pattern)) {
-            for await (const f of glob(pattern, {
-                exclude: (entry) => entry
-                    .replace(/\\/g, '/')
-                    .split('/')
-                    .some((s) => ignore.includes(s)),
+        if (!isLiteral(pattern, true)) {
+            for await (const entry of glob(pattern, {
+                withFileTypes: true,
+                exclude: (entry) => {
+                    const path = join(entry.parentPath, entry.name);
+                    if (path
+                        .replace(/\\/g, '/')
+                        .split('/')
+                        .some((part) => ignore.includes(part)))
+                        return true;
+                    if (entry.isDirectory()) {
+                        try {
+                            // fs.glob otherwise silently swallows unreadable directories,
+                            // producing a falsely clean, partial scan.
+                            accessSync(path, constants.R_OK | constants.X_OK);
+                        }
+                        catch (error) {
+                            if (missing(error))
+                                return true;
+                            throw error;
+                        }
+                    }
+                    return false;
+                },
             })) {
-                if (extensions.some((ext) => f.endsWith(ext)) &&
-                    lstatSync(f).isFile()) {
-                    files.add(f);
-                }
+                if (!(entry.isFile() && extensions.some((ext) => entry.name.endsWith(ext))))
+                    continue;
+                const path = join(entry.parentPath, entry.name);
+                files.add(isAbsolute(pattern) ? path : relative(process.cwd(), path));
             }
         }
         else {
@@ -76,7 +107,7 @@ export async function resolveTargets(patterns, options = {}) {
     if (negativePatterns.length > 0) {
         const exclusions = negativePatterns.map((pattern) => ({
             pattern,
-            literal: existsSync(pattern)
+            literal: isLiteral(pattern)
                 ? resolve(pattern).replace(/\\/g, '/')
                 : undefined,
         }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-canonical",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Lint and auto-fix Tailwind CSS arbitrary values that have canonical equivalents",
   "type": "module",
   "main": "./dist/index.js",
@@ -54,7 +54,7 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@biomejs/biome": "^2.5.11",
+    "@biomejs/biome": "^2.6.3",
     "@types/estree": "^1.0.9",
     "@types/node": "^22.20.1",
     "knip": "^6.34.0",
@@ -84,6 +84,7 @@
     "lint:fix": "biome check --write src/ scripts/",
     "knip": "knip",
     "benchmark": "pnpm build && node scripts/benchmark.mjs",
-    "test:compat": "node scripts/compatibility.mjs"
+    "test:compat": "node scripts/compatibility.mjs",
+    "test:css": "node scripts/css-semantics.mjs"
   }
 }