feat(selector-parsing): added helper function to parse style selectors

Author: marekdedic

src/parser/index.ts

@@ -10,6 +10,8 @@ import type {
 import type { Program } from "estree";
 import type { ScopeManager } from "eslint-scope";
 import { Variable } from "eslint-scope";
+import type { Rule } from "postcss";
+import type { Root as SelectorRoot } from "postcss-selector-parser";
 import { parseScript, parseScriptInSvelte } from "./script.js";
 import type * as SvAST from "./svelte-ast-types.js";
 import type * as Compiler from "./svelte-ast-types-for-v5.js";
@@ -29,6 +31,7 @@ import {
 import { addReference } from "../scope/index.js";
 import {
   parseStyleContext,
+  parseSelector,
   type StyleContext,
   type StyleContextNoStyleElement,
   type StyleContextParseError,
@@ -84,6 +87,7 @@ type ParseResult = {
           isSvelteScript: false;
           getSvelteHtmlAst: () => SvAST.Fragment | Compiler.Fragment;
           getStyleContext: () => StyleContext;
+          getStyleSelectorAST: (rule: Rule) => SelectorRoot;
           svelteParseContext: SvelteParseContext;
         }
       | {
@@ -221,6 +225,7 @@ function parseAsSvelte(
     (b): b is SvelteStyleElement => b.type === "SvelteStyleElement",
   );
   let styleContext: StyleContext | null = null;
+  const selectorASTs: Map<Rule, SelectorRoot> = new Map();
 
   resultScript.ast = ast as any;
   resultScript.services = Object.assign(resultScript.services || {}, {
@@ -235,6 +240,15 @@ function parseAsSvelte(
       }
       return styleContext;
     },
+    getStyleSelectorAST(rule: Rule) {
+      const cached = selectorASTs.get(rule);
+      if (cached !== undefined) {
+        return cached;
+      }
+      const ast = parseSelector(rule);
+      selectorASTs.set(rule, ast);
+      return ast;
+    },
     styleNodeLoc,
     styleNodeRange,
     svelteParseContext,

src/parser/style-context.ts

@@ -1,6 +1,11 @@
-import type { Node, Parser, Root } from "postcss";
+import type { Node, Parser, Root, Rule } from "postcss";
 import postcss from "postcss";
 import { parse as SCSSparse } from "postcss-scss";
+import {
+  default as selectorParser,
+  type Node as SelectorNode,
+  type Root as SelectorRoot,
+} from "postcss-selector-parser";
 
 import type { Context } from "../context/index.js";
 import type { SourceLocation, SvelteStyleElement } from "../ast/index.js";
@@ -77,10 +82,25 @@ export function parseStyleContext(
     return { status: "parse-error", sourceLang, error };
   }
   fixPostCSSNodeLocation(sourceAst, styleElement);
-  sourceAst.walk((node) => fixPostCSSNodeLocation(node, styleElement));
+  sourceAst.walk((node) => {
+    fixPostCSSNodeLocation(node, styleElement);
+  });
   return { status: "success", sourceLang, sourceAst };
 }
 
+/**
+ * Parses a PostCSS Rule node's selector and returns its AST.
+ */
+export function parseSelector(rule: Rule): SelectorRoot {
+  const processor = selectorParser();
+  const root = processor.astSync(rule.selector);
+  fixSelectorNodeLocation(root, rule);
+  root.walk((node) => {
+    fixSelectorNodeLocation(node, rule);
+  });
+  return root;
+}
+
 /**
  * Extracts a node location (like that of any ESLint node) from a parsed svelte style node.
  */
@@ -144,3 +164,32 @@ function fixPostCSSNodeLocation(node: Node, styleElement: SvelteStyleElement) {
     node.source.end.column += styleElement.startTag.loc.end.column;
   }
 }
+
+/**
+ * Fixes selector AST locations to be relative to the whole file instead of relative to their parent rule.
+ */
+function fixSelectorNodeLocation(node: SelectorNode, rule: Rule) {
+  if (node.source === undefined) {
+    return;
+  }
+  const ruleLoc = styleNodeLoc(rule);
+
+  if (node.source.start !== undefined && ruleLoc.start !== undefined) {
+    if (node.source.start.line === 1) {
+      node.source.start.column += ruleLoc.start.column;
+    }
+    node.source.start.line += ruleLoc.start.line - 1;
+  } else {
+    node.source.start = undefined;
+  }
+
+  if (node.source.end !== undefined && ruleLoc.start !== undefined) {
+    if (node.source.end.line === 1) {
+      node.source.end.column += ruleLoc.start.column;
+    }
+    node.source.end.column += 1;
+    node.source.end.line += ruleLoc.start.line - 1;
+  } else {
+    node.source.end = undefined;
+  }
+}