eslint-plugin-better-tailwindcss
Version:
auto-wraps tailwind classes after a certain print width or class count into multiple lines to improve readability.
102 lines • 4.28 kB
JavaScript
import { createGetDissectedClasses, getDissectedClasses } from "../tailwindcss/dissect-classes.js";
import { buildClass } from "../utils/class.js";
import { async } from "../utils/context.js";
import { lintClasses } from "../utils/lint.js";
import { createRule } from "../utils/rule.js";
import { replacePlaceholders, splitClasses } from "../utils/utils.js";
export const noDeprecatedClasses = createRule({
autofix: true,
category: "stylistic",
description: "Disallow the use of deprecated Tailwind CSS classes.",
docs: "https://github.com/schoero/eslint-plugin-better-tailwindcss/blob/main/docs/rules/no-deprecated-classes.md",
name: "no-deprecated-classes",
recommended: true,
messages: {
irreplaceable: "Class \"{{ className }}\" is deprecated. Check the tailwindcss documentation for more information: https://tailwindcss.com/docs/upgrade-guide#removed-deprecated-utilities",
replaceable: "Deprecated class detected. Replace \"{{ className }}\" with \"{{fix}}\"."
},
initialize: ctx => {
createGetDissectedClasses(ctx);
},
lintLiterals: (ctx, literals) => lintLiterals(ctx, literals)
});
const deprecations = [
[
{ major: 4, minor: 0 }, [
[/^shadow$/, "shadow-sm"],
[/^inset-shadow$/, "inset-shadow-sm"],
[/^drop-shadow$/, "drop-shadow-sm"],
[/^blur$/, "blur-sm"],
[/^backdrop-blur$/, "backdrop-blur-sm"],
[/^rounded$/, "rounded-sm"],
[/^bg-opacity-(.*)$/],
[/^text-opacity-(.*)$/],
[/^border-opacity-(.*)$/],
[/^divide-opacity-(.*)$/],
[/^ring-opacity-(.*)$/],
[/^placeholder-opacity-(.*)$/],
[/^flex-shrink$/, "shrink"],
[/^flex-shrink-(.*)$/, "shrink-$1"],
[/^flex-grow$/, "grow"],
[/^flex-grow-(.*)$/, "grow-$1"],
[/^overflow-ellipsis$/, "text-ellipsis"],
[/^decoration-slice$/, "box-decoration-slice"],
[/^decoration-clone$/, "box-decoration-clone"]
]
], [
{ major: 4, minor: 1 }, [
[/^bg-left-top$/, "bg-top-left"],
[/^bg-left-bottom$/, "bg-bottom-left"],
[/^bg-right-top$/, "bg-top-right"],
[/^bg-right-bottom$/, "bg-bottom-right"],
[/^object-left-top$/, "object-top-left"],
[/^object-left-bottom$/, "object-bottom-left"],
[/^object-right-top$/, "object-top-right"],
[/^object-right-bottom$/, "object-bottom-right"]
]
]
];
function lintLiterals(ctx, literals) {
const { major, minor } = ctx.version;
for (const literal of literals) {
const classes = splitClasses(literal.content);
const { dissectedClasses, warnings } = getDissectedClasses(async(ctx), classes);
lintClasses(ctx, literal, className => {
const dissectedClass = dissectedClasses[className];
if (!dissectedClass) {
return;
}
for (const [version, deprecation] of deprecations) {
if (major < version.major || major === version.major && minor < version.minor) {
continue;
}
for (const [pattern, replacement] of deprecation) {
const match = dissectedClass.base.match(pattern);
if (!match) {
continue;
}
if (!replacement) {
return {
data: {
className
},
id: "irreplaceable",
warnings
};
}
const fix = buildClass(ctx, { ...dissectedClass, base: replacePlaceholders(replacement, match) });
return {
data: {
className,
fix
},
fix,
id: "replaceable",
warnings
};
}
}
});
}
}
//# sourceMappingURL=no-deprecated-classes.js.map