tailwind-canonical 0.9.0 → 0.10.0

package/dist/core/class-strings.js

@@ -5,10 +5,11 @@ export function toClassStringOpts(config) {
         functionNames: config.functionNames,
         attributeNames: config.attributeNames,
         customTextTokens: config.customTextTokens,
+        tailwindVersion: config.tailwindVersion,
     };
 }
 const DEFAULT_ATTR_NAMES = ['className'];
-export const SINGLE_CLASS_REGEX = /[^\s"'`{}]+/g;
+export const SINGLE_CLASS_REGEX = /\S+/g;
 function escapeRegex(s) {
     return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
@@ -16,45 +17,43 @@ function buildAttrRegex(names) {
     const alts = names.map(escapeRegex).join('|');
     return new RegExp(`(^|[^\\w:$-])(${alts})\\s*=\\s*`, 'g');
 }
-function attributeStrings(content, names) {
+function attributeStrings(content, names, functionNames = []) {
     const result = [];
     for (const match of content.matchAll(buildAttrRegex(names))) {
         const attributeStart = (match.index ?? 0) + match[1].length;
-        let i = (match.index ?? 0) + match[0].length;
-        const braced = content[i] === '{';
-        if (braced) {
-            i++;
-            while (/\s/.test(content[i] ?? '') && i < content.length)
-                i++;
+        const start = (match.index ?? 0) + match[0].length;
+        if (content[start] === '{') {
+            const expression = readCallTokens(content, start + 1, '}');
+            if (expression.complete) {
+                result.push(...classExpression(expression.tokens, functionNames).map((string) => ({ ...string, attributeStart })));
+            }
+            continue;
         }
-        if (content[i] !== '"' && content[i] !== "'" && content[i] !== '`')
+        if (!['"', "'", '`'].includes(content[start]))
             continue;
-        const quoted = readQuotedString(content, i);
+        const quoted = readQuotedString(content, start);
         if (!quoted)
             continue;
-        if (braced) {
-            i = quoted.next;
-            while (/\s/.test(content[i] ?? '') && i < content.length)
-                i++;
-            // Only a single string expression is static. A concatenation, method
-            // call or tagged template can change the meaning of its string pieces.
-            if (content[i] !== '}')
+        if (match[2].startsWith(':') || match[2].startsWith('v-bind:')) {
+            // Vue bindings contain JavaScript, not a class list. Entities require an
+            // HTML decoder/source map, so leave those expressions intact for now.
+            if (/&(?:#\d+|#x[\da-f]+|[a-z]+);/i.test(quoted.value))
                 continue;
+            const expression = readCallTokens(content, quoted.start, content[start]);
+            if (expression.complete && expression.next === quoted.next) {
+                result.push(...classExpression(expression.tokens, functionNames).map((string) => ({ ...string, attributeStart })));
+            }
         }
-        result.push({
-            value: quoted.value,
-            start: quoted.start,
-            end: quoted.end,
-            attributeStart,
-        });
+        else
+            result.push({ ...quoted, attributeStart, braceExpressions: true });
     }
     return result;
 }
 // A template expression is JavaScript, never a class list. Keep its adjacent
 // token fragments as well: `text-[12px]${suffix}` is not a static class.
-function interpolationEnd(content, start) {
+function interpolationEnd(content, start, openingLength = 2) {
     let depth = 1;
-    let i = start + 2;
+    let i = start + openingLength;
     while (i < content.length) {
         const ch = content[i];
         if (ch === '"' || ch === "'" || ch === '`') {
@@ -72,10 +71,7 @@ function interpolationEnd(content, start) {
             i = end < 0 ? content.length : end + 2;
         }
         else if (ch === '/') {
-            const preceding = content
-                .slice(start + 2, i)
-                .trimEnd()
-                .match(/(?:[\w$]+|=>|&&|\|\||\?\?|.)$/)?.[0];
+            const preceding = previousToken(content, i);
             if (regexMayStart(preceding)) {
                 const end = readRegex(content, i);
                 if (!end)
@@ -95,15 +91,27 @@ function interpolationEnd(content, start) {
     }
     return content.length;
 }
-function staticClassRanges(value) {
+function staticClassRanges(value, braceExpressions = false) {
     const ranges = [];
     let start = 0;
     let i = 0;
+    let bracketDepth = 0;
     while (i < value.length) {
         let escapes = 0;
         for (let j = i - 1; j >= 0 && value[j] === '\\'; j--)
             escapes++;
-        if (!value.startsWith('${', i) || escapes % 2 === 1) {
+        const openingLength = value.startsWith('${', i)
+            ? 2
+            : braceExpressions && bracketDepth === 0 && value[i] === '{'
+                ? 1
+                : 0;
+        if (!openingLength || escapes % 2 === 1) {
+            if (escapes % 2 === 0) {
+                if (value[i] === '[')
+                    bracketDepth++;
+                else if (value[i] === ']')
+                    bracketDepth = Math.max(0, bracketDepth - 1);
+            }
             i++;
             continue;
         }
@@ -112,7 +120,7 @@ function staticClassRanges(value) {
             before--;
         if (before > start)
             ranges.push({ value: value.slice(start, before), start, end: before });
-        i = interpolationEnd(value, i);
+        i = interpolationEnd(value, i, openingLength);
         while (i < value.length && !/\s/.test(value[i]))
             i++;
         start = i;
@@ -121,7 +129,7 @@ function staticClassRanges(value) {
         ranges.push({ value: value.slice(start), start, end: value.length });
     return ranges;
 }
-function transformStaticClasses(value, transform, isSuppressedAt, offset = 0) {
+function transformStaticClasses(value, transform, isSuppressedAt, offset = 0, braceExpressions = false) {
     const suppressed = [];
     if (isSuppressedAt) {
         let lineStart = 0;
@@ -133,7 +141,7 @@ function transformStaticClasses(value, transform, isSuppressedAt, offset = 0) {
             lineStart = end;
         }
     }
-    const ranges = staticClassRanges(value).flatMap((range) => {
+    const ranges = staticClassRanges(value, braceExpressions).flatMap((range) => {
         const safe = [];
         let start = range.start;
         for (const line of suppressed) {
@@ -155,7 +163,9 @@ function transformStaticClasses(value, transform, isSuppressedAt, offset = 0) {
             });
         return safe;
     });
-    const preserveEdges = value.includes('${') || suppressed.length > 0;
+    const preserveEdges = value.includes('${') ||
+        (braceExpressions && value.includes('{')) ||
+        suppressed.length > 0;
     let out = '';
     let pos = 0;
     for (const range of ranges) {
@@ -258,7 +268,32 @@ const REGEX_PREFIX_TOKENS = new Set([
     'await',
     'in',
     'instanceof',
+    'else',
+    'do',
+    'new',
+    'of',
+    // A slash after a statement block may open a regex. Treat a valid-looking
+    // literal conservatively even when an object/division expression is ambiguous.
+    '}',
 ]);
+// Read only the token immediately before an offset. Searching an entire source
+// prefix with an end-anchored regexp once per helper call is quadratic.
+function previousToken(content, offset) {
+    let end = offset;
+    while (end > 0 && /\s/.test(content[end - 1]))
+        end--;
+    if (end === 0)
+        return undefined;
+    let start = end;
+    while (start > 0 && /[\w$]/.test(content[start - 1]))
+        start--;
+    if (start < end)
+        return content.slice(start, end);
+    const pair = content.slice(Math.max(0, end - 2), end);
+    if (['=>', '&&', '||', '??'].includes(pair))
+        return pair;
+    return content[end - 1];
+}
 function regexMayStart(previous) {
     return previous === undefined || REGEX_PREFIX_TOKENS.has(previous);
 }
@@ -353,8 +388,14 @@ function classExpression(tokens, functionNames, objects = true) {
             return [token.string];
         if (token.text === '[' && token.children)
             return splitTokens(token.children, ',').flatMap((part) => classExpression(part, functionNames, objects));
-        if (token.text === '{' && objects)
+        if (token.text === '{' && objects) {
+            // Rewriting keys of a multi-property object can create a duplicate key
+            // and discard a predicate. Unknown/spread properties can collide too.
+            const properties = splitTokens(token.children ?? [], ',').filter((property) => property.length > 0);
+            if (properties.length !== 1)
+                return [];
             return objectProperties(token).flatMap(({ key }) => key.string ? [key.string] : []);
+        }
         // A grouping pair does not establish class context, but preserves one.
         if (token.text === '(' && token.children)
             return classExpression(token.children, functionNames, objects);
@@ -429,7 +470,7 @@ function classCall(name, tokens, functionNames) {
 }
 function scanCallStrings(content, start, functionNames = []) {
     const scanned = readCallTokens(content, start);
-    const name = content.slice(0, start - 1).match(/([\w$]+)\s*$/)?.[1] ?? '';
+    const name = previousToken(content, start - 1) ?? '';
     return {
         strings: scanned.complete
             ? classCall(name, scanned.tokens, functionNames)
@@ -438,26 +479,6 @@ function scanCallStrings(content, start, functionNames = []) {
         complete: scanned.complete,
     };
 }
-function transformCallContent(content, start, transform, isSuppressedAt, functionNames = []) {
-    const scanned = scanCallStrings(content, start, functionNames);
-    const original = content.slice(start, start + scanned.consumed);
-    if (!scanned.complete) {
-        return { processed: original, consumed: scanned.consumed, count: 0 };
-    }
-    const parts = [];
-    let pos = start;
-    let count = 0;
-    for (const string of scanned.strings) {
-        parts.push(content.slice(pos, string.start));
-        const out = transformStaticClasses(string.value, transform, isSuppressedAt, string.start);
-        if (out !== string.value)
-            count++;
-        parts.push(out);
-        pos = string.end;
-    }
-    parts.push(content.slice(pos, start + scanned.consumed));
-    return { processed: parts.join(''), consumed: scanned.consumed, count };
-}
 function offsetSuppressor(content, isSuppressed) {
     if (!isSuppressed)
         return undefined;
@@ -471,6 +492,8 @@ function protectedSourceOffsets(content) {
     const tags = [];
     const pendingTags = [];
     let expressionEnd = 0;
+    const controlParens = [];
+    let lastControlParenEnd = -1;
     let i = 0;
     while (i < content.length) {
         const start = i;
@@ -488,7 +511,7 @@ function protectedSourceOffsets(content) {
         if (!tag && ch === '<' && !content.startsWith('<!--', i)) {
             const match = content
                 .slice(i)
-                .match(/^<(\/?)([A-Za-z][\w:.-]*)(?=[\s/>])/);
+                .match(/^<(\/?)(?:([A-Za-z][\w:.-]*)(?=[\s/>])|(?=>))/);
             if (match) {
                 let end = i + match[0].length;
                 while (end < content.length && content[end] !== '>') {
@@ -505,8 +528,9 @@ function protectedSourceOffsets(content) {
                         end++;
                 }
                 const closing = match[1] === '/';
-                const selfClosing = content[end - 1] === '/';
-                const name = match[2];
+                const selfClosing = content[end - 1] === '/' ||
+                    /^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/.test(match[2] ?? '');
+                const name = match[2] ?? '';
                 if (end < content.length &&
                     (tags.length > 0 ||
                         selfClosing ||
@@ -514,7 +538,18 @@ function protectedSourceOffsets(content) {
                     pendingTags.push({ end, name, closing, selfClosing });
             }
         }
-        if (!tag && tags.length > 0 && i >= expressionEnd && ch !== '<') {
+        const rawTag = tags.at(-1)?.toLowerCase();
+        if (!tag && rawTag === 'style' && !content.startsWith('</style', i)) {
+            const end = content.indexOf('</style', i);
+            i = end < 0 ? content.length : end;
+            ranges.push({ start, end: i });
+            continue;
+        }
+        if (!tag &&
+            tags.length > 0 &&
+            rawTag !== 'script' &&
+            i >= expressionEnd &&
+            ch !== '<') {
             if (ch === '{')
                 expressionEnd = readCallTokens(content, i + 1, '}').next;
             else {
@@ -538,11 +573,14 @@ function protectedSourceOffsets(content) {
             i = end < 0 ? content.length : end + ending.length;
         }
         else if (ch === '/' && content[i - 1] !== '<' && content[i + 1] !== '>') {
-            const preceding = content
-                .slice(0, i)
-                .trimEnd()
-                .match(/(?:[\w$]+|=>|&&|\|\||\?\?|.)$/)?.[0];
-            const end = regexMayStart(preceding) ? readRegex(content, i) : null;
+            const preceding = previousToken(content, i);
+            let before = i - 1;
+            while (before >= 0 && /\s/.test(content[before]))
+                before--;
+            const afterControlCondition = preceding === ')' && before === lastControlParenEnd;
+            const end = regexMayStart(preceding) || afterControlCondition
+                ? readRegex(content, i)
+                : null;
             if (!end) {
                 i++;
                 continue;
@@ -550,6 +588,11 @@ function protectedSourceOffsets(content) {
             i = end;
         }
         else {
+            if (ch === '(') {
+                controlParens.push(['if', 'while', 'for', 'with', 'switch', 'catch'].includes(previousToken(content, i) ?? ''));
+            }
+            else if (ch === ')' && controlParens.pop())
+                lastControlParenEnd = i;
             i++;
             continue;
         }
@@ -568,82 +611,67 @@ function protectedSourceOffsets(content) {
         return low < ranges.length && ranges[low].start <= offset;
     };
 }
-export function replaceClassStrings(content, transform, opts = {}) {
+/** Collect disjoint ranges against the original source before any rewrite.
+ * Source offsets and suppression line numbers must not depend on an earlier
+ * attribute transform changing the number of lines in the file.
+ */
+function collectClassStrings(content, opts) {
     const attrNames = opts.attributeNames?.length
         ? opts.attributeNames
         : DEFAULT_ATTR_NAMES;
-    let result = content;
-    let count = 0;
-    const isSuppressed = opts.isSuppressed;
     const isProtected = protectedSourceOffsets(content);
-    const isAttributeSuppressed = offsetSuppressor(content, isSuppressed);
-    const attributeParts = [];
-    let attributeCursor = 0;
-    for (const string of attributeStrings(content, attrNames)) {
-        if (isProtected(string.attributeStart))
-            continue;
-        const out = transformStaticClasses(string.value, transform, isAttributeSuppressed, string.start);
+    const strings = attributeStrings(content, attrNames, opts.functionNames).filter((string) => !isProtected(string.attributeStart));
+    const funcNames = opts.functionNames;
+    if (funcNames?.length) {
+        const funcRe = new RegExp(`\\b(?:${funcNames.map(escapeRegex).join('|')})\\s*\\(`, 'g');
+        let consumedUntil = 0;
+        for (const match of content.matchAll(funcRe)) {
+            const offset = match.index ?? 0;
+            // A configured identifier must not select a suffix of a member call or
+            // a larger JavaScript identifier (where `$` is also an identifier char).
+            if (previousToken(content, offset) === '.' ||
+                /[\w$]/.test(content[offset - 1] ?? ''))
+                continue;
+            if (isProtected(offset) || offset < consumedUntil)
+                continue;
+            const start = (match.index ?? 0) + match[0].length;
+            const scanned = scanCallStrings(content, start, funcNames);
+            strings.push(...scanned.strings);
+            consumedUntil = start + scanned.consumed;
+        }
+    }
+    const seen = new Set();
+    return strings
+        .filter((string) => {
+        const key = `${string.start}:${string.end}`;
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        return true;
+    })
+        .sort((left, right) => left.start - right.start);
+}
+export function replaceClassStrings(content, transform, opts = {}) {
+    const isSuppressedAt = offsetSuppressor(content, opts.isSuppressed);
+    const parts = [];
+    let cursor = 0;
+    let count = 0;
+    for (const string of collectClassStrings(content, opts)) {
+        const out = transformStaticClasses(string.value, transform, isSuppressedAt, string.start, string.braceExpressions);
         if (out !== string.value)
             count++;
-        attributeParts.push(content.slice(attributeCursor, string.start), out);
-        attributeCursor = string.end;
+        parts.push(content.slice(cursor, string.start), out);
+        cursor = string.end;
     }
-    attributeParts.push(content.slice(attributeCursor));
-    result = attributeParts.join('');
-    const funcNames = opts.functionNames;
-    if (!funcNames?.length)
-        return { result, count };
-    const funcRe = new RegExp(`\\b(?:${funcNames.map(escapeRegex).join('|')})\\s*\\(`, 'g');
-    const buf = [];
-    let pos = 0;
-    const isCallSuppressed = offsetSuppressor(result, isSuppressed);
-    const isCallProtected = protectedSourceOffsets(result);
-    for (const m of result.matchAll(funcRe)) {
-        const callStart = (m.index ?? 0) + m[0].length;
-        if (callStart < pos || isCallProtected(m.index ?? 0))
-            continue;
-        buf.push(result.slice(pos, callStart));
-        const { processed, consumed, count: c, } = transformCallContent(result, callStart, transform, isCallSuppressed, funcNames);
-        buf.push(processed);
-        pos = callStart + consumed;
-        count += c;
-        funcRe.lastIndex = pos;
-    }
-    buf.push(result.slice(pos));
-    return { result: buf.join(''), count };
+    parts.push(content.slice(cursor));
+    return { result: parts.join(''), count };
 }
 export function extractClassStrings(content, opts = {}) {
-    const attrNames = opts.attributeNames?.length
-        ? opts.attributeNames
-        : DEFAULT_ATTR_NAMES;
-    const results = [];
-    const isProtected = protectedSourceOffsets(content);
-    for (const string of attributeStrings(content, attrNames)) {
-        if (!isProtected(string.attributeStart))
-            results.push({
-                value: string.value,
-                start: string.start,
-                end: string.end,
-            });
-    }
-    const funcNames = opts.functionNames;
-    if (!funcNames?.length)
-        return staticRanges(results);
-    const funcRe = new RegExp(`\\b(?:${funcNames.map(escapeRegex).join('|')})\\s*\\(`, 'g');
-    let consumedUntil = 0;
-    for (const m of content.matchAll(funcRe)) {
-        if (isProtected(m.index ?? 0) || (m.index ?? 0) < consumedUntil)
-            continue;
-        const start = (m.index ?? 0) + m[0].length;
-        const scanned = scanCallStrings(content, start, funcNames);
-        results.push(...scanned.strings);
-        consumedUntil = start + scanned.consumed;
-    }
-    return staticRanges(results);
+    return staticRanges(collectClassStrings(content, opts));
 }
 function staticRanges(strings) {
     const seen = new Set();
-    return strings.flatMap((string) => staticClassRanges(string.value).flatMap((range) => {
+    return strings.flatMap((string) => staticClassRanges(string.value, string.braceExpressions).flatMap((range) => {
         const start = string.start + range.start;
         const end = string.start + range.end;
         const key = `${start}:${end}`;

package/dist/core/config.js

@@ -8,6 +8,7 @@ export const CONFIG_FILENAMES = [
 ];
 const KNOWN_KEYS = [
     'useDefaultTheme',
+    'allowTextSizeLineHeightChanges',
     'customTextTokens',
     'customSpacingTokens',
     'ignorePatterns',
@@ -54,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)) {
@@ -72,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) {
@@ -137,13 +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)

package/dist/core/consistency.js

@@ -1,10 +1,10 @@
 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
@@ -16,14 +16,14 @@ function parseColor(cls, families, knownColors) {
             : 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 bracket = body.indexOf('[');

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,7 +195,7 @@ const CORNER_MAP = {
     br: ['br'],
 };
 function parseRoundedCorner(cls) {
-    if (/^rounded-(?:s|e|ss|se|es|ee)(?:-|$)/.test(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()(?:-(.+))?$/);
@@ -322,7 +331,7 @@ 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);
@@ -347,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;
@@ -370,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));
@@ -382,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>;