eslint-plugin-readable-tailwind
Version:
auto-wraps tailwind classes after a certain print width or class count into multiple lines to improve readability.
151 lines • 6.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.sortClasses = void 0;
exports.getOptions = getOptions;
const better_tailwindcss_async_class_order_sync_js_1 = require("../tailwind/async/class-order.sync.js");
const better_tailwindcss_options_default_options_js_1 = require("../options/default-options.js");
const better_tailwindcss_options_descriptions_js_1 = require("../options/descriptions.js");
const better_tailwindcss_utils_quotes_js_1 = require("../utils/quotes.js");
const better_tailwindcss_utils_rule_js_1 = require("../utils/rule.js");
const better_tailwindcss_utils_utils_js_1 = require("../utils/utils.js");
const defaultOptions = {
attributes: better_tailwindcss_options_default_options_js_1.DEFAULT_ATTRIBUTE_NAMES,
callees: better_tailwindcss_options_default_options_js_1.DEFAULT_CALLEE_NAMES,
order: "improved",
tags: better_tailwindcss_options_default_options_js_1.DEFAULT_TAG_NAMES,
variables: better_tailwindcss_options_default_options_js_1.DEFAULT_VARIABLE_NAMES
};
const DOCUMENTATION_URL = "https://github.com/schoero/eslint-plugin-better-tailwindcss/blob/main/docs/rules/sort-classes.md";
exports.sortClasses = {
name: "sort-classes",
rule: {
create: ctx => (0, better_tailwindcss_utils_rule_js_1.createRuleListener)(ctx, getOptions(ctx), lintLiterals),
meta: {
docs: {
category: "Stylistic Issues",
description: "Enforce a consistent order for tailwind classes.",
recommended: true,
url: DOCUMENTATION_URL
},
fixable: "code",
schema: [
{
additionalProperties: false,
properties: {
...better_tailwindcss_options_descriptions_js_1.CALLEE_SCHEMA,
...better_tailwindcss_options_descriptions_js_1.ATTRIBUTE_SCHEMA,
...better_tailwindcss_options_descriptions_js_1.VARIABLE_SCHEMA,
...better_tailwindcss_options_descriptions_js_1.TAG_SCHEMA,
...better_tailwindcss_options_descriptions_js_1.ENTRYPOINT_SCHEMA,
...better_tailwindcss_options_descriptions_js_1.TAILWIND_CONFIG_SCHEMA,
order: {
default: defaultOptions.order,
description: "The algorithm to use when sorting classes.",
enum: [
"asc",
"desc",
"official",
"improved"
],
type: "string"
}
},
type: "object"
}
],
type: "layout"
}
}
};
function lintLiterals(ctx, literals) {
for (const literal of literals) {
const classChunks = (0, better_tailwindcss_utils_utils_js_1.splitClasses)(literal.content);
const whitespaceChunks = (0, better_tailwindcss_utils_utils_js_1.splitWhitespaces)(literal.content);
const unsortableClasses = ["", ""];
// remove sticky classes
if (literal.closingBraces && whitespaceChunks[0] === "") {
whitespaceChunks.shift();
unsortableClasses[0] = classChunks.shift() ?? "";
}
if (literal.openingBraces && whitespaceChunks[whitespaceChunks.length - 1] === "") {
whitespaceChunks.pop();
unsortableClasses[1] = classChunks.pop() ?? "";
}
const [sortedClassChunks, warnings] = sortClassNames(ctx, classChunks);
const classes = [];
for (let i = 0; i < Math.max(sortedClassChunks.length, whitespaceChunks.length); i++) {
whitespaceChunks[i] && classes.push(whitespaceChunks[i]);
sortedClassChunks[i] && classes.push(sortedClassChunks[i]);
}
const escapedClasses = (0, better_tailwindcss_utils_quotes_js_1.escapeNestedQuotes)([
unsortableClasses[0],
...classes,
unsortableClasses[1]
].join(""), literal.openingQuote ?? literal.closingQuote ?? "`");
const fixedClasses = [
literal.openingQuote ?? "",
literal.type === "TemplateLiteral" && literal.closingBraces ? literal.closingBraces : "",
escapedClasses,
literal.type === "TemplateLiteral" && literal.openingBraces ? literal.openingBraces : "",
literal.closingQuote ?? ""
].join("");
if (literal.raw === fixedClasses) {
continue;
}
ctx.report({
data: {
notSorted: (0, better_tailwindcss_utils_utils_js_1.display)(literal.raw),
sorted: (0, better_tailwindcss_utils_utils_js_1.display)(fixedClasses)
},
fix(fixer) {
return fixer.replaceTextRange(literal.range, fixedClasses);
},
loc: literal.loc,
message: (0, better_tailwindcss_utils_utils_js_1.augmentMessageWithWarnings)("Incorrect class order. Expected\n\n{{ notSorted }}\n\nto be\n\n{{ sorted }}", warnings)
});
}
}
function sortClassNames(ctx, classes) {
const { order, tailwindConfig } = getOptions(ctx);
if (order === "asc") {
return [classes.toSorted((a, b) => a.localeCompare(b))];
}
if (order === "desc") {
return [classes.toSorted((a, b) => b.localeCompare(a))];
}
const [classOrder, warnings] = (0, better_tailwindcss_async_class_order_sync_js_1.getClassOrder)({ classes, configPath: tailwindConfig, cwd: ctx.cwd });
const sortClassesWarnings = warnings.map(warning => ({ ...warning, url: DOCUMENTATION_URL }));
const officiallySortedClasses = classOrder
.toSorted(([, a], [, z]) => {
if (a === z) {
return 0;
}
if (a === null) {
return -1;
}
if (z === null) {
return +1;
}
return +(a - z > 0n) - +(a - z < 0n);
})
.map(([className]) => className);
if (order === "official") {
return [officiallySortedClasses, sortClassesWarnings];
}
const groupedByVariant = new Map();
for (const className of officiallySortedClasses) {
const variant = className.match(/^.*?:/)?.[0] ?? "";
groupedByVariant.set(variant, [...groupedByVariant.get(variant) ?? [], className]);
}
return [Array.from(groupedByVariant.values()).flat(), sortClassesWarnings];
}
function getOptions(ctx) {
const options = ctx.options[0] ?? {};
const common = (0, better_tailwindcss_utils_utils_js_1.getCommonOptions)(ctx);
const order = options.order ?? defaultOptions.order;
return {
...common,
order
};
}
//# sourceMappingURL=sort-classes.js.map