enforce-negative-arbitrary-values
Enforce moving the negative sign inside arbitrary value brackets: -top-[5px] → top-[-5px]
Qué hace esta regla
Detecta utilities escritas con un prefijo negativo afuera de un bracket de valor arbitrario — -top-[5px], -translate-x-[10px], -mt-[8px] — y mueve el signo negativo adentro del bracket: top-[-5px], translate-x-[-10px], mt-[-8px]. El - exterior es redundante una vez que tienes un valor arbitrario, y meterlo adentro hace explícita la intención y matchea cómo @tailwindcss/node canonicaliza la misma shape. El auto-fix corrige el primer hit, las sugerencias cubren el resto en el mismo string. Los variants (hover:-mt-[8px]) y el ! (important, prefix o suffix) se preservan.
La regla se dispara solo cuando se cumplen dos condiciones: la utility empieza con - (después de pelar el !) Y hay un bracket de valor arbitrario cuyo contenido interno no empieza con -. Así que top-[-5px] y -translate-x-1 (sin brackets) son correctos tal como están.
Transform de strings puro — sin design system, sin worker, sin entry point. Es la única regla del bucket Modernization que no carga el DS. Va a correr igual tengas o no configurado settings.tailwindcss.entryPoint.
Opciones
Esta regla no tiene opciones. Aplica la misma transformación en todos lados.
Ejemplos
✗ Incorrecto
// Negativo afuera del bracket — muévelo adentro
<div className="-top-[5px] -left-[10px]" />
// Transform con valor arbitrario
<div className="-translate-x-[10px]" />
// Prefijo de variant preservado
<div className="hover:-mt-[8px]" />
// Modificador important preservado
<div className="!-top-[5px]" />✓ Correcto
// El negativo está adentro del bracket
<div className="top-[-5px] left-[-10px]" />
<div className="translate-x-[-10px]" />
<div className="hover:mt-[-8px]" />
<div className="!top-[-5px]" />
// Negativo sin valor arbitrario — está bien
<div className="-translate-x-1 -mt-4" />Interacciones con otras reglas
enforce-canonical: complementaria.enforce-canonicaltambién va a normalizar la forma canónica de arbitrarios negativos vía el worker; esta regla provee el mismo fix sin pagar el costo de cargar el DS. Si tienes ambas activas los autofixes convergen al mismo output.no-unnecessary-arbitrary-value: ortogonal. Esa regla se dispara solo cuando el valor arbitrario tiene un equivalente nombrado; esta se dispara haya o no.prefer-theme-tokens: ortogonal. Las referencias a theme- tokens (bg-(--name)) no llevan un negativo exterior, así que las dos nunca tocan la misma clase.
Cuándo desactivarla
- Prefieres la forma con negativo exterior por legibilidad en el call site (raro — la mayoría de equipos encuentran la forma con negativo interior más clara una vez que la ven).
- Estás auto-generando strings de clases que siempre emiten la forma con negativo exterior y no quieres diagnósticos de lint en esa capa generada. Prefiere desactivar la regla en el archivo generado antes que a nivel proyecto.