eslint-plugin-vue-scoped-css
Version:
ESLint plugin for Scoped CSS in Vue.js
82 lines (81 loc) • 3.01 kB
JavaScript
;
const context_1 = require("../styles/context");
const compat_1 = require("../utils/compat");
module.exports = {
meta: {
deprecated: true,
docs: {
description: "enforce the `<style>` tags to has the `scoped` attribute",
categories: ["vue2-recommended", "vue3-recommended"],
default: "warn",
url: "https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-scoped.html",
suggestion: true,
replacedBy: ["enforce-style-type"],
},
fixable: null,
messages: {
missing: "Missing `scoped` attribute.",
forbidden: "`scoped` attribute are forbidden.",
add: "Add `scoped` attribute.",
remove: "Remove `scoped` attribute.",
},
schema: [{ enum: ["always", "never"] }],
type: "suggestion",
hasSuggestions: true,
},
create(context) {
var _a, _b;
const always = context.options[0] !== "never";
const styles = (0, context_1.getStyleContexts)(context).filter(context_1.isValidStyleContext);
if (!styles.length) {
return {};
}
const reporter = (0, context_1.getCommentDirectivesReporter)(context);
const sourceCode = (0, compat_1.getSourceCode)(context);
const tokenStore = (_b = (_a = sourceCode.parserServices).getTemplateBodyTokenStore) === null || _b === void 0 ? void 0 : _b.call(_a);
function reportAlways(node) {
reporter.report({
node: node.startTag,
messageId: "missing",
data: {},
suggest: [
{
messageId: "add",
fix(fixer) {
const close = tokenStore.getLastToken(node.startTag);
return close && fixer.insertTextBefore(close, " scoped");
},
},
],
});
}
function reportNever(node) {
const scopedAttr = node.startTag.attributes.find((attr) => attr.key.name === "scoped");
reporter.report({
node: scopedAttr,
messageId: "forbidden",
data: {},
suggest: [
{
messageId: "remove",
fix(fixer) {
return fixer.remove(scopedAttr);
},
},
],
});
}
return {
"Program:exit"() {
for (const style of styles) {
if (always && !style.scoped) {
reportAlways(style.styleElement);
}
else if (!always && style.scoped) {
reportNever(style.styleElement);
}
}
},
};
},
};