Added style AST to parser services

.changeset/short-ducks-attend.md

@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": minor
+---
+
+added PostCSS AST of styles to parser services

package.json

@@ -55,7 +55,9 @@
   "dependencies": {
     "eslint-scope": "^7.0.0",
     "eslint-visitor-keys": "^3.0.0",
-    "espree": "^9.0.0"
+    "espree": "^9.0.0",
+    "postcss": "^8.4.23",
+    "postcss-scss": "^4.0.6"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.8",

src/index.ts

@@ -1,15 +1,20 @@
-import { parseForESLint } from "./parser";
 import * as AST from "./ast";
 import { traverseNodes } from "./traverse";
 import { KEYS } from "./visitor-keys";
 import { ParseError } from "./errors";
+export {
+  parseForESLint,
+  StyleContext,
+  StyleContextNoStyleElement,
+  StyleContextParseError,
+  StyleContextSuccess,
+  StyleContextUnknownLang,
+} from "./parser";
 export * as meta from "./meta";
 export { name } from "./meta";
 
 export { AST, ParseError };
 
-// parser
-export { parseForESLint };
 // Keys
 // eslint-disable-next-line @typescript-eslint/naming-convention -- ignore
 export const VisitorKeys = KEYS;

src/parser/index.ts

@@ -4,6 +4,7 @@ import type {
   Comment,
   SvelteProgram,
   SvelteScriptElement,
+  SvelteStyleElement,
   Token,
 } from "../ast";
 import type { Program } from "estree";
@@ -21,6 +22,24 @@ import {
 import { ParseError } from "../errors";
 import { parseTypeScript } from "./typescript";
 import { addReference } from "../scope";
+import {
+  parseStyleContext,
+  type StyleContext,
+  type StyleContextNoStyleElement,
+  type StyleContextParseError,
+  type StyleContextSuccess,
+  type StyleContextUnknownLang,
+  styleNodeLoc,
+  styleNodeRange,
+} from "./style-context";
+
+export {
+  StyleContext,
+  StyleContextNoStyleElement,
+  StyleContextParseError,
+  StyleContextSuccess,
+  StyleContextUnknownLang,
+};
 
 export interface ESLintProgram extends Program {
   comments: Comment[];
@@ -50,6 +69,7 @@ export function parseForESLint(
   services: Record<string, any> & {
     isSvelte: true;
     getSvelteHtmlAst: () => SvAST.Fragment;
+    getStyleContext: () => StyleContext;
   };
   visitorKeys: { [type: string]: string[] };
   scopeManager: ScopeManager;
@@ -166,12 +186,22 @@ export function parseForESLint(
     );
   }
 
+  const styleElement = ast.body.find(
+    (b): b is SvelteStyleElement => b.type === "SvelteStyleElement"
+  );
+  const styleContext = parseStyleContext(styleElement, ctx);
+
   resultScript.ast = ast as any;
   resultScript.services = Object.assign(resultScript.services || {}, {
     isSvelte: true,
     getSvelteHtmlAst() {
       return resultTemplate.svelteAst.html;
     },
+    getStyleContext() {
+      return styleContext;
+    },
+    styleNodeLoc,
+    styleNodeRange,
   });
   resultScript.visitorKeys = Object.assign({}, KEYS, resultScript.visitorKeys);
 

src/parser/style-context.ts

@@ -0,0 +1,145 @@
+import type { Node, Parser, Root } from "postcss";
+import postcss from "postcss";
+import { parse as SCSSparse } from "postcss-scss";
+
+import type { Context } from "../context";
+import type { SourceLocation, SvelteStyleElement } from "../ast";
+
+export type StyleContext =
+  | StyleContextNoStyleElement
+  | StyleContextParseError
+  | StyleContextSuccess
+  | StyleContextUnknownLang;
+
+export interface StyleContextNoStyleElement {
+  status: "no-style-element";
+}
+
+export interface StyleContextParseError {
+  status: "parse-error";
+  sourceLang: string;
+  error: any;
+}
+
+export interface StyleContextSuccess {
+  status: "success";
+  sourceLang: string;
+  sourceAst: Root;
+}
+
+export interface StyleContextUnknownLang {
+  status: "unknown-lang";
+  sourceLang: string;
+}
+
+/**
+ * Extracts style source from a SvelteStyleElement and parses it into a PostCSS AST.
+ */
+export function parseStyleContext(
+  styleElement: SvelteStyleElement | undefined,
+  ctx: Context
+): StyleContext {
+  if (!styleElement || !styleElement.endTag) {
+    return { status: "no-style-element" };
+  }
+  let sourceLang = "css";
+  for (const attribute of styleElement.startTag.attributes) {
+    if (
+      attribute.type === "SvelteAttribute" &&
+      attribute.key.name === "lang" &&
+      attribute.value.length > 0 &&
+      attribute.value[0].type === "SvelteLiteral"
+    ) {
+      sourceLang = attribute.value[0].value;
+    }
+  }
+  let parseFn: Parser<Root>, sourceAst: Root;
+  switch (sourceLang) {
+    case "css":
+      parseFn = postcss.parse;
+      break;
+    case "scss":
+      parseFn = SCSSparse;
+      break;
+    default:
+      return { status: "unknown-lang", sourceLang };
+  }
+  const styleCode = ctx.code.slice(
+    styleElement.startTag.range[1],
+    styleElement.endTag.range[0]
+  );
+  try {
+    sourceAst = parseFn(styleCode, {
+      from: ctx.parserOptions.filePath,
+    });
+  } catch (error) {
+    return { status: "parse-error", sourceLang, error };
+  }
+  fixPostCSSNodeLocation(sourceAst, styleElement);
+  sourceAst.walk((node) => fixPostCSSNodeLocation(node, styleElement));
+  return { status: "success", sourceLang, sourceAst };
+}
+
+/**
+ * Extracts a node location (like that of any ESLint node) from a parsed svelte style node.
+ */
+export function styleNodeLoc(node: Node): Partial<SourceLocation> {
+  if (node.source === undefined) {
+    return {};
+  }
+  return {
+    start:
+      node.source.start !== undefined
+        ? {
+            line: node.source.start.line,
+            column: node.source.start.column - 1,
+          }
+        : undefined,
+    end:
+      node.source.end !== undefined
+        ? {
+            line: node.source.end.line,
+            column: node.source.end.column,
+          }
+        : undefined,
+  };
+}
+
+/**
+ * Extracts a node range (like that of any ESLint node) from a parsed svelte style node.
+ */
+export function styleNodeRange(
+  node: Node
+): [number | undefined, number | undefined] {
+  if (node.source === undefined) {
+    return [undefined, undefined];
+  }
+  return [
+    node.source.start !== undefined ? node.source.start.offset : undefined,
+    node.source.end !== undefined ? node.source.end.offset + 1 : undefined,
+  ];
+}
+
+/**
+ * Fixes PostCSS AST locations to be relative to the whole file instead of relative to the <style> element.
+ */
+function fixPostCSSNodeLocation(node: Node, styleElement: SvelteStyleElement) {
+  if (node.source?.start?.offset !== undefined) {
+    node.source.start.offset += styleElement.startTag.range[1];
+  }
+  if (node.source?.start?.line !== undefined) {
+    node.source.start.line += styleElement.loc.start.line - 1;
+  }
+  if (node.source?.end?.offset !== undefined) {
+    node.source.end.offset += styleElement.startTag.range[1];
+  }
+  if (node.source?.end?.line !== undefined) {
+    node.source.end.line += styleElement.loc.start.line - 1;
+  }
+  if (node.source?.start?.line === styleElement.loc.start.line) {
+    node.source.start.column += styleElement.startTag.loc.end.column;
+  }
+  if (node.source?.end?.line === styleElement.loc.start.line) {
+    node.source.end.column += styleElement.startTag.loc.end.column;
+  }
+}

tests/fixtures/parser/style-context/empty-style-element-input.svelte

@@ -0,0 +1,7 @@
+<script>
+  let a = 10
+</script>
+
+<b>{a}</b>
+
+<style></style>

tests/fixtures/parser/style-context/empty-style-element-output.json

@@ -0,0 +1,27 @@
+{
+  "status": "success",
+  "sourceLang": "css",
+  "sourceAst": {
+    "raws": {
+      "after": ""
+    },
+    "type": "root",
+    "nodes": [],
+    "source": {
+      "inputId": 0,
+      "start": {
+        "offset": 52,
+        "line": 7,
+        "column": 8
+      }
+    },
+    "lastEach": 1,
+    "indexes": {},
+    "inputs": [
+      {
+        "hasBOM": false,
+        "css": ""
+      }
+    ]
+  }
+}

tests/fixtures/parser/style-context/no-style-element-input.svelte

@@ -0,0 +1,5 @@
+<script>
+  let a = 10
+</script>
+
+<b>{a}</b>

tests/fixtures/parser/style-context/no-style-element-output.json

@@ -0,0 +1,3 @@
+{
+  "status": "no-style-element"
+}

tests/fixtures/parser/style-context/one-line-css-input.svelte

@@ -0,0 +1,7 @@
+<script>
+  let a = 10
+</script>
+
+<span class="myClass">Hello!</span>
+
+<style> .myClass { color: red; } </style>

tests/fixtures/parser/style-context/one-line-css-output.json

@@ -0,0 +1,78 @@
+{
+  "status": "success",
+  "sourceLang": "css",
+  "sourceAst": {
+    "raws": {
+      "semicolon": false,
+      "after": " "
+    },
+    "type": "root",
+    "nodes": [
+      {
+        "raws": {
+          "before": " ",
+          "between": " ",
+          "semicolon": true,
+          "after": " "
+        },
+        "type": "rule",
+        "nodes": [
+          {
+            "raws": {
+              "before": " ",
+              "between": ": "
+            },
+            "type": "decl",
+            "source": {
+              "inputId": 0,
+              "start": {
+                "offset": 89,
+                "line": 7,
+                "column": 20
+              },
+              "end": {
+                "offset": 99,
+                "line": 7,
+                "column": 30
+              }
+            },
+            "prop": "color",
+            "value": "red"
+          }
+        ],
+        "source": {
+          "inputId": 0,
+          "start": {
+            "offset": 78,
+            "line": 7,
+            "column": 9
+          },
+          "end": {
+            "offset": 101,
+            "line": 7,
+            "column": 32
+          }
+        },
+        "selector": ".myClass",
+        "lastEach": 1,
+        "indexes": {}
+      }
+    ],
+    "source": {
+      "inputId": 0,
+      "start": {
+        "offset": 77,
+        "line": 7,
+        "column": 8
+      }
+    },
+    "lastEach": 1,
+    "indexes": {},
+    "inputs": [
+      {
+        "hasBOM": false,
+        "css": " .myClass { color: red; } "
+      }
+    ]
+  }
+}