@monospaced/set-config 0.20.2 → 0.22.0

package/README.md

@@ -2,26 +2,72 @@
 
 Shared developer-tooling config for Set. ESLint, Stylelint, Prettier, browserslist presets plus the `--set-*` token catalog for editor autocomplete and tooling — install once, plug in via subpath imports.
 
+## Baseline
+
+Set targets [Baseline](https://web.dev/baseline) Widely available: features supported in every core browser for at least 30 months. One constant encodes that target and every preset derives from it, so the browserslist query, the esbuild target, and the ESLint and Stylelint Baseline rules can never disagree.
+
+```ts
+import baseline from "@monospaced/set-config/baseline"; // "widely"
+```
+
+- **ESLint** reports JS builtins and Web APIs outside the target as errors, via [`eslint-plugin-baseline-js`](https://github.com/3ru/eslint-plugin-baseline-js). Unsupported JS throws at runtime, so this is a hard floor.
+- **Stylelint** reports CSS properties, values, functions, at-rules and selectors outside the target as errors, via [`stylelint-plugin-use-baseline`](https://github.com/ryo-manba/stylelint-plugin-use-baseline). Unsupported CSS degrades silently where unsupported JS throws, so the preset ignores a short list of progressive enhancements that degrade gracefully. Anything else needs an `@supports` guard or an inline justification:
+
+  ```css
+  /* stylelint-disable-next-line plugin/use-baseline -- Baseline newly available 2025; physical fallback above */
+  overflow-block: auto;
+  ```
+
 ## ESLint
 
-Flat-config preset that adds Set's import/export sort convention (`simple-import-sort`) for `.mjs` / `.ts` / `.tsx`. Layer it onto your own ESLint baseline — bring your own TypeScript / JSON / JS recommended.
+Two complete flat configs and one layer. `eslint` and `typescript` are peer dependencies: install them alongside.
+
+### Default
+
+A complete config for a web project: `@eslint/js` recommended, `typescript-eslint` recommended, `@eslint/json` recommended (`tsconfig*.json` and `.vscode/*.json` are parsed as JSONC, since TypeScript and VS Code accept comments and trailing commas there), browser globals for source files, Node globals for root-level `*.config.*` files and `scripts/`, Set's import sort, and the Baseline rule (off for the Node-run files, where the `engines` range is the support contract). `dist`, `build` and `coverage` are ignored.
 
 ```js
 // eslint.config.mjs
 import setEslint from "@monospaced/set-config/eslint";
 
 export default [
-  // your TypeScript / JSON / JS configs here
   ...setEslint,
   // your local rules / overrides
 ];
 ```
 
-`eslint` itself is a peer dependency — install it alongside.
+### React
+
+The default config plus `eslint-plugin-react-hooks` recommended and the `eslint-plugin-react-refresh` Vite config, both at their own defaults.
+
+```js
+// eslint.config.mjs
+import setEslint from "@monospaced/set-config/eslint/react";
+
+export default [...setEslint];
+```
+
+### Rules
+
+Only Set's own conventions — import/export sort (`simple-import-sort`) and the Baseline rule (`baseline-js/use-baseline`, see above) — for layering onto a config you already have. Turn the Baseline rule off for code that runs under Node.
+
+```js
+// eslint.config.mjs
+import setRules from "@monospaced/set-config/eslint/rules";
+
+export default [
+  // your TypeScript / JSON / JS configs here
+  ...setRules,
+  {
+    files: ["**/scripts/**", "**/*.config.{js,mjs,ts}"],
+    rules: { "baseline-js/use-baseline": "off" },
+  },
+];
+```
 
 ## Stylelint
 
-Drop-in shareable config — extends `stylelint-config-standard` and layers on Set's CSS authoring discipline: alphabetical property ordering (`stylelint-order`), token-discipline rules (no raw colors, no absolute lengths, no raw time, no `!important`), and logical-CSS enforcement (`stylelint-plugin-logical-css`) so component CSS stays portable across writing modes.
+Drop-in shareable config — extends `stylelint-config-standard` and layers on Set's CSS authoring discipline: alphabetical property ordering (`stylelint-order`), token-discipline rules (no raw colors, no absolute lengths, no raw time, no `!important`), logical-CSS enforcement (`stylelint-plugin-logical-css`) so component CSS stays portable across writing modes, and the Baseline rule (`plugin/use-baseline`, see above).
 
 ```js
 // .stylelintrc.mjs
@@ -78,9 +124,9 @@ Catalog enforcement for `--set-*` references is preserved; non-`--set-` customs
 import browserslist from "@monospaced/set-config/browserslist";
 ```
 
-Use the query directly in tools that accept query arrays (for example Autoprefixer `overrideBrowserslist`).
+Use the query directly in tools that accept query arrays (for example Autoprefixer `overrideBrowserslist`, or Lightning CSS via `browserslistToTargets`).
 
-For plain `package.json` `browserslist` fields, use the equivalent query:
+For plain `package.json` `browserslist` fields, use the equivalent query. Autoprefixer, Lightning CSS and anything else built on the `browserslist` package read this field automatically, so it is the single source of truth for a project:
 
 ```json
 {
@@ -88,8 +134,18 @@ For plain `package.json` `browserslist` fields, use the equivalent query:
 }
 ```
 
-## Vite target
+## Vite targets
+
+The esbuild target string and the Lightning CSS targets object, both derived from the Baseline query. `browserslist` and `lightningcss` are optional peer dependencies, needed only for the Lightning CSS export.
 
 ```ts
+// vite.config.ts
 import target from "@monospaced/set-config/browserslist/esbuild";
+import targets from "@monospaced/set-config/browserslist/lightningcss";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: { cssMinify: "lightningcss", target },
+  css: { lightningcss: { targets }, transformer: "lightningcss" },
+});
 ```

package/baseline/index.d.ts

@@ -0,0 +1,3 @@
+declare const baseline: "widely" | "newly";
+
+export default baseline;

package/baseline/index.mjs

@@ -0,0 +1,13 @@
+/**
+ * Set's Baseline availability target. One constant drives every preset that
+ * encodes browser support: the browserslist query, the esbuild target, and
+ * the ESLint and Stylelint Baseline rules, so they can never drift apart.
+ *
+ * "widely" means Baseline Widely available: supported in all core browsers
+ * for at least 30 months. Switch to "newly" to adopt features sooner.
+ *
+ * @type {"widely" | "newly"}
+ */
+const baseline = "widely";
+
+export default baseline;

package/browserslist/esbuild.mjs

@@ -1,3 +1,5 @@
-const esbuildTarget = "baseline-widely-available";
+import baseline from "../baseline/index.mjs";
+
+const esbuildTarget = `baseline-${baseline}-available`;
 
 export default esbuildTarget;

package/browserslist/index.mjs

@@ -1,3 +1,5 @@
-const browserslist = ["baseline widely available"];
+import baseline from "../baseline/index.mjs";
+
+const browserslist = [`baseline ${baseline} available`];
 
 export default browserslist;

package/browserslist/lightningcss.d.ts

@@ -0,0 +1,5 @@
+import type { Targets } from "lightningcss";
+
+declare const lightningcssTargets: Targets;
+
+export default lightningcssTargets;

package/browserslist/lightningcss.mjs

@@ -0,0 +1,8 @@
+import browserslist from "browserslist";
+import { browserslistToTargets } from "lightningcss";
+
+import query from "./index.mjs";
+
+const lightningcssTargets = browserslistToTargets(browserslist(query));
+
+export default lightningcssTargets;

package/eslint/index.mjs

@@ -1,13 +1,55 @@
-import simpleImportSort from "eslint-plugin-simple-import-sort";
+import js from "@eslint/js";
+import json from "@eslint/json";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+import setRules from "./rules.mjs";
+
+// Files that run under Node rather than in the browser: root-level tool
+// configs and the scripts directory. Anchored to the root so that shipped
+// code such as src/scripts/ or src/theme.config.ts stays browser code.
+const NODE_FILES = ["*.config.{js,cjs,mjs,ts,cts,mts}", "scripts/**"];
+
+const off = (names) => Object.fromEntries(names.map((name) => [name, "off"]));
 
 const eslintConfig = [
   {
-    files: ["**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}"],
-    plugins: { "simple-import-sort": simpleImportSort },
-    rules: {
-      "simple-import-sort/imports": "error",
-      "simple-import-sort/exports": "error",
+    ignores: ["**/build/**", "**/coverage/**", "**/dist/**"],
+  },
+  ...setRules,
+  {
+    files: ["**/*.json"],
+    ...json.configs.recommended,
+    language: "json/json",
+  },
+  {
+    // Editor and TypeScript config files allow comments and trailing commas.
+    files: ["**/.vscode/*.json", "**/tsconfig*.json"],
+    ...json.configs.recommended,
+    language: "json/jsonc",
+    languageOptions: { allowTrailingCommas: true },
+  },
+  {
+    files: ["**/*.{js,cjs,mjs,jsx}"],
+    ...js.configs.recommended,
+    languageOptions: { globals: { ...globals.browser } },
+  },
+  ...tseslint.configs.recommended.map((config) => ({
+    ...config,
+    files: ["**/*.{ts,cts,mts,tsx}"],
+    languageOptions: {
+      ...(config.languageOptions ?? {}),
+      globals: { ...globals.browser },
+    },
+  })),
+  {
+    files: NODE_FILES,
+    languageOptions: {
+      globals: { ...off(Object.keys(globals.browser)), ...globals.node },
     },
+    // Enabled for every JS and TS file by rules.mjs; Baseline is a browser
+    // support contract, and these files run under Node.
+    rules: { "baseline-js/use-baseline": "off" },
   },
 ];
 

package/eslint/react.d.ts

@@ -0,0 +1,5 @@
+import type { Linter } from "eslint";
+
+declare const reactConfig: Linter.Config[];
+
+export default reactConfig;

package/eslint/react.mjs

@@ -0,0 +1,18 @@
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+
+import eslintConfig from "./index.mjs";
+
+const hooks = reactHooks.configs.flat.recommended;
+const refresh = reactRefresh.configs.vite;
+
+const reactConfig = [
+  ...eslintConfig,
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    plugins: { ...hooks.plugins, ...refresh.plugins },
+    rules: { ...hooks.rules, ...refresh.rules },
+  },
+];
+
+export default reactConfig;

package/eslint/rules.d.ts

@@ -0,0 +1,5 @@
+import type { Linter } from "eslint";
+
+declare const rulesConfig: Linter.Config[];
+
+export default rulesConfig;

package/eslint/rules.mjs

@@ -0,0 +1,23 @@
+import baselineJs from "eslint-plugin-baseline-js";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+
+import baseline from "../baseline/index.mjs";
+
+const rulesConfig = [
+  {
+    files: ["**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}"],
+    plugins: {
+      "baseline-js": baselineJs,
+      "simple-import-sort": simpleImportSort,
+    },
+    rules: {
+      "simple-import-sort/imports": "error",
+      "simple-import-sort/exports": "error",
+    },
+  },
+  // Baseline: JS builtins and Web APIs available at Set's Baseline level.
+  baselineJs.configs.recommended({ available: baseline }),
+  baselineJs.configs["recommended-ts"]({ available: baseline }),
+];
+
+export default rulesConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monospaced/set-config",
-  "version": "0.20.2",
+  "version": "0.22.0",
   "description": "Shared developer-tooling config for Set. ESLint, Stylelint, Prettier, browserslist presets plus the --set-* token catalog for editor autocomplete and tooling.",
   "repository": {
     "type": "git",
@@ -9,6 +9,7 @@
   },
   "type": "module",
   "files": [
+    "baseline",
     "browserslist",
     "eslint",
     "stylelint",
@@ -17,6 +18,10 @@
   ],
   "types": "./browserslist/index.d.ts",
   "exports": {
+    "./baseline": {
+      "types": "./baseline/index.d.ts",
+      "default": "./baseline/index.mjs"
+    },
     "./browserslist": {
       "types": "./browserslist/index.d.ts",
       "default": "./browserslist/index.mjs"
@@ -25,10 +30,22 @@
       "types": "./browserslist/esbuild.d.ts",
       "default": "./browserslist/esbuild.mjs"
     },
+    "./browserslist/lightningcss": {
+      "types": "./browserslist/lightningcss.d.ts",
+      "default": "./browserslist/lightningcss.mjs"
+    },
     "./eslint": {
       "types": "./eslint/index.d.ts",
       "default": "./eslint/index.mjs"
     },
+    "./eslint/react": {
+      "types": "./eslint/react.d.ts",
+      "default": "./eslint/react.mjs"
+    },
+    "./eslint/rules": {
+      "types": "./eslint/rules.d.ts",
+      "default": "./eslint/rules.mjs"
+    },
     "./stylelint": {
       "types": "./stylelint/index.d.ts",
       "default": "./stylelint/index.mjs"
@@ -38,17 +55,47 @@
     "baseline widely available"
   ],
   "dependencies": {
+    "@eslint/js": "^10.0.1",
+    "@eslint/json": "^2.1.1",
+    "eslint-plugin-baseline-js": "^0.7.7",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.7",
     "eslint-plugin-simple-import-sort": "^13.0.0",
+    "globals": "^17.14.0",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-declaration-strict-value": "^1.11.1",
     "stylelint-order": "^8.1.1",
-    "stylelint-plugin-logical-css": "^2.1.0"
+    "stylelint-plugin-logical-css": "^2.1.0",
+    "stylelint-plugin-use-baseline": "^1.4.8",
+    "typescript-eslint": "^8.72.1"
   },
   "peerDependencies": {
+    "browserslist": "^4.26.0",
     "eslint": "^10.0.0",
-    "stylelint": "^17.0.0"
+    "lightningcss": "^1.0.0",
+    "stylelint": "^17.0.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "browserslist": {
+      "optional": true
+    },
+    "lightningcss": {
+      "optional": true
+    },
+    "stylelint": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "eslint": "^10.2.1",
+    "typescript": "^5.9.3"
   },
   "scripts": {
+    "test": "node --test",
     "verify": "node scripts/verify.mjs"
   }
 }

package/stylelint/index.mjs

@@ -1,5 +1,6 @@
 import { createRequire } from "node:module";
 
+import baseline from "../baseline/index.mjs";
 import setTokensPlugin from "./plugin-set-tokens.mjs";
 
 // Stylelint resolves `extends`/`plugins` strings from the consumer's config
@@ -34,6 +35,7 @@ const stylelintConfig = {
   plugins: [
     require.resolve("stylelint-declaration-strict-value"),
     require.resolve("stylelint-order"),
+    require.resolve("stylelint-plugin-use-baseline"),
     setTokensPlugin,
   ],
   rules: {
@@ -75,6 +77,23 @@ const stylelintConfig = {
     ],
     "no-descending-specificity": null,
     "order/properties-alphabetical-order": true,
+    // Baseline: CSS features available at Set's Baseline level. The ignores
+    // are progressive enhancements that degrade gracefully; prune each once
+    // it reaches Widely available.
+    "plugin/use-baseline": [
+      true,
+      {
+        available: baseline,
+        ignoreProperties: {
+          "accent-color": ["/^.+$/"],
+          "forced-color-adjust": ["/^.+$/"],
+          "/^overscroll-behavior/": ["/^.+$/"],
+          resize: ["/^.+$/"],
+          "text-wrap": ["balance", "pretty"],
+        },
+        ignoreSelectors: ["marker", "selection"],
+      },
+    ],
     "scale-unlimited/declaration-strict-value": [
       [
         "/^border.*radius$/",