@adyen/eslint-plugin-bento 2.7.7 → 2.9.0

package/rules/tailwind-v3-to-bento/tailwind-v3-to-bento.js

@@ -0,0 +1,377 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('estree').Node} Node
+ */
+/**
+ * @typedef {import('vue-eslint-parser').AST.VLiteral} VLiteral
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+// Spacing: Tailwind 3 -> Bento spacer tokens
+const SPACING_MAP = {
+    '0': '000',
+    '0.5': '010',
+    '1': '020',
+    '1.5': '030',
+    '2': '040',
+    '2.5': '050',
+    '3': '060',
+    '4': '070',
+    '5': '080',
+    '6': '090',
+    '8': '100',
+    '10': '110',
+    '12': '120',
+    '14': '130',
+    '16': '140',
+};
+
+// Border radius: Tailwind 3 -> Bento border radius tokens
+const BORDER_RADIUS_MAP = {
+    'rounded-sm': 'rounded-xs',
+    'rounded-md': 'rounded-m',
+    'rounded-lg': 'rounded-l',
+    'rounded-xl': 'rounded-xl',
+};
+
+// Border width: Tailwind 3 -> Bento border width tokens
+const BORDER_WIDTH_MAP = {
+    'border-0': 'border-0',
+    'border-2': 'border-m',
+    'border-4': 'border-l',
+};
+
+// Box shadow: Tailwind 3 -> Bento shadow tokens
+const SHADOW_MAP = {
+    'shadow-sm': 'shadow-low',
+    'shadow-md': 'shadow-medium',
+    'shadow-lg': 'shadow-high',
+    'shadow-xl': 'shadow-high',
+    'shadow-2xl': 'shadow-high',
+};
+
+// Breakpoint prefixes: Tailwind 3 -> Bento breakpoint prefixes
+const BREAKPOINT_MAP = {
+    'sm:': 's-min:',
+    'md:': 'm-min:',
+    'lg:': 'l-min:',
+    'xl:': 'xl-min:',
+    '2xl:': 'xxl:',
+};
+
+// Color utilities: Tailwind 3 -> Bento color tokens (best-effort mapping)
+const COLOR_MAP = {
+    'red-500': 'label-critical',
+    'red-600': 'label-critical',
+    'red-700': 'label-critical-hover',
+    'red-100': 'critical-weak',
+    'green-500': 'label-success',
+    'green-600': 'label-success',
+    'green-100': 'success-weak',
+    'blue-500': 'label-highlight',
+    'blue-600': 'label-highlight',
+    'blue-100': 'highlight-weak',
+    'yellow-500': 'label-warning',
+    'yellow-600': 'label-warning',
+    'yellow-100': 'warning-weak',
+    'gray-50': 'secondary',
+    'gray-100': 'secondary',
+    'gray-200': 'tertiary',
+    'gray-300': 'outline-primary',
+    'gray-400': 'outline-secondary',
+    'gray-500': 'label-secondary',
+    'gray-600': 'label-secondary',
+    'gray-700': 'label-primary',
+    'gray-800': 'label-primary',
+    'gray-900': 'label-primary',
+    white: 'primary',
+    black: 'label-primary',
+};
+
+// Color prefix utilities that use the COLOR_MAP
+const COLOR_PREFIXES = ['text-', 'bg-', 'border-'];
+
+// Spacing prefix patterns (padding, margin, gap, space, inset, etc.)
+const SPACING_PREFIXES = [
+    'p',
+    'px',
+    'py',
+    'pt',
+    'pr',
+    'pb',
+    'pl',
+    'ps',
+    'pe',
+    'm',
+    'mx',
+    'my',
+    'mt',
+    'mr',
+    'mb',
+    'ml',
+    'ms',
+    'me',
+    'gap',
+    'gap-x',
+    'gap-y',
+    'space-x',
+    'space-y',
+    'inset',
+    'inset-x',
+    'inset-y',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'start',
+    'end',
+    'w',
+    'min-w',
+    'max-w',
+    'h',
+    'min-h',
+    'max-h',
+    'size',
+    'basis',
+];
+
+// Typography utilities that should be flagged (no auto-fix, use bento-typography)
+const TYPOGRAPHY_PATTERNS = [
+    /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
+    /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/,
+    /^font-(sans|serif|mono)$/,
+    /^leading-(none|tight|snug|normal|relaxed|loose|\d+)$/,
+    /^tracking-(tighter|tight|normal|wide|wider|widest)$/,
+];
+
+// Font size -> suggested bento-typography variant
+const FONT_SIZE_SUGGESTION = {
+    'text-xs': 'caption',
+    'text-sm': 'caption',
+    'text-base': 'body',
+    'text-lg': 'title',
+    'text-xl': 'title" medium',
+    'text-2xl': 'title" large',
+    'text-3xl': 'title" large',
+    'text-4xl': 'title" large',
+    'text-5xl': 'title" large',
+    'text-6xl': 'title" large',
+    'text-7xl': 'title" large',
+    'text-8xl': 'title" large',
+    'text-9xl': 'title" large',
+};
+
+// Font weight -> suggested bento-typography modifier prop
+const FONT_WEIGHT_SUGGESTION = {
+    'font-medium': 'stronger',
+    'font-semibold': 'stronger',
+    'font-bold': 'strongest',
+    'font-extrabold': 'strongest',
+    'font-black': 'strongest',
+};
+
+/**
+ * Build a suggested bento-typography usage from detected typography classes.
+ * @param {string[]} typographyClasses
+ * @returns {string}
+ */
+function buildTypographySuggestion(typographyClasses) {
+    let variant = 'body';
+    const props = [];
+
+    for (const cls of typographyClasses) {
+        if (FONT_SIZE_SUGGESTION[cls]) {
+            const suggestion = FONT_SIZE_SUGGESTION[cls];
+            if (suggestion.includes('" ')) {
+                const [v, prop] = suggestion.split('" ');
+                variant = v;
+                props.push(prop);
+            } else {
+                variant = suggestion;
+            }
+        }
+        if (FONT_WEIGHT_SUGGESTION[cls]) {
+            props.push(FONT_WEIGHT_SUGGESTION[cls]);
+        }
+    }
+
+    const propsStr = props.length > 0 ? ' ' + props.join(' ') : '';
+    return `<bento-typography variant="${variant}"${propsStr}>`;
+}
+
+/**
+ * Try to replace a single CSS class with its Bento equivalent.
+ * @param {string} cssClass
+ * @returns {{ replaced: string, wasReplaced: boolean, isTypography: boolean }}
+ */
+function replaceClass(cssClass) {
+    let workingClass = cssClass;
+    let breakpointPrefix = '';
+    let hasVariantReplacement = false;
+
+    // Extract all variants (e.g., md:hover:p-4 -> variants=['m-min:', 'hover:'], workingClass='p-4')
+    while (workingClass.includes(':')) {
+        const colonIndex = workingClass.indexOf(':') + 1;
+        const variant = workingClass.slice(0, colonIndex);
+        const mapped = BREAKPOINT_MAP[variant];
+        if (mapped) {
+            hasVariantReplacement = true;
+            breakpointPrefix += mapped;
+        } else {
+            breakpointPrefix += variant;
+        }
+        workingClass = workingClass.slice(colonIndex);
+    }
+
+    // Check typography (warn only)
+    for (const pattern of TYPOGRAPHY_PATTERNS) {
+        if (pattern.test(workingClass)) {
+            return { replaced: cssClass, wasReplaced: false, isTypography: true };
+        }
+    }
+
+    // Check border radius: bare "rounded" (without further suffix) maps to "rounded-s"
+    if (workingClass === 'rounded') {
+        return { replaced: breakpointPrefix + 'rounded-s', wasReplaced: true, isTypography: false };
+    }
+    if (BORDER_RADIUS_MAP[workingClass]) {
+        return { replaced: breakpointPrefix + BORDER_RADIUS_MAP[workingClass], wasReplaced: true, isTypography: false };
+    }
+
+    // Check border width: bare "border" (without color suffix) maps to "border-s"
+    if (workingClass === 'border') {
+        return { replaced: breakpointPrefix + 'border-s', wasReplaced: true, isTypography: false };
+    }
+    if (BORDER_WIDTH_MAP[workingClass]) {
+        return { replaced: breakpointPrefix + BORDER_WIDTH_MAP[workingClass], wasReplaced: true, isTypography: false };
+    }
+
+    // Check box shadow: bare "shadow" maps to "shadow-medium"
+    if (workingClass === 'shadow') {
+        return { replaced: breakpointPrefix + 'shadow-medium', wasReplaced: true, isTypography: false };
+    }
+    if (SHADOW_MAP[workingClass]) {
+        return { replaced: breakpointPrefix + SHADOW_MAP[workingClass], wasReplaced: true, isTypography: false };
+    }
+
+    // Check color utilities
+    for (const prefix of COLOR_PREFIXES) {
+        if (workingClass.startsWith(prefix)) {
+            const colorPart = workingClass.slice(prefix.length);
+            if (COLOR_MAP[colorPart]) {
+                const bentoColor = COLOR_MAP[colorPart];
+                return { replaced: breakpointPrefix + prefix + bentoColor, wasReplaced: true, isTypography: false };
+            }
+        }
+    }
+
+    // Check spacing utilities (including negative values like -m-4)
+    for (const spacingPrefix of SPACING_PREFIXES) {
+        const isNegative = workingClass.startsWith('-');
+        const baseClass = isNegative ? workingClass.slice(1) : workingClass;
+        const prefixWithDash = spacingPrefix + '-';
+        if (baseClass.startsWith(prefixWithDash)) {
+            const value = baseClass.slice(prefixWithDash.length);
+            if (SPACING_MAP[value]) {
+                return {
+                    replaced: breakpointPrefix + (isNegative ? '-' : '') + prefixWithDash + SPACING_MAP[value],
+                    wasReplaced: true,
+                    isTypography: false,
+                };
+            }
+        }
+    }
+
+    // If a breakpoint variant was mapped but the base class wasn't, still report the replacement
+    if (hasVariantReplacement && workingClass) {
+        return { replaced: breakpointPrefix + workingClass, wasReplaced: true, isTypography: false };
+    }
+
+    return { replaced: cssClass, wasReplaced: false, isTypography: false };
+}
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Replace Tailwind CSS v3 utility classes with Bento design token equivalents',
+            category: 'Best Practices',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/tailwind-v3-to-bento/README.md',
+            recommended: true,
+        },
+        messages: {
+            updateTailwindClass:
+                'Found Tailwind v3 class "{{ oldClass }}" — replace with Bento equivalent "{{ newClass }}".',
+            removeTailwindTypography:
+                'Found Tailwind v3 typography class "{{ oldClass }}" — use {{ suggestion }} instead.',
+        },
+        fixable: 'code',
+        schema: [],
+    },
+    /** @param {RuleContext} context */
+    create(context) {
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            VLiteral: (/** @type {any} */ node) => {
+                if (node.parent && node.parent.key && node.parent.key.name !== 'class') {
+                    return;
+                }
+
+                if (typeof node.value !== 'string') {
+                    return;
+                }
+
+                const classList = /** @type {VLiteral['value']} */ node.value;
+                let hasReplacements = false;
+                let hasTypography = false;
+
+                const classes = classList.split(/\s+/).filter(Boolean);
+                const results = classes.map(cssClass => {
+                    const result = replaceClass(cssClass);
+                    if (result.wasReplaced) {
+                        hasReplacements = true;
+                    }
+                    if (result.isTypography) {
+                        hasTypography = true;
+                    }
+                    return result;
+                });
+
+                if (hasReplacements) {
+                    const fixed = results.map(r => r.replaced).join(' ');
+                    context.report({
+                        node,
+                        messageId: 'updateTailwindClass',
+                        data: {
+                            oldClass: classList,
+                            newClass: fixed,
+                        },
+                        fix(fixer) {
+                            const quote = context.sourceCode.getText(node)[0];
+                            return fixer.replaceText(node, `${quote}${fixed}${quote}`);
+                        },
+                    });
+                }
+
+                if (hasTypography) {
+                    const typographyClasses = results.filter(r => r.isTypography).map(r => r.replaced);
+                    const suggestion = buildTypographySuggestion(typographyClasses);
+                    context.report({
+                        node,
+                        messageId: 'removeTailwindTypography',
+                        data: {
+                            oldClass: typographyClasses.join(', '),
+                            suggestion,
+                        },
+                    });
+                }
+            },
+        });
+    },
+};