test(selector-node-loc-fixing): added tests

Author: marekdedic

tests/fixtures/parser/style-selector-location-converter/simple-css-input.svelte

@@ -0,0 +1,25 @@
+<script>
+  let a = 10
+</script>
+
+<span class="myClass">Hello!</span>
+
+<b>{a}</b>
+
+<style>
+  .myClass {
+    color: red;
+  }
+
+  b {
+    font-size: xx-large;
+  }
+
+  a:active,
+  a::before,
+  b + a,
+  b + .myClass,
+  a[data-key="value"] {
+    color: blue;
+  }
+</style>

tests/fixtures/parser/style-selector-location-converter/simple-postcss-input.svelte

@@ -0,0 +1,20 @@
+<div class="container">
+  <div class="div-class">Hello</div>
+
+  <span class="span-class">World!</span>
+</div>
+
+<style lang="postcss">
+  body {
+    colour: white;
+    background-colour: grey;
+  }
+
+  a:active,
+  a::before,
+  b + a,
+  b + .myClass,
+  a[data-key="value"] {
+    color: blue;
+  }
+</style>

tests/fixtures/parser/style-selector-location-converter/simple-scss-input.svelte

@@ -0,0 +1,26 @@
+<div class="container">
+  <div class="div-class">Hello</div>
+
+  <span class="span-class">World!</span>
+</div>
+
+<style lang="scss">
+  .container {
+    .div-class {
+      // This is an inline comment
+      color: red;
+    }
+
+    .span-class {
+      font-weight: bold;
+    }
+
+    a:active,
+    a::before,
+    b + a,
+    b + .myClass,
+    a[data-key="value"] {
+      color: blue;
+    }
+  }
+</style>

tests/src/parser/style-selector-location-converter-utils.ts

@@ -0,0 +1,28 @@
+import assert from "assert";
+import fs from "fs";
+import path from "path";
+import type { AnyNode, Root } from "postcss";
+import type { Node as SelectorNode } from "postcss-selector-parser";
+
+import type { SourceLocation } from "../../../src/ast/common.js";
+
+export function extractSelectorLocations(
+  services: Record<string, any>,
+  styleAST: Root,
+): [string, Partial<SourceLocation>][][] {
+  const locations: [string, Partial<SourceLocation>][][] = [];
+  styleAST.walk((node: AnyNode) => {
+    if (node.type === "rule") {
+      const selectorAst = services.getStyleSelectorAST(node);
+      const selectorLocations: [string, Partial<SourceLocation>][] = [];
+      selectorAst.walk((selectorNode: SelectorNode) => {
+        selectorLocations.push([
+          selectorNode.type,
+          services.styleSelectorNodeLoc(selectorNode, node),
+        ]);
+      });
+      locations.push(selectorLocations);
+    }
+  });
+  return locations;
+}

tests/src/parser/style-selector-location-converter.ts

@@ -0,0 +1,49 @@
+import assert from "assert";
+import fs from "fs";
+import path from "path";
+
+import { parseForESLint } from "../../../src/index.js";
+import { extractSelectorLocations } from "./style-selector-location-converter-utils.js";
+import { generateParserOptions, listupFixtures } from "./test-utils.js";
+
+const dirname = path.dirname(new URL(import.meta.url).pathname);
+const SELECTOR_CONVERTER_FIXTURE_ROOT = path.resolve(
+  dirname,
+  "../../fixtures/parser/style-selector-location-converter",
+);
+
+function parse(code: string, filePath: string, config: any) {
+  return parseForESLint(code, generateParserOptions({ filePath }, config));
+}
+
+describe("Check for AST.", () => {
+  for (const {
+    input,
+    inputFileName,
+    outputFileName,
+    config,
+    meetRequirements,
+  } of listupFixtures(SELECTOR_CONVERTER_FIXTURE_ROOT)) {
+    describe(inputFileName, () => {
+      let services: any;
+
+      it("most to generate the expected style context.", () => {
+        services = parse(input, inputFileName, config).services;
+        if (!meetRequirements("test")) {
+          return;
+        }
+        const styleContext = services.getStyleContext();
+        assert.strictEqual(styleContext.status, "success");
+        const locations = extractSelectorLocations(
+          services,
+          styleContext.sourceAst,
+        );
+        const output = fs.readFileSync(outputFileName, "utf8");
+        assert.strictEqual(
+          `${JSON.stringify(locations, undefined, 2)}\n`,
+          output,
+        );
+      });
+    });
+  }
+});

tools/update-fixtures.ts

@@ -15,6 +15,7 @@ import {
   selectorAstToJson,
   styleContextToJson,
 } from "../tests/src/parser/test-utils.js";
+import { extractSelectorLocations } from "../tests/src/parser/style-selector-location-converter-utils.js";
 import type ts from "typescript";
 import type ESTree from "estree";
 import globals from "globals";
@@ -38,6 +39,10 @@ const SELECTOR_PARSING_FIXTURE_ROOT = path.resolve(
   dirname,
   "../tests/fixtures/parser/selector-parsing",
 );
+const SELECTOR_CONVERTER_FIXTURE_ROOT = path.resolve(
+  dirname,
+  "../tests/fixtures/parser/style-selector-location-converter",
+);
 
 const RULES = [
   "no-unused-labels",
@@ -232,6 +237,29 @@ for (const {
   );
 }
 
+for (const {
+  input,
+  inputFileName,
+  outputFileName,
+  config,
+  meetRequirements,
+} of listupFixtures(SELECTOR_CONVERTER_FIXTURE_ROOT)) {
+  if (!meetRequirements("parse")) {
+    continue;
+  }
+  const services = parse(input, inputFileName, config).services;
+  const styleContext = services.getStyleContext();
+  if (styleContext.status !== "success") {
+    continue;
+  }
+  const locations = extractSelectorLocations(services, styleContext.sourceAst);
+  fs.writeFileSync(
+    outputFileName,
+    `${JSON.stringify(locations, undefined, 2)}\n`,
+    "utf8",
+  );
+}
+
 function buildTypes(
   input: string,
   result: {