tailwind-canonical 0.7.1 → 0.8.0

package/README.md

@@ -352,10 +352,36 @@ left-2 right-2                  → inset-x-2
 | `text-[12px]` | `text-xs` | Built-in |
 | `text-[0.75rem]` | `text-xs` | rem values |
 | `h-[64px]` | `h-16` | Spacing scale ÷4 |
+| `p-[1px]` / `gap-[1px]` | `p-px` / `gap-px` | 1px spacing step |
 | `w-[50%]` | `w-1/2` | Percentage fractions |
-| `opacity-[0.5]` | `opacity-50` | Opacity scale |
+| `w-[100%]` / `basis-[100%]` | `w-full` / `basis-full` | Sizing, inset, translate, basis |
+| `h-[100vh]` / `w-[100vw]` | `h-screen` / `w-screen` | Axis-checked; `min-w-screen` is v4-only |
+| `h-[100dvh]` / `svh` / `lvh` | `h-dvh` / `h-svh` / `h-lvh` | v4 only |
+| `w-[auto]` / `mx-[auto]` | `w-auto` / `mx-auto` | Never negated |
+| `w-[fit-content]` / `min-content` / `max-content` | `w-fit` / `w-min` / `w-max` | |
+| `p-[0]` / `top-[0]` | `p-0` / `top-0` | Unitless zero |
+| `aspect-[16/9]` / `aspect-[1/1]` | `aspect-video` / `aspect-square` | Other ratios (`aspect-4/3`) v4 only |
+| `rounded-[9999px]` | `rounded-full` | |
+| `opacity-[0.5]` / `opacity-[.5]` | `opacity-50` | Opacity scale |
+| `border-[1px]` / `border-t-[1px]` | `border` / `border-t` | Bare = 1px; `[0/2/4/8px]` → `border-0/2/4/8` |
+| `divide-x-[1px]` | `divide-x` | Same scale as `border` |
+| `ring-[1px]` / `outline-[2px]` | `ring-1` / `outline-2` | Never bare: `ring` is 3px on v3 |
+| `duration-[200ms]` / `delay-[0.15s]` | `duration-200` / `delay-150` | ms or s |
+| `scale-[1.05]` / `scale-x-[95%]` | `scale-105` / `scale-x-95` | Factor or percentage |
+| `rotate-[45deg]` | `rotate-45` | Integer degrees |
+| `blur-[4px]` | `blur-xs` | `blur-sm` with `tailwindVersion: 3` |
+| `z-[10]` | `z-10` | Any integer on v4 |
+| `font-[700]` | `font-bold` | Weights 100–900 |
+| `leading-[24px]` / `leading-[1.5rem]` | `leading-6` | Spacing scale ÷4 |
+| `leading-[1.5]` | `leading-normal` | `none`, `tight`, `snug`, `normal`, `relaxed`, `loose` |
+| `order-[1]` / `order-[0]` | `order-1` / `order-none` | Any integer on v4 |
+| `grow-[1]` / `shrink-[0]` | `grow` / `shrink-0` | |
+| `line-clamp-[3]`, `columns-[3]` | `line-clamp-3`, `columns-3` | Any integer ≥ 1 on v4 |
 | `text-[11px]` | `text-2xs` | Requires `customTextTokens` |
 | `text-[8px]`–`text-[10px]` | `text-3xs` | Requires `customTextTokens` |
+| `hover:p-[16px]` | `hover:p-4` | Variants are preserved |
+| `!p-[16px]` / `p-[16px]!` | `!p-4` / `p-4!` | Important modifier kept in place |
+| `-mt-[8px]` / `mt-[-8px]` | `-mt-2` | Negative margin / inset / translate / space / scale / rotate / z / order only |
 
 `text-2xs` and `text-3xs` are not stock Tailwind tokens, so they are not in the built-in text size map — without config, `text-[11px]` and `text-[8px]`–`text-[10px]` are left untouched. Enable them with `customTextTokens`:
 
@@ -393,14 +419,36 @@ scale differs per utility, not just per family:
 | `top-[20%]` | `top-1/5` | untouched — v3.3 stops at quarters here |
 | `top-[25%]` | `top-1/4` | `top-1/4` |
 | `w-[8.333333%]` | `w-1/12` | `w-1/12` — `w` carries the full set |
+| `duration-[250ms]` | `duration-250` | untouched — not on the v3 scale |
+| `scale-[1.15]` | `scale-115` | untouched — not on the v3 scale |
+| `rotate-[30deg]` | `rotate-30` | untouched — not on the v3 scale |
+| `blur-[4px]` | `blur-xs` | `blur-sm` — v3 names are one step lower |
+| `blur-[8px]` | `blur-sm` | `blur` |
+| `z-[15]` | `z-15` | untouched — v3 stops at `0`–`50` in tens |
+| `leading-[44px]` | `leading-11` | untouched — v3 ships `leading-3`–`leading-10` |
+| `order-[13]` | `order-13` | untouched — v3 ships `1`–`12` |
+| `grow-[2]` | `grow-2` | untouched — v3 ships `grow` and `grow-0` |
+| `line-clamp-[7]` | `line-clamp-7` | untouched — v3 ships `1`–`6` |
+| `columns-[13]` | `columns-13` | untouched — v3 ships `1`–`12` |
 
 Spacing steps: `size-*` has no numeric scale in v3.3, and `min-w-*`, `max-w-*`
 and `min-h-*` only ship the zero step — they gained the scale afterwards.
 Fractions: `w` carries all thirteen, `h` stops at sixths, `inset`/`top`/`left`/
 `right`/`bottom`/`translate-x`/`translate-y` only have halves, thirds and
 quarters, and `min-w`/`max-w`/`min-h`/`max-h` have none.
-
-`text-*`, `rounded-*` and `opacity-*` are identical in both majors and are
+`duration-*`/`delay-*` stop at 0, 75, 100, 150, 200, 300, 500, 700 and 1000;
+`scale-*` at 0, 50, 75, 90, 95, 100, 105, 110, 125 and 150; `rotate-*` at 0, 1,
+2, 3, 6, 12, 45, 90 and 180. v4 accepts any integer for all four.
+
+`*-px` follows the same per-utility gating: `size-px`, `min-w-px`, `max-w-px`
+and `min-h-px` are left untouched on v3.
+
+`rounded-*` follows each major's radius scale: v4 renamed the small end, so
+`rounded-[2px]` → `rounded-xs` and `rounded-[4px]` → `rounded-sm` on v4, but
+`rounded-sm` and bare `rounded` on v3; `rounded-[32px]` → `rounded-4xl` is
+v4-only. `text-*`, `opacity-*`, `font-*` weights, the `leading-*`
+keywords and the `border`/`divide`/`ring`/`outline`
+widths are identical in both majors and are
 never gated. `customSpacingTokens` stays your decision and is applied in both
 modes. All of the above was measured against `tailwindcss@3.3.7`, the
 advertised floor.

package/dist/core/rules.d.ts

@@ -43,5 +43,10 @@ export type Config = {
     /** Target Tailwind major. v3 restricts suggestions to its discrete scale. */
     tailwindVersion?: 3 | 4;
 };
+/**
+ * Suggests the canonical form of a class, preserving its variants
+ * (`hover:`, `md:`, `[&:hover]:`), important modifier (`!p-4` / `p-4!`)
+ * and sign (`-mt-[8px]` / `mt-[-8px]` → `-mt-2`).
+ */
 export declare function suggestCanonical(cls: string, config?: Config): Suggestion | null;
 export {};

package/dist/core/rules.js

@@ -14,14 +14,32 @@ const TEXT_SIZE_MAP = {
     128: '9xl',
 };
 const BUILT_IN_TEXT_PX = new Set(Object.keys(TEXT_SIZE_MAP).map(Number));
-const ROUNDED_MAP = {
-    2: 'sm',
+/**
+ * Radius px → token suffix. v4 renamed the small end (`rounded-sm` → `-xs`,
+ * bare `rounded` → `-sm`) and added `4xl`; `''` is the bare v3 `rounded`.
+ */
+const ROUNDED_MAP_V4 = {
+    0: 'none',
+    2: 'xs',
     4: 'sm',
     6: 'md',
     8: 'lg',
     12: 'xl',
     16: '2xl',
     24: '3xl',
+    32: '4xl',
+    9999: 'full',
+};
+const ROUNDED_MAP_V3 = {
+    0: 'none',
+    2: 'sm',
+    4: '',
+    6: 'md',
+    8: 'lg',
+    12: 'xl',
+    16: '2xl',
+    24: '3xl',
+    9999: 'full',
 };
 const FRACTION_MAP = {
     '50': '1/2',
@@ -58,6 +76,7 @@ const FRACTION_PREFIXES = [
     'bottom',
     'translate-x',
     'translate-y',
+    'basis',
 ];
 const SPACING_PREFIXES = [
     'h',
@@ -93,10 +112,49 @@ const SPACING_PREFIXES = [
     'translate-y',
     'space-x',
     'space-y',
+    'leading',
 ];
 const SPACING_PX_RE = new RegExp(`^(${SPACING_PREFIXES.join('|')})-\\[(\\d+)px\\]$`);
 const SPACING_REM_RE = new RegExp(`^(${SPACING_PREFIXES.join('|')})-\\[(\\d+(?:\\.\\d+)?)rem\\]$`);
 const FRACTION_RE = new RegExp(`^(${FRACTION_PREFIXES.join('|')})-\\[(\\d+(?:\\.\\d+)?)%\\]$`);
+/** Pixel widths shipped by `border`, `divide`, `ring` and `outline` in both majors. */
+const WIDTH_SCALE = new Set([0, 1, 2, 4, 8]);
+/** Bare form is 1px in both majors. */
+const BARE_WIDTH_RE = /^(border(?:-[xytrblse])?|divide-[xy])-\[(\d+)px\]$/;
+/** No bare form: `ring` is 3px in v3, `outline` is a style in v3. */
+const NUMBERED_WIDTH_RE = /^(ring|outline)-\[(\d+)px\]$/;
+const LEADING_KEYWORDS = {
+    '1': 'none',
+    '1.25': 'tight',
+    '1.375': 'snug',
+    '1.5': 'normal',
+    '1.625': 'relaxed',
+    '2': 'loose',
+};
+const FONT_WEIGHT_MAP = {
+    100: 'thin',
+    200: 'extralight',
+    300: 'light',
+    400: 'normal',
+    500: 'medium',
+    600: 'semibold',
+    700: 'bold',
+    800: 'extrabold',
+    900: 'black',
+};
+/**
+ * Unitless integer utilities. v4 derives each from the bare number, so any
+ * integer at or above `min` works; v3 only ships the listed steps.
+ */
+const INTEGER_SCALES = {
+    z: { min: 0, v3: new Set([0, 10, 20, 30, 40, 50]) },
+    order: { min: 1, v3: new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) },
+    'line-clamp': { min: 1, v3: new Set([1, 2, 3, 4, 5, 6]) },
+    columns: { min: 1, v3: new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) },
+};
+const INTEGER_SCALE_RE = new RegExp(`^(${Object.keys(INTEGER_SCALES).join('|')})-\\[(\\d+)\\]$`);
+/** Leading steps v3 ships; v4 derives any integer from the spacing scale. */
+const V3_LEADING_STEPS = new Set([3, 4, 5, 6, 7, 8, 9, 10]);
 const OPACITY_SCALE = new Set([
     0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100,
 ]);
@@ -140,6 +198,106 @@ const V3_FRACTIONS_BY_PREFIX = {
     bottom: new Set(V3_INSET_FRACTIONS),
     'translate-x': new Set(V3_INSET_FRACTIONS),
     'translate-y': new Set(V3_INSET_FRACTIONS),
+    basis: new Set([...V3_HEIGHT_FRACTIONS, '1/12', '11/12']),
+};
+const SIZING_PREFIXES = ['w', 'h', 'min-w', 'max-w', 'min-h', 'max-h'];
+const INSET_PREFIXES = ['inset', 'top', 'left', 'right', 'bottom'];
+const MARGIN_PREFIXES = ['m', 'mx', 'my', 'mt', 'mb', 'ml', 'mr'];
+const fullViewport = (keyword, prefixes) => ({
+    keyword,
+    v4: prefixes,
+    v3: [],
+});
+/**
+ * Arbitrary value → named keyword, with the prefixes shipping it per major.
+ * v3 lists what tailwindcss@3.3.7 generates: no `size-*`, no dynamic
+ * viewport units, and `screen` only on the axis it measures.
+ */
+const KEYWORD_VALUES = {
+    '100%': {
+        keyword: 'full',
+        v4: [
+            ...SIZING_PREFIXES,
+            'size',
+            ...INSET_PREFIXES,
+            'translate-x',
+            'translate-y',
+            'basis',
+        ],
+        v3: [
+            ...SIZING_PREFIXES,
+            ...INSET_PREFIXES,
+            'translate-x',
+            'translate-y',
+            'basis',
+        ],
+    },
+    '100vw': { keyword: 'screen', v4: ['w', 'min-w', 'max-w'], v3: ['w'] },
+    '100vh': {
+        keyword: 'screen',
+        v4: ['h', 'min-h', 'max-h'],
+        v3: ['h', 'min-h', 'max-h'],
+    },
+    '100dvh': fullViewport('dvh', ['h', 'min-h', 'max-h']),
+    '100svh': fullViewport('svh', ['h', 'min-h', 'max-h']),
+    '100lvh': fullViewport('lvh', ['h', 'min-h', 'max-h']),
+    '100dvw': fullViewport('dvw', ['w']),
+    '100svw': fullViewport('svw', ['w']),
+    '100lvw': fullViewport('lvw', ['w']),
+    auto: {
+        keyword: 'auto',
+        v4: [
+            'w',
+            'h',
+            'size',
+            ...MARGIN_PREFIXES,
+            ...INSET_PREFIXES,
+            'basis',
+            'aspect',
+        ],
+        v3: ['w', 'h', ...MARGIN_PREFIXES, ...INSET_PREFIXES, 'basis', 'aspect'],
+    },
+    'fit-content': {
+        keyword: 'fit',
+        v4: [...SIZING_PREFIXES, 'size'],
+        v3: SIZING_PREFIXES,
+    },
+    'min-content': {
+        keyword: 'min',
+        v4: [...SIZING_PREFIXES, 'size'],
+        v3: SIZING_PREFIXES,
+    },
+    'max-content': {
+        keyword: 'max',
+        v4: [...SIZING_PREFIXES, 'size'],
+        v3: SIZING_PREFIXES,
+    },
+};
+const KEYWORD_RE = /^([a-z]+(?:-[a-z]+)*)-\[([a-z0-9%-]+)\]$/;
+const SPACING_ZERO_RE = new RegExp(`^(${SPACING_PREFIXES.join('|')})-\\[0\\]$`);
+const ASPECT_RATIO_RE = /^aspect-\[(\d+)_?\/_?(\d+)\]$/;
+/** Discrete v3 scales; v4 accepts any integer for these utilities. */
+const V3_TIME_STEPS = new Set([0, 75, 100, 150, 200, 300, 500, 700, 1000]);
+const V3_SCALE_STEPS = new Set([0, 50, 75, 90, 95, 100, 105, 110, 125, 150]);
+const V3_ROTATE_STEPS = new Set([0, 1, 2, 3, 6, 12, 45, 90, 180]);
+/** px → blur suffix; `''` is the bare `blur` class. */
+const BLUR_MAP_V4 = {
+    4: '-xs',
+    8: '-sm',
+    12: '-md',
+    16: '-lg',
+    24: '-xl',
+    40: '-2xl',
+    64: '-3xl',
+};
+const BLUR_MAP_V3 = {
+    4: '-sm',
+    8: '',
+    12: '-md',
+    16: '-lg',
+    24: '-xl',
+    40: '-2xl',
+    64: '-3xl',
 };
 function remToPx(rem) {
     const px = rem * 16;
@@ -153,8 +311,25 @@ function isIgnored(cls, patterns) {
         return re.test(cls);
     });
 }
+/** `value × factor` when it lands on an integer, else null (float-safe). */
+function toInteger(value, factor) {
+    const scaled = value * factor;
+    const rounded = Math.round(scaled);
+    return Math.abs(scaled - rounded) <= 1e-9 ? rounded : null;
+}
+function scaleStepSuggestion(cls, prefix, step, v3Steps) {
+    if (step === null || (v3Steps && !v3Steps.has(step)))
+        return null;
+    return {
+        original: cls,
+        canonical: `${prefix}-${step}`,
+        isCustomToken: false,
+    };
+}
 /** True when the ÷4 result would be a class v3 never generates. */
 function isMissingInV3(prefix, step) {
+    if (prefix === 'leading')
+        return !V3_LEADING_STEPS.has(step);
     if (V3_UNSCALED_SPACING_PREFIXES.has(prefix))
         return true;
     if (V3_ZERO_ONLY_SPACING_PREFIXES.has(prefix))
@@ -179,6 +354,14 @@ function spacingSuggestion(cls, prefix, px, spacingTokens, v3) {
             isCustomToken: true,
         };
     }
+    if (px === 1) {
+        if (v3 &&
+            (V3_UNSCALED_SPACING_PREFIXES.has(prefix) ||
+                V3_ZERO_ONLY_SPACING_PREFIXES.has(prefix))) {
+            return null;
+        }
+        return { original: cls, canonical: `${prefix}-px`, isCustomToken: false };
+    }
     if (px % 4 !== 0)
         return null;
     if (v3 && isMissingInV3(prefix, px / 4))
@@ -189,9 +372,100 @@ function spacingSuggestion(cls, prefix, px, spacingTokens, v3) {
         isCustomToken: false,
     };
 }
+/** Utilities whose arbitrary value may be negated (`-mt-2`, `-translate-x-1/2`). */
+const NEGATABLE_PREFIXES = [
+    'm',
+    'mx',
+    'my',
+    'mt',
+    'mb',
+    'ml',
+    'mr',
+    'inset',
+    'top',
+    'left',
+    'right',
+    'bottom',
+    'translate-x',
+    'translate-y',
+    'space-x',
+    'space-y',
+    'scale',
+    'scale-x',
+    'scale-y',
+    'rotate',
+    'z',
+    'order',
+];
+/** Index just past the last top-level `:` — brackets/parens may hold colons. */
+function variantsEnd(cls) {
+    let depth = 0;
+    let end = 0;
+    for (let i = 0; i < cls.length; i++) {
+        const ch = cls[i];
+        if (ch === '[' || ch === '(')
+            depth++;
+        else if ((ch === ']' || ch === ')') && depth > 0)
+            depth--;
+        else if (ch === ':' && depth === 0)
+            end = i + 1;
+    }
+    return end;
+}
+function parseClass(cls) {
+    const end = variantsEnd(cls);
+    let utility = cls.slice(end);
+    const leadingImportant = utility.startsWith('!');
+    if (leadingImportant)
+        utility = utility.slice(1);
+    const trailingImportant = !leadingImportant && utility.endsWith('!');
+    if (trailingImportant)
+        utility = utility.slice(0, -1);
+    let negative = utility.startsWith('-');
+    if (negative)
+        utility = utility.slice(1);
+    const innerNegative = utility.match(/^([a-z-]+)-\[-([^\]]+)\]$/);
+    if (innerNegative) {
+        negative = !negative;
+        utility = `${innerNegative[1]}-[${innerNegative[2]}]`;
+    }
+    return {
+        variants: cls.slice(0, end),
+        leadingImportant,
+        trailingImportant,
+        negative,
+        utility,
+    };
+}
+/**
+ * Suggests the canonical form of a class, preserving its variants
+ * (`hover:`, `md:`, `[&:hover]:`), important modifier (`!p-4` / `p-4!`)
+ * and sign (`-mt-[8px]` / `mt-[-8px]` → `-mt-2`).
+ */
 export function suggestCanonical(cls, config = {}) {
     if (isIgnored(cls, config.ignorePatterns))
         return null;
+    const parsed = parseClass(cls);
+    if (parsed.utility !== cls &&
+        isIgnored(parsed.utility, config.ignorePatterns))
+        return null;
+    const base = suggestUtility(parsed.utility, config);
+    if (!base)
+        return null;
+    if (parsed.negative &&
+        !NEGATABLE_PREFIXES.some((p) => parsed.utility.startsWith(`${p}-[`))) {
+        return null;
+    }
+    if (parsed.negative && base.canonical.endsWith('-auto'))
+        return null;
+    const sign = parsed.negative && !/-(0|none)$/.test(base.canonical) ? '-' : '';
+    return {
+        original: cls,
+        canonical: `${parsed.variants}${parsed.leadingImportant ? '!' : ''}${sign}${base.canonical}${parsed.trailingImportant ? '!' : ''}`,
+        isCustomToken: base.isCustomToken,
+    };
+}
+function suggestUtility(cls, config) {
     const textTokens = { ...TEXT_SIZE_MAP, ...config.customTextTokens };
     const spacingTokens = config.customSpacingTokens ?? {};
     const v3 = config.tailwindVersion === 3;
@@ -206,6 +480,39 @@ export function suggestCanonical(cls, config = {}) {
         const px = remToPx(parseFloat(textRemMatch[1]));
         return px === null ? null : textSuggestion(cls, px, textTokens);
     }
+    // w-[100%] → w-full, h-[100vh] → h-screen, mx-[auto] → mx-auto
+    const keywordMatch = cls.match(KEYWORD_RE);
+    const keywordRule = keywordMatch && KEYWORD_VALUES[keywordMatch[2]];
+    if (keywordMatch && keywordRule) {
+        const prefix = keywordMatch[1];
+        if (!(v3 ? keywordRule.v3 : keywordRule.v4).includes(prefix))
+            return null;
+        return {
+            original: cls,
+            canonical: `${prefix}-${keywordRule.keyword}`,
+            isCustomToken: false,
+        };
+    }
+    // p-[0] → p-0 (unitless zero)
+    const spacingZeroMatch = cls.match(SPACING_ZERO_RE);
+    if (spacingZeroMatch) {
+        return spacingSuggestion(cls, spacingZeroMatch[1], 0, spacingTokens, v3);
+    }
+    // aspect-[16/9] → aspect-video; other ratios are v4-only
+    const aspectMatch = cls.match(ASPECT_RATIO_RE);
+    if (aspectMatch) {
+        if (/^0+$/.test(aspectMatch[1]) || /^0+$/.test(aspectMatch[2]))
+            return null;
+        const ratio = `${aspectMatch[1]}/${aspectMatch[2]}`;
+        const keyword = { '16/9': 'video', '1/1': 'square' }[ratio];
+        if (!keyword && v3)
+            return null;
+        return {
+            original: cls,
+            canonical: `aspect-${keyword ?? ratio}`,
+            isCustomToken: false,
+        };
+    }
     // spacing-[Npx]
     const spacingPxMatch = cls.match(SPACING_PX_RE);
     if (spacingPxMatch) {
@@ -236,8 +543,60 @@ export function suggestCanonical(cls, config = {}) {
             isCustomToken: false,
         };
     }
-    // opacity-[N.N] or opacity-[0.N]
-    const opacityMatch = cls.match(/^opacity-\[(\d+(?:\.\d+)?)\]$/);
+    // leading-[1.5] → leading-normal
+    const leadingUnitlessMatch = cls.match(/^leading-\[(\d+(?:\.\d+)?|\.\d+)\]$/);
+    if (leadingUnitlessMatch) {
+        const keyword = LEADING_KEYWORDS[String(parseFloat(leadingUnitlessMatch[1]))];
+        if (!keyword)
+            return null;
+        return {
+            original: cls,
+            canonical: `leading-${keyword}`,
+            isCustomToken: false,
+        };
+    }
+    // font-[700] → font-bold
+    const fontWeightMatch = cls.match(/^font-\[(\d+)\]$/);
+    if (fontWeightMatch) {
+        const weight = FONT_WEIGHT_MAP[parseInt(fontWeightMatch[1], 10)];
+        if (!weight)
+            return null;
+        return { original: cls, canonical: `font-${weight}`, isCustomToken: false };
+    }
+    // z/order/line-clamp/columns-[N]
+    const integerMatch = cls.match(INTEGER_SCALE_RE);
+    if (integerMatch) {
+        const prefix = integerMatch[1];
+        const value = parseInt(integerMatch[2], 10);
+        if (prefix === 'order' && value === 0) {
+            return { original: cls, canonical: 'order-none', isCustomToken: false };
+        }
+        const scale = INTEGER_SCALES[prefix];
+        if (value < scale.min)
+            return null;
+        if (v3 && !scale.v3.has(value))
+            return null;
+        return {
+            original: cls,
+            canonical: `${prefix}-${value}`,
+            isCustomToken: false,
+        };
+    }
+    // grow-[N] / shrink-[N]
+    const flexFactorMatch = cls.match(/^(grow|shrink)-\[(\d+)\]$/);
+    if (flexFactorMatch) {
+        const prefix = flexFactorMatch[1];
+        const value = parseInt(flexFactorMatch[2], 10);
+        if (value > 1 && v3)
+            return null;
+        return {
+            original: cls,
+            canonical: value === 1 ? prefix : `${prefix}-${value}`,
+            isCustomToken: false,
+        };
+    }
+    // opacity-[N.N], opacity-[0.N] or opacity-[.N]
+    const opacityMatch = cls.match(/^opacity-\[(\d+(?:\.\d+)?|\.\d+)\]$/);
     if (opacityMatch) {
         const raw = parseFloat(opacityMatch[1]);
         // CSS opacity is a 0..1 fraction; a bare value > 1 clamps to 1 and is not
@@ -256,19 +615,73 @@ export function suggestCanonical(cls, config = {}) {
             isCustomToken: false,
         };
     }
+    // border/divide-[Npx]
+    const bareWidthMatch = cls.match(BARE_WIDTH_RE);
+    if (bareWidthMatch) {
+        const px = parseInt(bareWidthMatch[2], 10);
+        if (!WIDTH_SCALE.has(px))
+            return null;
+        return {
+            original: cls,
+            canonical: px === 1 ? bareWidthMatch[1] : `${bareWidthMatch[1]}-${px}`,
+            isCustomToken: false,
+        };
+    }
+    // ring/outline-[Npx]
+    const numberedWidthMatch = cls.match(NUMBERED_WIDTH_RE);
+    if (numberedWidthMatch) {
+        const px = parseInt(numberedWidthMatch[2], 10);
+        if (!WIDTH_SCALE.has(px))
+            return null;
+        return {
+            original: cls,
+            canonical: `${numberedWidthMatch[1]}-${px}`,
+            isCustomToken: false,
+        };
+    }
     // rounded-[Npx]
     const roundedMatch = cls.match(/^(rounded|rounded-[a-z]+)-\[(\d+)px\]$/);
     if (roundedMatch) {
         const prefix = roundedMatch[1];
         const px = parseInt(roundedMatch[2], 10);
-        const token = ROUNDED_MAP[px];
-        if (!token)
+        const token = (v3 ? ROUNDED_MAP_V3 : ROUNDED_MAP_V4)[px];
+        if (token === undefined)
             return null;
         return {
             original: cls,
-            canonical: `${prefix}-${token}`,
+            canonical: token ? `${prefix}-${token}` : prefix,
             isCustomToken: false,
         };
     }
+    // duration-[200ms] / delay-[0.2s]
+    const timeMatch = cls.match(/^(duration|delay)-\[(\d+(?:\.\d+)?)(ms|s)\]$/);
+    if (timeMatch) {
+        const ms = toInteger(parseFloat(timeMatch[2]), timeMatch[3] === 's' ? 1000 : 1);
+        return scaleStepSuggestion(cls, timeMatch[1], ms, v3 ? V3_TIME_STEPS : null);
+    }
+    // scale-[1.05] / scale-x-[105%]
+    const scaleMatch = cls.match(/^(scale(?:-[xy])?)-\[(\d+(?:\.\d+)?)(%?)\]$/);
+    if (scaleMatch) {
+        const pct = toInteger(parseFloat(scaleMatch[2]), scaleMatch[3] ? 1 : 100);
+        return scaleStepSuggestion(cls, scaleMatch[1], pct, v3 ? V3_SCALE_STEPS : null);
+    }
+    // rotate-[45deg]
+    const rotateMatch = cls.match(/^rotate-\[(\d+(?:\.\d+)?)deg\]$/);
+    if (rotateMatch) {
+        const deg = toInteger(parseFloat(rotateMatch[1]), 1);
+        return scaleStepSuggestion(cls, 'rotate', deg, v3 ? V3_ROTATE_STEPS : null);
+    }
+    // blur-[8px] / blur-[0.5rem]
+    const blurMatch = cls.match(/^blur-\[(\d+(?:\.\d+)?)(px|rem)\]$/);
+    if (blurMatch) {
+        const raw = parseFloat(blurMatch[1]);
+        const px = blurMatch[2] === 'rem' ? remToPx(raw) : toInteger(raw, 1);
+        if (px === null)
+            return null;
+        const suffix = (v3 ? BLUR_MAP_V3 : BLUR_MAP_V4)[px];
+        if (suffix === undefined)
+            return null;
+        return { original: cls, canonical: `blur${suffix}`, isCustomToken: false };
+    }
     return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-canonical",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Lint and auto-fix Tailwind CSS arbitrary values that have canonical equivalents",
   "type": "module",
   "main": "./dist/index.js",