Fix stylelint (#584)

`stylelint` put out [`16.0.0`](https://github.com/stylelint/stylelint/releases/tag/16.0.0) with some pretty significant changes this morning, including migrating to `ESM` like the rest of node world. This doesn't present a problem, but several other breaking changes do: - json and any diagnostic output now goes to stderr - Simplified output that changes the base diagnostic set - Our existing tests were actually broken. Rather than a eslint-like SYSTEM-wide install, this should use `extra_packages`. The dependency network is a bit broken, so I manually specify the config package version in these tests. As soon as this lands I will put out a release.
trunk-io · Dec 8, 2023 · 6c4239b · 6c4239b
1 parent d884127
commit 6c4239b
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 17 deletions.
diff --git a/linters/stylelint/plugin.yaml b/linters/stylelint/plugin.yaml
@@ -12,6 +12,13 @@ lint:
       files: [css, sass]
       tools: [stylelint]
       commands:
+        - name: lint
+          version: ">=16.0.0"
+          read_output_from: stderr
+          # Custom parser type defined in the trunk cli to handle stylelint's JSON output.
+          output: stylelint
+          success_codes: [0, 2]
+          run: stylelint -f json ${target}
         - name: lint
           # Custom parser type defined in the trunk cli to handle stylelint's JSON output.
           output: stylelint

diff --git a/linters/stylelint/stylelint.test.ts b/linters/stylelint/stylelint.test.ts
@@ -1,29 +1,28 @@
-import { execSync } from "child_process";
+import semver from "semver";
 import { linterCheckTest, linterFmtTest } from "tests";
 import { TrunkLintDriver } from "tests/driver";
 
 // stylelint requires additional install steps
 const preCheck = (driver: TrunkLintDriver) => {
-  if (driver.gitDriver) {
-    const packageJsonContents = `
-{
-  "private": true,
-  "devDependencies": {
-    "stylelint": "^14.6.1",
-    "stylelint-config-standard": "^25.0.0"
-  }
-}
-    `;
-    const stylelintContents = `
+  const stylelintContents = `
 {
   "extends": "stylelint-config-standard"
 }
-    `;
+  `;
+
+  driver.writeFile(".trunk/configs/.stylelintrc", stylelintContents);
 
-    driver.writeFile("package.json", packageJsonContents);
-    driver.writeFile(".trunk/configs/.stylelintrc", stylelintContents);
-    execSync("npm install", { cwd: driver.getSandbox() });
-  }
+  const configVersion = semver.gte(driver.enabledVersion!, "16.0.0")
+    ? "stylelint-config-standard@35.0.0"
+    : "stylelint-config-standard@25.0.0";
+  const trunkYamlPath = ".trunk/trunk.yaml";
+  const currentContents = driver.readFile(trunkYamlPath);
+  const sqlfluffRegex = /- stylelint@(.+)\n/;
+  const newContents = currentContents.replace(
+    sqlfluffRegex,
+    `- stylelint@$1:\n        packages: [${configVersion}]\n`,
+  );
+  driver.writeFile(trunkYamlPath, newContents);
 };
 
 linterCheckTest({ linterName: "stylelint", preCheck });

diff --git a/linters/stylelint/test_data/stylelint_v16.0.1_basic.check.shot b/linters/stylelint/test_data/stylelint_v16.0.1_basic.check.shot
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing linter stylelint test basic 1`] = `
+{
+  "issues": [
+    {
+      "code": "rule-empty-line-before",
+      "column": "1",
+      "file": "test_data/basic.in.css",
+      "level": "LEVEL_HIGH",
+      "line": "10",
+      "linter": "stylelint",
+      "message": "Expected empty line before rule",
+      "targetType": "css",
+    },
+    {
+      "code": "rule-empty-line-before",
+      "column": "1",
+      "file": "test_data/basic.in.css",
+      "level": "LEVEL_HIGH",
+      "line": "13",
+      "linter": "stylelint",
+      "message": "Expected empty line before rule",
+      "targetType": "css",
+    },
+    {
+      "code": "rule-empty-line-before",
+      "column": "1",
+      "file": "test_data/basic.in.css",
+      "level": "LEVEL_HIGH",
+      "line": "20",
+      "linter": "stylelint",
+      "message": "Expected empty line before rule",
+      "targetType": "css",
+    },
+    {
+      "code": "rule-empty-line-before",
+      "column": "1",
+      "file": "test_data/basic.in.css",
+      "level": "LEVEL_HIGH",
+      "line": "23",
+      "linter": "stylelint",
+      "message": "Expected empty line before rule",
+      "targetType": "css",
+    },
+    {
+      "code": "rule-empty-line-before",
+      "column": "1",
+      "file": "test_data/basic.in.css",
+      "level": "LEVEL_HIGH",
+      "line": "27",
+      "linter": "stylelint",
+      "message": "Expected empty line before rule",
+      "targetType": "css",
+    },
+    {
+      "code": "rule-empty-line-before",
+      "column": "1",
+      "file": "test_data/basic.in.css",
+      "level": "LEVEL_HIGH",
+      "line": "7",
+      "linter": "stylelint",
+      "message": "Expected empty line before rule",
+      "targetType": "css",
+    },
+  ],
+  "lintActions": [
+    {
+      "command": "fix",
+      "fileGroupName": "css",
+      "linter": "stylelint",
+      "paths": [
+        "test_data/basic.in.css",
+      ],
+      "verb": "TRUNK_VERB_FMT",
+    },
+    {
+      "command": "lint",
+      "fileGroupName": "css",
+      "linter": "stylelint",
+      "paths": [
+        "test_data/basic.in.css",
+      ],
+      "verb": "TRUNK_VERB_CHECK",
+    },
+  ],
+  "taskFailures": [],
+  "unformattedFiles": [
+    {
+      "column": "1",
+      "file": "test_data/basic.in.css",
+      "issueClass": "ISSUE_CLASS_UNFORMATTED",
+      "level": "LEVEL_HIGH",
+      "line": "1",
+      "linter": "stylelint",
+      "message": "Incorrect formatting, autoformat by running 'trunk fmt'",
+    },
+  ],
+}
+`;
diff --git a/linters/stylelint/test_data/stylelint_v16.0.1_basic.fmt.shot b/linters/stylelint/test_data/stylelint_v16.0.1_basic.fmt.shot
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing formatter stylelint test basic 1`] = `
+"body {
+  margin: 5ex 10ex;
+  max-width: 80ex;
+  line-height: 1.5;
+  font-family: sans-serif;
+}
+
+h1, h2, h3 {
+  font-weight: normal;
+}
+
+pre, code {
+  font-family: x, monospace;
+}
+
+pre {
+  padding: 1ex;
+  background: #eee;
+  border: solid 1px #ddd;
+  min-width: 0;
+  font-size: 90%;
+}
+
+code {
+  color: #007;
+}
+
+div.chapter {
+  margin-top: 4em;
+  border-top: solid 2px black;
+}
+
+p {
+  margin-top: 0;
+}
+"
+`;