diff --git a/.changeset/forty-signs-smoke.md b/.changeset/forty-signs-smoke.md new file mode 100644 index 000000000..f72f3d6a0 --- /dev/null +++ b/.changeset/forty-signs-smoke.md @@ -0,0 +1,5 @@ +--- +'eslint-plugin-svelte': minor +--- + +feat(no-unused-class-name): support regex for `allowedClassNames` option diff --git a/docs/rules/no-unused-class-name.md b/docs/rules/no-unused-class-name.md index ecfef4888..249656cd3 100644 --- a/docs/rules/no-unused-class-name.md +++ b/docs/rules/no-unused-class-name.md @@ -53,7 +53,7 @@ This rule is aimed at reducing unused classes in the HTML template. While `svelt "svelte/no-unused-class-name": [ "error", { - "allowedClassNames": ["class-name-one", "class-name-two"] + "allowedClassNames": ["class-name-one", "class-name-two", "/^regex-.*$/"] // You can also use regex to match class names } ] } diff --git a/packages/eslint-plugin-svelte/src/rules/no-unused-class-name.ts b/packages/eslint-plugin-svelte/src/rules/no-unused-class-name.ts index ad03b5c95..090690577 100644 --- a/packages/eslint-plugin-svelte/src/rules/no-unused-class-name.ts +++ b/packages/eslint-plugin-svelte/src/rules/no-unused-class-name.ts @@ -4,6 +4,7 @@ import type { AnyNode } from 'postcss'; import type { Node as SelectorNode } from 'postcss-selector-parser'; import { findClassesInAttribute } from '../utils/ast-utils.js'; import type { SourceCode } from '../types.js'; +import { toRegExp } from '../utils/regexp.js'; export default createRule('no-unused-class-name', { meta: { @@ -57,7 +58,12 @@ export default createRule('no-unused-class-name', { ? findClassesInPostCSSNode(styleContext.sourceAst, sourceCode.parserServices) : []; for (const className in classesUsedInTemplate) { - if (!allowedClassNames.includes(className) && !classesUsedInStyle.includes(className)) { + if ( + !allowedClassNames.some((allowedClassName: string) => + toRegExp(allowedClassName).test(className) + ) && + !classesUsedInStyle.includes(className) + ) { context.report({ loc: classesUsedInTemplate[className], message: `Unused class "${className}".` diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/_config.json b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/_config.json index 6f1145f9d..7f72e0dc3 100644 --- a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/_config.json +++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/_config.json @@ -1,3 +1,3 @@ { - "options": [{ "allowedClassNames": ["div-class"] }] + "options": [{ "allowedClassNames": ["div-class", "/^p-\\d{1,2}$/"] }] } diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-errors.yaml b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-errors.yaml index 8f64dcba9..127f72bd4 100644 --- a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-errors.yaml +++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-errors.yaml @@ -2,3 +2,7 @@ line: 3 column: 1 suggestions: null +- message: Unused class "p-100". + line: 5 + column: 1 + suggestions: null diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-input.svelte b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-input.svelte index a486966cf..21e917faf 100644 --- a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-input.svelte +++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-input.svelte @@ -1,3 +1,5 @@
Hello
World! + +Regex! diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/_config.json b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/_config.json index 12150540d..365e479bd 100644 --- a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/_config.json +++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/_config.json @@ -1,3 +1,3 @@ { - "options": [{ "allowedClassNames": ["div-class", "span-class"] }] + "options": [{ "allowedClassNames": ["div-class", "span-class", "/^p-\\d{1,2}$/"] }] } diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/allowed-class-name01-input.svelte b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/allowed-class-name01-input.svelte index a486966cf..009527e66 100644 --- a/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/allowed-class-name01-input.svelte +++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/allowed-class-name01-input.svelte @@ -1,3 +1,5 @@
Hello
World! + +Regex!