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.ts

@@ -0,0 +1,68 @@
+import assert from "assert";
+import fs from "fs";
+import path from "path";
+import type { AnyNode } from "postcss";
+import type { Node as SelectorNode } from "postcss-selector-parser";
+
+import { parseForESLint } from "../../../src/index.js";
+import { generateParserOptions, listupFixtures } from "./test-utils.js";
+import type { SourceLocation } from "../../../src/ast/common.js";
+
+const dirname = path.dirname(new URL(import.meta.url).pathname);
+const STYLE_SELECTOR_CONTEXT_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(STYLE_SELECTOR_CONTEXT_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 locations = extractLocations(services);
+        const output = fs.readFileSync(outputFileName, "utf8");
+        assert.strictEqual(
+          `${JSON.stringify(locations, undefined, 2)}\n`,
+          output,
+        );
+      });
+    });
+  }
+});
+
+function extractLocations(
+  services: Record<string, any>,
+): [string, Partial<SourceLocation>][][] {
+  const locations: [string, Partial<SourceLocation>][][] = [];
+  const styleContext = services.getStyleContext();
+  assert.strictEqual(styleContext.status, "success");
+  styleContext.sourceAst.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;
+}