From 084efd2864b6f79b6e389fbecd9c8f434c5952dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= Date: Tue, 27 Jun 2023 11:47:11 +0200 Subject: [PATCH 1/4] feat(no-ununsed-class-name): Added a class whitelist option --- src/rules/no-unused-class-name.ts | 21 +++++++++++++++++-- .../invalid/allowed-class-names/_config.json | 3 +++ ...partially-allowed-class-name01-errors.yaml | 4 ++++ ...artially-allowed-class-name01-input.svelte | 3 +++ .../valid/allowed-class-names/_config.json | 3 +++ .../allowed-class-name01-input.svelte | 3 +++ 6 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/_config.json create mode 100644 tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-errors.yaml create mode 100644 tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-input.svelte create mode 100644 tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/_config.json create mode 100644 tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/allowed-class-name01-input.svelte diff --git a/src/rules/no-unused-class-name.ts b/src/rules/no-unused-class-name.ts index 8d7100fb5..24b5d6a47 100644 --- a/src/rules/no-unused-class-name.ts +++ b/src/rules/no-unused-class-name.ts @@ -22,7 +22,20 @@ export default createRule("no-unused-class-name", { category: "Best Practices", recommended: false, }, - schema: [], + schema: [ + { + type: "object", + properties: { + allowedClassNames: { + type: "array", + items: { + type: "string", + }, + }, + }, + additionalProperties: false, + }, + ], messages: {}, type: "suggestion", }, @@ -30,6 +43,7 @@ export default createRule("no-unused-class-name", { if (!context.parserServices.isSvelte) { return {} } + const allowedClassNames = context.options[0]?.allowedClassNames ?? [] const classesUsedInTemplate: Record = {} return { @@ -52,7 +66,10 @@ export default createRule("no-unused-class-name", { ? findClassesInPostCSSNode(styleContext.sourceAst) : [] for (const className in classesUsedInTemplate) { - if (!classesUsedInStyle.includes(className)) { + if ( + !allowedClassNames.includes(className) && + !classesUsedInStyle.includes(className) + ) { context.report({ loc: classesUsedInTemplate[className], message: `Unused class "${className}".`, diff --git a/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/_config.json b/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/_config.json new file mode 100644 index 000000000..7b760d85f --- /dev/null +++ b/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/_config.json @@ -0,0 +1,3 @@ +{ + "options": [{ "allowedClassNames": ["div-class"] }] +} diff --git a/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-errors.yaml b/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-errors.yaml new file mode 100644 index 000000000..8f64dcba9 --- /dev/null +++ b/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-errors.yaml @@ -0,0 +1,4 @@ +- message: Unused class "span-class". + line: 3 + column: 1 + suggestions: null diff --git a/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-input.svelte b/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-input.svelte new file mode 100644 index 000000000..a486966cf --- /dev/null +++ b/tests/fixtures/rules/no-unused-class-name/invalid/allowed-class-names/partially-allowed-class-name01-input.svelte @@ -0,0 +1,3 @@ +
Hello
+ +World! diff --git a/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/_config.json b/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/_config.json new file mode 100644 index 000000000..a5cfc9f19 --- /dev/null +++ b/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/_config.json @@ -0,0 +1,3 @@ +{ + "options": [{ "allowedClassNames": ["div-class", "span-class"] }] +} diff --git a/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/allowed-class-name01-input.svelte b/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/allowed-class-name01-input.svelte new file mode 100644 index 000000000..a486966cf --- /dev/null +++ b/tests/fixtures/rules/no-unused-class-name/valid/allowed-class-names/allowed-class-name01-input.svelte @@ -0,0 +1,3 @@ +
Hello
+ +World! From d05c5c9866bc4abf5a4e697860dc6290671fc51f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= Date: Tue, 27 Jun 2023 11:52:26 +0200 Subject: [PATCH 2/4] docs(no-ununsed-class-name): Documented the class whitelist option --- docs/rules/no-unused-class-name.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/rules/no-unused-class-name.md b/docs/rules/no-unused-class-name.md index 657d744ff..94e89bf7d 100644 --- a/docs/rules/no-unused-class-name.md +++ b/docs/rules/no-unused-class-name.md @@ -52,7 +52,18 @@ This rule is aimed at reducing unused classes in the HTML template. While `svelt ## :wrench: Options -Nothing. +```json +{ + "svelte/no-unused-class-name": [ + "error", + { + "allowedClassNames": ["class-name-one", "class-name-two"] + } + ] +} +``` + +- `allowedClassNames` ... A list of class names that shouldn't be reported by this rule. Default `[]`. ## :rocket: Version From 1873af7e549aaeab462fdd9e65837511bca99289 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= Date: Tue, 27 Jun 2023 11:55:33 +0200 Subject: [PATCH 3/4] chore(no-ununsed-class-name): Added a changeset --- .changeset/beige-jobs-travel.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/beige-jobs-travel.md diff --git a/.changeset/beige-jobs-travel.md b/.changeset/beige-jobs-travel.md new file mode 100644 index 000000000..30c96b5c8 --- /dev/null +++ b/.changeset/beige-jobs-travel.md @@ -0,0 +1,5 @@ +--- +"eslint-plugin-svelte": minor +--- + +feat(no-unused-class-name): added a whitelist option From 4d10646f63e0b385e098f993a05ce0e51bbc62e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= Date: Tue, 27 Jun 2023 16:42:54 +0200 Subject: [PATCH 4/4] chore(no-ununsed-class-name): Renamed the changeset --- .changeset/beige-jobs-travel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/beige-jobs-travel.md b/.changeset/beige-jobs-travel.md index 30c96b5c8..b5524469f 100644 --- a/.changeset/beige-jobs-travel.md +++ b/.changeset/beige-jobs-travel.md @@ -2,4 +2,4 @@ "eslint-plugin-svelte": minor --- -feat(no-unused-class-name): added a whitelist option +feat(no-unused-class-name): added an option to allow some specific class names