👍🏼 improve: bud stylelint compatibility (#2367)

- tries `stylelint.mjs` first
- falls back to `stylelint.js`
- adds integration test for command

## Type of change

**PATCH: backwards compatible change**

.github/workflows/lint.yml

@@ -14,7 +14,7 @@ jobs:
         platform:
           - ubuntu-latest
         node:
-          - 18.12.1
+          - 18.16.1
 
     name: format-check (node@v${{matrix.node}}/${{matrix.platform}})
     runs-on: ${{matrix.platform}}

.github/workflows/release-deprecate.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Setup
         uses: actions/setup-node@v3
         with:
-          node-version: 18.12.1
+          node-version: 18.16.1
           cache: yarn
 
       - name: Auth

.github/workflows/release-main.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 18.16.1
           cache: yarn
 
       - run: yarn

.github/workflows/release-next.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 18.16.1
           cache: yarn
 
       - run: yarn

.github/workflows/release-nightly.yml

@@ -16,7 +16,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 18.16.1
           cache: yarn
 
       - run: npm install -g npm

.github/workflows/test.e2e.yml

@@ -14,7 +14,7 @@ jobs:
         platform:
           - ubuntu-latest
         node:
-          - 18.12.1
+          - 18.16.1
 
     name: test node@${{matrix.node}}/${{matrix.platform}}
     runs-on: ${{matrix.platform}}

.github/workflows/test.integration.yml

@@ -14,7 +14,7 @@ jobs:
         platform:
           - ubuntu-latest
         node:
-          - 18.12.1
+          - 18.16.1
 
     name: integration test (node@v${{matrix.node}}/${{matrix.platform}})
     runs-on: ${{matrix.platform}}

.github/workflows/test.unit.yml

@@ -14,7 +14,7 @@ jobs:
         platform:
           - ubuntu-latest
         node:
-          - 18.12.1
+          - 18.16.1
 
     name: unit test (node@v${{matrix.node}}/${{matrix.platform}})
     runs-on: ${{matrix.platform}}

config/vitest.unit.config.ts

@@ -12,8 +12,8 @@ export default defineConfig({
     hookTimeout: 60000,
     include: [
       `sources/@roots/*/src/**/*.test.{ts,tsx}`,
-      `sources/@roots/*/test/**/*.{ts,tsx}`,
-      `sources/@roots/*/tests/**/*.{ts,tsx}`,
+      `sources/@roots/*/test/**/*.test.{ts,tsx}`,
+      `sources/@roots/*/tests/**/*.test.{ts,tsx}`,
       `tests/unit/**/*.test.ts`,
       `tests/reproductions/**/*.test.ts`,
     ],

examples/stylelint/package.json

@@ -8,7 +8,6 @@
   ],
   "devDependencies": {
     "@roots/bud": "latest",
-    "@roots/bud-stylelint": "latest",
-    "@roots/stylelint-config": "latest"
+    "@roots/bud-stylelint": "latest"
   }
 }

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "description": "⚡️ Lightning fast frontend build tools combining the best parts of Symfony Encore and Laravel Mix",
   "engines": {
-    "node": "18.12.1",
+    "node": "18.16.1",
     "yarn": "1.22.19",
     "npm": "8.19.2"
   },
@@ -61,14 +61,12 @@
       "sources/@roots/*/test/**/*",
       "sources/@roots/*/src/__fixtures__/*",
       "sources/create-bud-app",
-      "sources/deprecated/bud-terser",
       "tests/util/project",
       "tests/reproductions/*"
     ]
   },
   "volta": {
-    "node": "18.12.1",
-    "yarn": "1.22.19",
-    "npm": "8.19.2"
+    "node": "18.16.1",
+    "yarn": "1.22.19"
   }
 }

sources/@repo/test-kit/integration-test.ts

@@ -20,14 +20,29 @@ interface Entrypoints {
 }
 
 class Project {
+  /**
+   * Compiled modules keyed by asset name
+   */
   public assets: Record<string, string> = {}
 
+  /**
+   * entrypoints.json contents
+   */
   public entrypoints: Entrypoints = {}
 
+  /**
+   * manifest.json contents
+   */
   public manifest: Record<string, any> = {}
 
+  /**
+   * Class constructor
+   */
   public constructor(public options: Options) {}
 
+  /**
+   * Build the project
+   */
   @bind
   public async build() {
     const build = this.options.buildCommand ?? [
@@ -65,6 +80,9 @@ class Project {
     return this
   }
 
+  /**
+   * Get the project directory
+   */
   public get directory(): string {
     return path(
       `storage`,
@@ -73,16 +91,25 @@ class Project {
     )
   }
 
+  /**
+   * Get an asset by name
+   */
   @bind
   public getAsset(name: string) {
     return this.assets[name]
   }
 
+  /**
+   * Get an entrypoint by name
+   */
   @bind
   public getEntrypoint(name: string) {
     return this.entrypoints[name]
   }
 
+  /**
+   * Get the path to a file in the project
+   */
   @bind
   public getPath(...file: Array<string>) {
     return join(this.directory, ...file)

sources/@roots/bud-stylelint/src/bud/commands/bud.stylelint.command.tsx

@@ -2,15 +2,13 @@ import {join} from 'node:path'
 
 import {Command, Option} from '@roots/bud-support/clipanion'
 import BudCommand from '@roots/bud/cli/commands/bud'
-import {dry} from '@roots/bud/cli/decorators/dry'
 
 /**
  * Bud stylelint command
  */
-@dry
 export class BudStylelintCommand extends BudCommand {
   /**
-   * Command paths
+   * {@link BudCommand.paths}
    */
   public static override paths = [
     [`lint`, `css`],
@@ -20,7 +18,7 @@ export class BudStylelintCommand extends BudCommand {
   ]
 
   /**
-   * Command usage
+   * {@link BudCommand.usage}
    */
   public static override usage = Command.Usage({
     category: `tools`,
@@ -43,8 +41,18 @@ export class BudStylelintCommand extends BudCommand {
     await this.makeBud()
     await this.bud.run()
 
-    const stylelint = await this.bud.module.getDirectory(`stylelint`)
-    const bin = join(stylelint, `bin`, `stylelint.js`)
+    const stylelint = await this.bud.module
+      .getDirectory(`stylelint`)
+      .catch(this.catch)
+
+    if (!stylelint) {
+      throw `stylelint can't be resolved. You may need to install it.`
+    }
+
+    let bin = join(stylelint, `bin`, `stylelint.mjs`)
+    if (!(await this.bud.fs.exists(bin))) {
+      bin = join(stylelint, `bin`, `stylelint.js`)
+    }
 
     if (!this.options?.length)
       this.options = [this.bud.path(`@src`, `**`, `*.{css,scss,sass}`)]

sources/@roots/bud-stylelint/test/__fixtures__/default/bud.config.ts

@@ -0,0 +1,10 @@
+import {type Bud} from '@roots/bud'
+
+export default async (bud: Bud) => {
+  bud.entry(`app`, [`app.js`, `app.css`])
+
+  bud.stylelint
+    .setFailOnError(bud.isProduction)
+    .setFailOnWarning(false)
+    .setFix(true)
+}

sources/@roots/bud-stylelint/test/__fixtures__/default/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@tests/stylelint-command",
+  "private": true,
+  "type": "module",
+  "$schema": "https://bud.js.org/bud.package.json",
+  "browserslist": [
+    "extends @roots/browserslist-config"
+  ],
+  "devDependencies": {
+    "@roots/bud": "workspace:*",
+    "@roots/bud-stylelint": "workspace:*"
+  }
+}

sources/@roots/bud-stylelint/test/__fixtures__/default/src/app.css

@@ -0,0 +1,3 @@
+body {
+  background: 'blue';
+}

sources/@roots/bud-stylelint/test/__fixtures__/default/src/app.js

@@ -0,0 +1,6 @@
+const target = document.querySelector(`body`)
+target.innerHTML = `
+  <div>
+    <h1>Hello</h1>
+  </div>
+`

sources/@roots/bud-stylelint/test/__fixtures__/default/stylelint.config.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: [`@roots/bud-stylelint/config`],
+  rules: {'no-descending-specificity': null},
+}

sources/@roots/bud-stylelint/test/__fixtures__/default/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["@roots/bud/config/tsconfig.json"],
+  "compilerOptions": {
+    "types": ["@roots/bud", "@roots/bud-stylelint"]
+  },
+  "files": ["./bud.config.ts"]
+}

sources/@roots/bud-stylelint/test/command.test.ts

@@ -0,0 +1,16 @@
+import {describe, expect, it} from 'vitest'
+import {execa} from 'execa'
+
+describe(`bud stylelint`, () => {
+  it('should return 0', async () => {
+    const result = await execa('yarn', [
+      'workspace',
+      '@tests/stylelint-command',
+      'run',
+      'bud',
+      'stylelint',
+    ])
+
+    expect(result.exitCode).toBe(0)
+  })
+})