eslint-plugin-readable-tailwind
Version:
auto-wraps tailwind classes after a certain print width or class count into multiple lines to improve readability.
87 lines • 4.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.tailwindNoConflictingClasses = void 0;
exports.getOptions = getOptions;
const better_tailwindcss_async_conflicting_classes_sync_js_1 = require("../tailwind/async/conflicting-classes.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_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,
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/no-conflicting-classes.md";
exports.tailwindNoConflictingClasses = {
name: "no-conflicting-classes",
rule: {
create: ctx => (0, better_tailwindcss_utils_rule_js_1.createRuleListener)(ctx, getOptions(ctx), lintLiterals),
meta: {
docs: {
description: "Disallow any css classes that are not registered in tailwindcss.",
recommended: false,
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
},
type: "object"
}
],
type: "problem"
}
}
};
function lintLiterals(ctx, literals) {
for (const literal of literals) {
const { tailwindConfig } = getOptions(ctx);
const classes = (0, better_tailwindcss_utils_utils_js_1.splitClasses)(literal.content);
const [conflictingClasses, warnings] = (0, better_tailwindcss_async_conflicting_classes_sync_js_1.getConflictingClasses)({ classes, configPath: tailwindConfig, cwd: ctx.cwd });
const conflictingClassesWarnings = warnings.map(warning => ({ ...warning, url: DOCUMENTATION_URL }));
if (Object.keys(conflictingClasses).length === 0) {
continue;
}
for (const conflictingClass in conflictingClasses) {
const conflicts = conflictingClasses[conflictingClass];
const otherConflicts = conflicts.filter(conflict => conflict.tailwindClassName !== conflictingClass);
const conflict = conflicts.find(conflict => conflict.tailwindClassName === conflictingClass);
if (!conflict || otherConflicts.length === 0) {
continue;
}
ctx.report({
data: {
conflicting: (0, better_tailwindcss_utils_utils_js_1.display)(conflict.tailwindClassName),
other: otherConflicts.reduce((otherConflicts, otherConflict) => {
if (otherConflict.tailwindClassName !== conflict.tailwindClassName) {
otherConflicts.push(`${otherConflict.tailwindClassName} -> (${otherConflict.cssPropertyName}: ${otherConflict.cssPropertyValue})`);
}
return otherConflicts;
}, []).join(", "),
property: conflict.cssPropertyName,
value: conflict.cssPropertyValue ?? ""
},
loc: (0, better_tailwindcss_utils_utils_js_1.getExactClassLocation)(literal, conflict.tailwindClassName),
message: (0, better_tailwindcss_utils_utils_js_1.augmentMessageWithWarnings)("Conflicting class detected: {{ conflicting }} -> ({{property}}: {{value}}) applies the same css property as {{ other }}", conflictingClassesWarnings)
});
}
}
}
function getOptions(ctx) {
const options = ctx.options[0] ?? {};
const common = (0, better_tailwindcss_utils_utils_js_1.getCommonOptions)(ctx);
return {
...common
};
}
//# sourceMappingURL=tailwind-no-conflicting-classes.js.map