tailwind-canonical 0.8.0 → 0.10.0

package/dist/core/config.d.ts

@@ -1,4 +1,4 @@
 import type { Config } from './rules.js';
 export declare const CONFIG_FILENAMES: readonly ["tailwind-canonical.config.ts", 'tailwind-canonical.config.mts', 'tailwind-canonical.config.js', 'tailwind-canonical.config.mjs'];
 export declare function validateConfig(input: unknown, filename?: string): Config;
-export { loadConfig, resolveInitFilename } from '../io/config.js';
+export { findConfigPath, loadConfig, resolveInitFilename, } from '../io/config.js';

package/dist/core/config.js

@@ -7,6 +7,8 @@ export const CONFIG_FILENAMES = [
     'tailwind-canonical.config.mjs',
 ];
 const KNOWN_KEYS = [
+    'useDefaultTheme',
+    'allowTextSizeLineHeightChanges',
     'customTextTokens',
     'customSpacingTokens',
     'ignorePatterns',
@@ -53,7 +55,9 @@ function fail(filename, message) {
     throw new Error(`Invalid ${filename}: ${message}`);
 }
 function isPlainObject(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
+    return (typeof value === 'object' &&
+        value !== null &&
+        [Object.prototype, null].includes(Object.getPrototypeOf(value)));
 }
 function assertKnownKeys(cfg, known, label, filename) {
     for (const key of Object.keys(cfg)) {
@@ -71,6 +75,8 @@ function assertPxTokenMap(value, key, filename) {
             fail(filename, `${key} keys must be integers (got "${k}")`);
         if (typeof v !== 'string')
             fail(filename, `${key}[${k}] must be a string`);
+        if (v.length === 0 || /[\s"'`{}:\\]/.test(v))
+            fail(filename, `${key}[${k}] must be a nonempty token name without whitespace, quotes, backticks, braces, colons or backslashes`);
     }
 }
 function assertStringArray(value, key, filename) {
@@ -136,11 +142,16 @@ function assertSortOrder(value, filename) {
 export function validateConfig(input, filename = CONFIG_FILENAME) {
     if (input === undefined || input === null)
         return {};
-    if (typeof input !== 'object' || Array.isArray(input)) {
-        fail(filename, 'default export must be an object');
+    if (!isPlainObject(input)) {
+        fail(filename, 'default export must be an object (plain objects only)');
     }
     const cfg = input;
     assertKnownKeys(cfg, KNOWN_KEYS, 'unknown key', filename);
+    if ('useDefaultTheme' in cfg && typeof cfg.useDefaultTheme !== 'boolean')
+        fail(filename, 'useDefaultTheme must be a boolean');
+    if ('allowTextSizeLineHeightChanges' in cfg &&
+        typeof cfg.allowTextSizeLineHeightChanges !== 'boolean')
+        fail(filename, 'allowTextSizeLineHeightChanges must be a boolean');
     if ('customTextTokens' in cfg)
         assertPxTokenMap(cfg.customTextTokens, 'customTextTokens', filename);
     if ('customSpacingTokens' in cfg)
@@ -176,4 +187,4 @@ export function validateConfig(input, filename = CONFIG_FILENAME) {
     }
     return cfg;
 }
-export { loadConfig, resolveInitFilename } from '../io/config.js';
+export { findConfigPath, loadConfig, resolveInitFilename, } from '../io/config.js';

package/dist/core/consistency.d.ts

@@ -2,7 +2,12 @@ import { type ClassStringOpts } from './class-strings.js';
 import type { Config } from './rules.js';
 export type FileClasses = {
     file: string;
+    /** All class occurrences, used for color and scale statistics. */
     classes: string[];
+    /** Individual class strings, used for repeated-pattern detection.
+     * When omitted, `classes` is treated as one class string for compatibility.
+     */
+    classLists?: string[][];
 };
 export type ColorVariant = {
     token: string;

package/dist/core/consistency.js

@@ -1,28 +1,33 @@
 import { extractClassStrings, SINGLE_CLASS_REGEX, } from './class-strings.js';
-import { COLOR_FAMILIES, parseColorClass, SCALE_PROPERTIES, stripVariants, TAILWIND_COLORS, } from './lexicon.js';
+import { COLOR_FAMILIES, parseColorClass, SCALE_PROPERTIES, splitClassModifiers, TAILWIND_COLORS, } from './lexicon.js';
 function parseColor(cls, families, knownColors) {
     const parsed = parseColorClass(cls);
     if (!parsed)
         return null;
-    const { property, color, shade } = parsed;
+    const { property, color, shade, opacity } = parsed;
     if (shade === '')
         return null;
     // A known color without an explicit family forms its own family, so colors
     // newly added to the palette are grouped rather than silently dropped.
-    const family = families[color] ?? (knownColors.has(color) ? color : null);
+    const family = Object.hasOwn(families, color)
+        ? families[color]
+        : knownColors.has(color)
+            ? color
+            : null;
     if (!family)
         return null;
-    return { property, family, token: `${color}-${shade}` };
+    return { property, family, token: `${color}-${shade}${opacity}` };
 }
 // A scale value is a number, a fraction, or an arbitrary [..] value. Keyword
 // values (auto, px, full, screen, …) are not grid values, so they are excluded
 // to avoid false "inconsistency" reports like mt-4 vs mt-auto.
 const SCALE_VALUE_RE = /^(\d+(?:\.\d+)?|\d+\/\d+|\[.+\])$/;
 function parseScale(cls, scaleProperties) {
-    const base = stripVariants(cls);
+    const { utility: base } = splitClassModifiers(cls);
     const negative = base.startsWith('-');
     const body = negative ? base.slice(1) : base;
-    const dash = body.lastIndexOf('-');
+    const bracket = body.indexOf('[');
+    const dash = body.lastIndexOf('-', bracket === -1 ? body.length : bracket);
     if (dash === -1)
         return null;
     const property = body.slice(0, dash);
@@ -149,20 +154,22 @@ function detectRareScaleValues(inconsistencies, minPropertyOccurrences, maxFiles
 // frequent sub-patterns (no k-subset itemset mining).
 function detectCombinations(input, minSize, minFiles, max) {
     const combos = new Map();
-    for (const { file, classes } of input) {
-        if (classes.length < minSize)
-            continue;
-        const unique = [...new Set(classes)].sort();
-        if (unique.length < minSize)
-            continue;
-        const key = unique.join(' ');
-        let entry = combos.get(key);
-        if (!entry) {
-            entry = { classes: unique, count: 0, files: new Set() };
-            combos.set(key, entry);
+    for (const { file, classes: allClasses, classLists } of input) {
+        for (const classes of classLists ?? [allClasses]) {
+            if (classes.length < minSize)
+                continue;
+            const unique = [...new Set(classes)].sort();
+            if (unique.length < minSize)
+                continue;
+            const key = unique.join(' ');
+            let entry = combos.get(key);
+            if (!entry) {
+                entry = { classes: unique, count: 0, files: new Set() };
+                combos.set(key, entry);
+            }
+            entry.count++;
+            entry.files.add(file);
         }
-        entry.count++;
-        entry.files.add(file);
     }
     return [...combos.values()]
         .filter((c) => c.files.size >= minFiles)

package/dist/core/deduplicator.d.ts

@@ -1,5 +1,5 @@
 import { type ClassStringOpts } from './class-strings.js';
-export declare function deduplicateClasses(classStr: string): string;
+export declare function deduplicateClasses(classStr: string, opts?: Pick<ClassStringOpts, 'tailwindVersion'>): string;
 export declare function dedupeContent(content: string, opts?: ClassStringOpts): {
     result: string;
     count: number;

package/dist/core/deduplicator.js

@@ -128,6 +128,10 @@ for (const f of FAMILIES) {
         SIDE_MAP[prefix] ??= sides;
 }
 function parseBoxClass(cls) {
+    // Important utilities occupy a different cascade priority. Keep their
+    // declarations intact instead of mixing their suffix into a box value.
+    if (cls.endsWith('!'))
+        return null;
     for (const family of FAMILIES) {
         const m = cls.match(family.regex);
         if (!m)
@@ -135,7 +139,12 @@ function parseBoxClass(cls) {
         const sides = {};
         for (const side of SIDE_MAP[m[1]] ?? [])
             sides[side] = m[2];
-        return { family, sides };
+        const kind = m[1] === family.full
+            ? 'full'
+            : m[1] === family.x || m[1] === family.y
+                ? 'axis'
+                : 'side';
+        return { family, sides, kind };
     }
     return null;
 }
@@ -186,6 +195,8 @@ const CORNER_MAP = {
     br: ['br'],
 };
 function parseRoundedCorner(cls) {
+    if (cls.endsWith('!') || /^rounded-(?:s|e|ss|se|es|ee)(?:-|$)/.test(cls))
+        return null;
     const m = cls.match(/^rounded-(tl|tr|bl|br|t|b|l|r)(?:-(.+))?$/) ??
         cls.match(/^rounded()(?:-(.+))?$/);
     if (!m)
@@ -320,7 +331,9 @@ function keepLastOf(slots, indices) {
     for (const i of indices.slice(0, -1))
         slots[i] = [];
 }
-export function deduplicateClasses(classStr) {
+export function deduplicateClasses(classStr, opts = {}) {
+    if (classStr.includes('${'))
+        return classStr;
     const original = classStr.split(/\s+/).filter(Boolean);
     if (original.length <= 1)
         return classStr;
@@ -343,12 +356,20 @@ export function deduplicateClasses(classStr) {
         }
         const parsed = parseBoxClass(cls);
         if (parsed) {
-            const { family, sides } = parsed;
+            const { family, sides, kind } = parsed;
             let group = boxGroups.get(family.kind);
             if (!group) {
-                group = { family, box: { t: '', b: '', l: '', r: '' }, indices: [] };
+                group = {
+                    family,
+                    box: { t: '', b: '', l: '', r: '' },
+                    indices: [],
+                    hasAxis: false,
+                    hasSide: false,
+                };
                 boxGroups.set(family.kind, group);
             }
+            group.hasAxis ||= kind === 'axis';
+            group.hasSide ||= kind === 'side';
             group.indices.push(idx);
             Object.assign(group.box, sides);
             return;
@@ -366,8 +387,15 @@ export function deduplicateClasses(classStr) {
     });
     keepLastOf(slots, displayIndices);
     keepLastOf(slots, positionIndices);
-    for (const { family, box, indices } of boxGroups.values()) {
-        placeCollapsed(slots, classes, indices, collapseBox(box, family));
+    for (const { family, box, indices, hasAxis, hasSide } of boxGroups.values()) {
+        // v4's x/y utilities use inline/block properties, unlike the physical
+        // t/b/l/r utilities. They cannot be interchanged in vertical writing modes.
+        const allEqual = box.t && box.t === box.b && box.t === box.l && box.t === box.r;
+        const preservePhysical = opts.tailwindVersion !== 3 && hasSide && (hasAxis || !allEqual);
+        const collapsed = preservePhysical
+            ? indices.map((index) => classes[index]).join(' ')
+            : collapseBox(box, family);
+        placeCollapsed(slots, classes, indices, collapsed);
     }
     if (cornerIndices.length > 0) {
         placeCollapsed(slots, classes, cornerIndices, collapseCorners(corners));
@@ -378,7 +406,7 @@ export function deduplicateClasses(classStr) {
     return unchanged ? classStr : result.join(' ');
 }
 export function dedupeContent(content, opts = {}) {
-    return replaceClassStrings(content, deduplicateClasses, {
+    return replaceClassStrings(content, (classes) => deduplicateClasses(classes, opts), {
         ...opts,
         isSuppressed: makeLineSuppressor(content),
     });

package/dist/core/lexicon.d.ts

@@ -1,6 +1,11 @@
 export declare const TAILWIND_COLORS: Set<string>;
 export declare const COLOR_FAMILIES: Record<string, string>;
-export declare function stripVariants(cls: string): string;
+export declare function splitClassModifiers(cls: string): {
+    prefix: string;
+    utility: string;
+    importantBefore: string;
+    importantAfter: string;
+};
 /**
  * Parses a color utility class into its property, color name and (optional)
  * numeric shade. Strips leading variants (`hover:` …). Returns `null` when the
@@ -12,5 +17,6 @@ export declare function parseColorClass(cls: string): {
     property: string;
     color: string;
     shade: string;
+    opacity: string;
 } | null;
 export declare const SCALE_PROPERTIES: Set<string>;

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.d.ts

@@ -1,4 +1,5 @@
 import { type ClassStringOpts } from './class-strings.js';
+export declare function mergeClasses(classes: string, twMerge: (classes: string) => string, opts?: Pick<ClassStringOpts, 'customTextTokens'>): string;
 export declare function mergeContent(content: string, twMerge: (classes: string) => string, opts?: ClassStringOpts): {
     result: string;
     count: number;

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));
@@ -84,9 +86,12 @@ function restoreLeadingForUnsafeTextSizes(original, merged, customTextClasses) {
     }
     return restored.join(' ');
 }
-export function mergeContent(content, twMerge, opts = {}) {
+export function mergeClasses(classes, twMerge, opts = {}) {
     const customTextClasses = new Set(Object.values(opts.customTextTokens ?? {}).map((token) => `text-${token}`));
-    return replaceClassStrings(content, (classes) => restoreLeadingForUnsafeTextSizes(classes, twMerge(classes), customTextClasses), {
+    return restoreLeadingForUnsafeTextSizes(classes, twMerge(classes), customTextClasses);
+}
+export function mergeContent(content, twMerge, opts = {}) {
+    return replaceClassStrings(content, (classes) => mergeClasses(classes, twMerge, opts), {
         ...opts,
         isSuppressed: makeLineSuppressor(content),
     });

package/dist/core/rules.d.ts

@@ -26,6 +26,10 @@ type DefaultCommandConfig = {
     targets?: string[];
 };
 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

@@ -13,7 +13,6 @@ const TEXT_SIZE_MAP = {
     96: '8xl',
     128: '9xl',
 };
-const BUILT_IN_TEXT_PX = new Set(Object.keys(TEXT_SIZE_MAP).map(Number));
 /**
  * Radius px → token suffix. v4 renamed the small end (`rounded-sm` → `-xs`,
  * bare `rounded` → `-sm`) and added `4xl`; `''` is the bare v3 `rounded`.
@@ -343,7 +342,7 @@ function textSuggestion(cls, px, textTokens) {
     return {
         original: cls,
         canonical: `text-${token}`,
-        isCustomToken: !BUILT_IN_TEXT_PX.has(px),
+        isCustomToken: textTokens[px] !== TEXT_SIZE_MAP[px],
     };
 }
 function spacingSuggestion(cls, prefix, px, spacingTokens, v3) {
@@ -356,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;
         }
@@ -466,6 +466,32 @@ 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) {
+            const token = config.customTextTokens?.[Number(text[1])];
+            return token
+                ? { original: cls, canonical: `text-${token}`, isCustomToken: true }
+                : null;
+        }
+        const spacing = cls.match(SPACING_PX_RE);
+        if (spacing) {
+            const token = config.customSpacingTokens?.[Number(spacing[2])];
+            return token
+                ? {
+                    original: cls,
+                    canonical: `${spacing[1]}-${token}`,
+                    isCustomToken: true,
+                }
+                : null;
+        }
+        // Even rem-to-px equivalences depend on the consumer's root font size.
+        // A custom theme must opt in through explicit mappings, never inference.
+        return null;
+    }
     const textTokens = { ...TEXT_SIZE_MAP, ...config.customTextTokens };
     const spacingTokens = config.customSpacingTokens ?? {};
     const v3 = config.tailwindVersion === 3;

package/dist/core/scanner.d.ts

@@ -3,7 +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 declare function globToRegex(pattern: string): RegExp;
 export { resolveTargets, scanFiles } from '../io/scanner.js';

package/dist/core/scanner.js

@@ -15,55 +15,6 @@ export const DEFAULT_IGNORE = [
     'coverage',
 ];
 export function isGlob(target) {
-    return target.includes('*') || target.includes('?') || target.includes('{');
-}
-function escapeRegex(text) {
-    return text.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');
-}
-function wildcardToRegex(text) {
-    return text
-        .split('*')
-        .map((part) => part.split('?').map(escapeRegex).join('[^/]'))
-        .join('[^/]*');
-}
-export function globToRegex(pattern) {
-    let i = 0;
-    const anchored = pattern.startsWith('/') || /^[A-Za-z]:/.test(pattern);
-    let re = anchored ? '^' : '(?:^|/)';
-    while (i < pattern.length) {
-        const c = pattern[i];
-        if (c === '*' && pattern[i + 1] === '*') {
-            i += 2;
-            if (pattern[i] === '/') {
-                re += '(?:[^/]+/)*';
-                i++;
-            }
-            else {
-                re += '.*';
-            }
-        }
-        else if (c === '*') {
-            re += '[^/]*';
-            i++;
-        }
-        else if (c === '?') {
-            re += '[^/]';
-            i++;
-        }
-        else if (c === '{' && pattern.indexOf('}', i) !== -1) {
-            const close = pattern.indexOf('}', i);
-            const alts = pattern
-                .slice(i + 1, close)
-                .split(',')
-                .map(wildcardToRegex);
-            re += `(?:${alts.join('|')})`;
-            i = close + 1;
-        }
-        else {
-            re += escapeRegex(c);
-            i++;
-        }
-    }
-    return new RegExp(`${re}$`);
+    return /[*?{[(]/.test(target);
 }
 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.d.ts

@@ -9,7 +9,7 @@ interface TailwindCanonicalPlugin {
             plugins: {
                 'tailwind-canonical': TailwindCanonicalPlugin;
             };
-            rules: Record<string, string>;
+            rules: Record<string, 'warn'>;
         };
     };
 }