Fix parsing error in prefer-style-directive (#96)

Author: ota-meshi

docs-svelte-kit/.eslintrc.cjs

@@ -9,6 +9,8 @@ module.exports = {
     "@ota-meshi/svelte/button-has-type": "error",
     "@ota-meshi/svelte/no-useless-mustaches": "error",
     "@ota-meshi/svelte/prefer-class-directive": "error",
+    // TODO Still get an error with prettier-plugin-svelte. Probably fixed in v2.6.
+    // "@ota-meshi/svelte/prefer-style-directive": "error",
     "@ota-meshi/svelte/spaced-html-comment": "error",
   },
 }

package.json

@@ -73,7 +73,7 @@
     "@babel/types": "^7.16.0",
     "@fontsource/fira-mono": "^4.5.0",
     "@ota-meshi/eslint-plugin": "^0.10.0",
-    "@ota-meshi/eslint-plugin-svelte": "^0.21.0",
+    "@ota-meshi/eslint-plugin-svelte": "^0.22.0",
     "@sindresorhus/slugify": "^2.1.0",
     "@sveltejs/adapter-static": "^1.0.0-next.21",
     "@sveltejs/kit": "^1.0.0-next.201",
@@ -113,7 +113,7 @@
     "pako": "^2.0.3",
     "pirates": "^4.0.1",
     "prettier": "^2.2.1",
-    "prettier-plugin-svelte": "^2.2.0",
+    "prettier-plugin-svelte": "^2.5.1",
     "prism-svelte": "^0.4.7",
     "prismjs": "^1.25.0",
     "semver": "^7.3.5",

src/rules/prefer-style-directive.ts

@@ -2,6 +2,15 @@ import type { AST } from "svelte-eslint-parser"
 import { parse as parseCss } from "postcss"
 import { createRule } from "../utils"
 
+/** Parse for CSS */
+function safeParseCss(cssCode: string) {
+  try {
+    return parseCss(cssCode)
+  } catch {
+    return null
+  }
+}
+
 export default createRule("prefer-style-directive", {
   meta: {
     docs: {
@@ -39,7 +48,10 @@ export default createRule("prefer-style-directive", {
             return sourceCode.getText(value)
           })
           .join("")
-        const root = parseCss(cssCode)
+        const root = safeParseCss(cssCode)
+        if (!root) {
+          return
+        }
         root.walkDecls((decl) => {
           if (
             node.parent.attributes.some(

tests/fixtures/rules/prefer-style-directive/valid/invalid-style01-input.svelte

@@ -0,0 +1,7 @@
+<script>
+  let style = "color: red"
+</script>
+
+<div {style}>...</div>
+<!-- prettier-ignore -->
+<div style="{style}">...</div>