Fix false positives for extend style lang attributes in rules that use compilation (#138)

Author: ota-meshi

docs/rules/no-unknown-style-directive-property.md

@@ -56,7 +56,7 @@ Note that this rule only checks the `style:property` directive. If you want to c
 }
 ```
 
-- `ignoreProperties` ... You can specify property names or patterns that you want to ignore from checking.
+- `ignoreProperties` ... You can specify property names or patterns that you want to ignore from checking. When specifying a pattern, specify a string like a regex literal. e.g. `"/pattern/i"`
 - `ignorePrefixed` ... If `true`, ignores properties with vendor prefix from checking. Default is `true`.
 
 ## :books: Further reading

src/rules/no-unused-svelte-ignore.ts

@@ -1,12 +1,19 @@
 import type { AST } from "svelte-eslint-parser"
 import { isOpeningParenToken } from "eslint-utils"
 import type { Warning } from "../shared/svelte-compile-warns"
-import { getSvelteCompileWarnings } from "../shared/svelte-compile-warns"
+import {
+  getSvelteCompileWarnings,
+  extractStyleElementsWithLangOtherThanCSS,
+} from "../shared/svelte-compile-warns"
 import { createRule } from "../utils"
 import type { ASTNodeWithParent } from "../types"
 
 const SVELTE_IGNORE_PATTERN = /^\s*svelte-ignore/m
-
+const CSS_WARN_CODES = new Set([
+  "css-unused-selector",
+  "css-invalid-global",
+  "css-invalid-global-selector",
+])
 type IgnoreItem = {
   range: [number, number]
   code: string
@@ -113,6 +120,7 @@ export default createRule("no-unused-svelte-ignore", {
     if (!ignoreComments.length) {
       return {}
     }
+
     const warnings = getSvelteCompileWarnings(context, {
       warnings: "onlyWarnings",
       removeComments: new Set(ignoreComments.map((i) => i.token)),
@@ -128,15 +136,24 @@ export default createRule("no-unused-svelte-ignore", {
       if (!node) {
         continue
       }
-      l: for (const comment of extractLeadingComments(node).reverse()) {
-        for (const ignoreItem of ignoreComments) {
-          if (
-            ignoreItem.token === comment &&
-            ignoreItem.code === warning.code
-          ) {
-            used.add(ignoreItem)
-            break l
-          }
+      for (const comment of extractLeadingComments(node).reverse()) {
+        const ignoreItem = ignoreComments.find(
+          (item) => item.token === comment && item.code === warning.code,
+        )
+        if (ignoreItem) {
+          used.add(ignoreItem)
+        }
+      }
+    }
+
+    // Styles with non-CSS lang attributes are ignored from compilation and cannot determine css errors.
+    for (const node of extractStyleElementsWithLangOtherThanCSS(context)) {
+      for (const comment of extractLeadingComments(node).reverse()) {
+        const ignoreItem = ignoreComments.find(
+          (item) => item.token === comment && CSS_WARN_CODES.has(item.code),
+        )
+        if (ignoreItem) {
+          used.add(ignoreItem)
         }
       }
     }
@@ -160,7 +177,10 @@ export default createRule("no-unused-svelte-ignore", {
       }
       let targetNode = sourceCode.getNodeByRangeIndex(index)
       while (targetNode) {
-        if (targetNode.type === "SvelteElement") {
+        if (
+          targetNode.type === "SvelteElement" ||
+          targetNode.type === "SvelteStyleElement"
+        ) {
           return targetNode
         }
         if (targetNode.parent) {

src/shared/svelte-compile-warns.ts

@@ -35,22 +35,8 @@ export function getSvelteCompileWarnings(
   option: GetSvelteWarningsOption,
 ): Warning[] | null {
   const sourceCode = context.getSourceCode()
-  const text = !option.removeComments
-    ? sourceCode.text
-    : (() => {
-        let code = ""
-        let start = 0
-        for (const token of [...option.removeComments].sort(
-          (a, b) => a.range[0] - b.range[0],
-        )) {
-          code +=
-            sourceCode.text.slice(start, token.range[0]) +
-            sourceCode.text.slice(...token.range).replace(/[^\t\n\r ]/g, " ")
-          start = token.range[1]
-        }
-        code += sourceCode.text.slice(start)
-        return code
-      })()
+
+  const text = buildStrippedText(context, option)
 
   if (!context.parserServices.esTreeNodeToTSNodeMap) {
     return getWarningsFromCode(text, option)
@@ -293,6 +279,67 @@ export function getSvelteCompileWarnings(
   return warnings
 }
 
+/**
+ * Extracts the style with the lang attribute other than CSS.
+ */
+export function* extractStyleElementsWithLangOtherThanCSS(
+  context: RuleContext,
+): Iterable<AST.SvelteStyleElement> {
+  const sourceCode = context.getSourceCode()
+  const root = sourceCode.ast
+  for (const node of root.body) {
+    if (node.type === "SvelteStyleElement") {
+      const langAttr = node.startTag.attributes.find(
+        (attr): attr is AST.SvelteAttribute =>
+          attr.type === "SvelteAttribute" && attr.key.name === "lang",
+      )
+      if (
+        langAttr &&
+        langAttr.value.length === 1 &&
+        langAttr.value[0].type === "SvelteLiteral" &&
+        langAttr.value[0].value.toLowerCase() !== "css"
+      ) {
+        yield node
+      }
+    }
+  }
+}
+
+/**
+ * Build the text stripped of tokens that are not needed for compilation.
+ */
+function buildStrippedText(
+  context: RuleContext,
+  option: GetSvelteWarningsOption,
+) {
+  const sourceCode = context.getSourceCode()
+  const baseText = sourceCode.text
+
+  const removeTokens: (AST.Token | AST.Comment | AST.SvelteText)[] =
+    option.removeComments ? [...option.removeComments] : []
+
+  // Strips the style with the lang attribute other than CSS.
+  for (const node of extractStyleElementsWithLangOtherThanCSS(context)) {
+    removeTokens.push(...node.children)
+  }
+  if (!removeTokens.length) {
+    return baseText
+  }
+
+  removeTokens.sort((a, b) => a.range[0] - b.range[0])
+
+  let code = ""
+  let start = 0
+  for (const token of removeTokens) {
+    code +=
+      baseText.slice(start, token.range[0]) +
+      baseText.slice(...token.range).replace(/[^\t\n\r ]/g, " ")
+    start = token.range[1]
+  }
+  code += baseText.slice(start)
+  return code
+}
+
 type TS = typeof typescript
 
 /**

tests/fixtures/rules/no-unused-svelte-ignore/valid/style-lang01-input.svelte

@@ -0,0 +1,9 @@
+<div class="foo" />
+
+<!-- svelte-ignore css-unused-selector -->
+<style>
+  .bar {
+    height: 10px;
+    width: 10px;
+  }
+</style>

tests/fixtures/rules/no-unused-svelte-ignore/valid/style-lang02-input.svelte

@@ -0,0 +1,15 @@
+<div class="foo">
+  <div class="bar" />
+</div>
+
+<!-- svelte-ignore css-unused-selector -->
+<style lang="postcss">
+  .foo {
+    height: 20px;
+    width: 20px;
+    & .foo {
+      height: 10px;
+      width: 10px;
+    }
+  }
+</style>

tests/fixtures/rules/valid-compile/valid/style-lang01-input.svelte

@@ -0,0 +1,8 @@
+<div class="foo" />
+
+<style>
+  .foo {
+    height: 10px;
+    width: 10px;
+  }
+</style>

tests/fixtures/rules/valid-compile/valid/style-lang02-input.svelte

@@ -0,0 +1,14 @@
+<div class="foo">
+  <div class="bar" />
+</div>
+
+<style lang="postcss">
+  .foo {
+    height: 20px;
+    width: 20px;
+    & .bar {
+      height: 10px;
+      width: 10px;
+    }
+  }
+</style>