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.6",

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,7 @@ import {
 import { ParseError } from "../errors";
 import { parseTypeScript } from "./typescript";
 import { addReference } from "../scope";
+import { parseStyleContext, type StyleContext } from "./style-context";
 
 export interface ESLintProgram extends Program {
   comments: Comment[];
@@ -50,6 +52,7 @@ export function parseForESLint(
   services: Record<string, any> & {
     isSvelte: true;
     getSvelteHtmlAst: () => SvAST.Fragment;
+    getStyleContext: () => StyleContext;
   };
   visitorKeys: { [type: string]: string[] };
   scopeManager: ScopeManager;
@@ -166,12 +169,20 @@ 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;
+    },
   });
   resultScript.visitorKeys = Object.assign({}, KEYS, resultScript.visitorKeys);
 

src/parser/style-context.ts

@@ -0,0 +1,94 @@
+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 interface StyleContext {
+  sourceLang: string | null;
+  sourceAst: Root | null;
+}
+
+/**
+ * Extracts style source from a SvelteStyleElement and parses it into a PostCSS AST.
+ */
+export function parseStyleContext(
+  styleElement: SvelteStyleElement | undefined,
+  ctx: Context
+): StyleContext {
+  const styleContext: StyleContext = {
+    sourceLang: null,
+    sourceAst: null,
+  };
+  if (!styleElement || !styleElement.endTag) {
+    return styleContext;
+  }
+  styleContext.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"
+    ) {
+      styleContext.sourceLang = attribute.value[0].value;
+    }
+  }
+  let parseFn: Parser<Root>;
+  switch (styleContext.sourceLang) {
+    case "css":
+      parseFn = postcss.parse;
+      break;
+    case "scss":
+      parseFn = SCSSparse;
+      break;
+    default:
+      return styleContext;
+  }
+  const styleCode = ctx.code.slice(
+    styleElement.startTag.range[1],
+    styleElement.endTag.range[0]
+  );
+  try {
+    styleContext.sourceAst = parseFn(styleCode, {
+      from: ctx.parserOptions.filePath,
+    });
+    // eslint-disable-next-line no-empty -- Catching errors is not a good way to go around this, a safe parser should be used instead.
+  } catch {}
+  fixPostCSSNodeLocation(
+    styleContext.sourceAst,
+    styleElement.loc,
+    styleElement.startTag.range[1]
+  );
+  styleContext.sourceAst.walk((node) =>
+    fixPostCSSNodeLocation(
+      node,
+      styleElement.loc,
+      styleElement.startTag.range[1]
+    )
+  );
+  return styleContext;
+}
+
+/**
+ * Fixes PostCSS AST locations to be relative to the whole file instead of relative to the <style> element.
+ */
+function fixPostCSSNodeLocation(
+  node: Node,
+  styleElementLoc: SourceLocation,
+  styleElementOffset: number
+) {
+  if (node.source?.start?.offset !== undefined) {
+    node.source.start.offset += styleElementOffset;
+  }
+  if (node.source?.start?.line !== undefined) {
+    node.source.start.line += styleElementLoc.start.line - 1;
+  }
+  if (node.source?.end?.offset !== undefined) {
+    node.source.end.offset += styleElementOffset;
+  }
+  if (node.source?.end?.line !== undefined) {
+    node.source.end.line += styleElementLoc.start.line - 1;
+  }
+}