@mslmio/eslint-config 1.1.0 → 1.2.0

package/README.md

@@ -28,7 +28,7 @@ UI half behind `/ui` means the root entry resolves neither `@shadcn/lint` nor
 |---|---|---|
 | `house` | anything TS/JS | `no-property-shorthand`, `curly: all`, `us-spelling`, `no-express-json-spaces` |
 | `lib` | a published library | house + `no-lib-process-env`, `no-module-scope-init` |
-| `ui` | anything rendering Tailwind | house + `require-leading-with-text-size`, `prefer-copy-icon` |
+| `ui` | anything rendering Tailwind | house + `require-leading-with-text-size`, `prefer-copy-icon`, `prefer-table-facets` |
 | `uiLib` | a published UI library | `lib` + `ui` |
 
 ## Rules
@@ -43,6 +43,7 @@ UI half behind `/ui` means the root entry resolves neither `@shadcn/lint` nor
 | `prefer-copy-icon` | lucide `Copy`, not `Clipboard` |
 | `us-spelling` | US spelling in prose and identifiers |
 | `require-leading-with-text-size` | An arbitrary Tailwind text size must state its own line height |
+| `prefer-table-facets` | A `kind: "select"` filter lists the values its rows hold (facets), never a literal `options` list |
 
 `us-spelling` skips regex literals — a pattern matching scraped text has to accept both
 spellings — and takes `allow` for proper names that keep their own:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mslmio/eslint-config",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Shareable ESLint flat config and house rules: US spelling, library hygiene, workspace layering, and Tailwind/React conventions.",
   "keywords": [
     "eslint",

package/plugin.js

@@ -6,9 +6,10 @@ import usSpelling from "./rules/us-spelling.js";
 import requireLeadingWithTextSize from "./rules/require-leading-with-text-size.js";
 import noPropertyShorthand from "./rules/no-property-shorthand.js";
 import noUpwardImport from "./rules/no-upward-import.js";
+import preferTableFacets from "./rules/prefer-table-facets.js";
 
 export default {
-    meta: { name: "@mslmio/eslint-plugin", version: "2.4.0" },
+    meta: { name: "@mslmio/eslint-plugin", version: "2.5.0" },
     rules: {
         "no-lib-process-env": noLibProcessEnv,
         "no-module-scope-init": noModuleScopeInit,
@@ -18,5 +19,6 @@ export default {
         "require-leading-with-text-size": requireLeadingWithTextSize,
         "no-property-shorthand": noPropertyShorthand,
         "no-upward-import": noUpwardImport,
+        "prefer-table-facets": preferTableFacets,
     },
 };

package/rules/prefer-table-facets.js

@@ -0,0 +1,69 @@
+// A table's picklist filter offers the values its rows actually hold - served by
+// the backend as FACETS - rather than a literal list. A literal list is a second
+// copy of a vocabulary the backend owns, and the next value it starts writing is
+// missing from the picklist until someone remembers to add it.
+//
+// Reported: `options` on an object with `kind: "select"` that is an array
+// literal, a `.map` over one, or a map over Object.entries/keys/values - the
+// shapes a hardcoded list takes. Options mapped from runtime data pass. A fixed
+// product vocabulary, one no row can grow, stays literal behind a disable
+// comment saying so.
+export default {
+    meta: {
+        type: "suggestion",
+        docs: {
+            description: "A picklist filter lists the values its rows hold (facets), not a literal list",
+        },
+        schema: [{ type: "object", properties: { docsUrl: { type: "string" } }, additionalProperties: false }],
+        messages: {
+            literal:
+                "A picklist filter should list the values its rows hold: leave `options` off and serve " +
+                "them as facets. A fixed product vocabulary stays literal behind a disable comment " +
+                "saying why.{{docs}}",
+        },
+    },
+    create(context) {
+        const docs = docsSuffix(context);
+        return {
+            ObjectExpression(node) {
+                const kind = property(node, "kind");
+                const options = property(node, "options");
+                if (!kind || !options || kind.value.type !== "Literal" || kind.value.value !== "select") {
+                    return;
+                }
+                if (isLiteralList(options.value)) {
+                    context.report({ node: options, messageId: "literal", data: { docs: docs } });
+                }
+            },
+        };
+    },
+};
+
+function property(node, name) {
+    return node.properties.find((p) => p.type === "Property" && !p.computed
+        && ((p.key.type === "Identifier" && p.key.name === name)
+            || (p.key.type === "Literal" && p.key.value === name)));
+}
+
+function isLiteralList(v) {
+    if (v.type === "ArrayExpression") {
+        return true;
+    }
+    if (v.type !== "CallExpression" || v.callee.type !== "MemberExpression" || v.callee.computed
+        || v.callee.property.name !== "map") {
+        return false;
+    }
+    const source = v.callee.object;
+    if (source.type === "ArrayExpression") {
+        return true;
+    }
+    return source.type === "CallExpression" && source.callee.type === "MemberExpression"
+        && source.callee.object.type === "Identifier" && source.callee.object.name === "Object"
+        && ["entries", "keys", "values"].includes(source.callee.property.name);
+}
+
+// A link only an internal caller can resolve, so the public default is none.
+function docsSuffix(context) {
+    const url = context.options[0]?.docsUrl;
+    return url ? ` See ${url}.` : "";
+}

package/rules/require-leading-with-text-size.js

@@ -1,7 +1,11 @@
 const CLASS_FNS = new Set(["cn", "clsx", "cva", "classNames", "twMerge", "twJoin"]);
 const COLOR_RE = /^(#|rgba?\(|hsla?\(|oklch\(|oklab\(|lab\(|lch\(|color-mix\(|currentColor|transparent)/i;
-const LENGTH_RE = /(^|[\d.])(rem|px|em|ex|ch|vw|vh|vmin|vmax|pt|pc|%)\b|^(calc|clamp|min|max|var)\(|^[\d.]+$/;
-const TEXT_ARB_RE = /\btext-\[([^\]]+)\](\/\S+)?/g;
+const LENGTH_RE = /(^|[\d.])(rem|px|em|ex|ch|vw|vh|vmin|vmax|pt|pc|%)\b|^(calc|clamp|min|max)\(|^[\d.]+$/;
+// The type hints Tailwind resolves `text-` to a font size for. Any other hint names a color.
+const SIZE_HINT_RE = /^(length|percentage|absolute-size|relative-size):/;
+const HINT_RE = /^[a-z-]+:/;
+// `text-[...]`, or the `text-(...)` variable shorthand, with an optional `/leading` modifier.
+const TEXT_ARB_RE = /\btext-(?:\[([^\]]+)\]|\(([^)]+)\))(\/\S+)?/g;
 
 export default {
     meta: {
@@ -13,9 +17,9 @@ export default {
         schema: [{ type: "object", properties: { docsUrl: { type: "string" } }, additionalProperties: false }],
         messages: {
             needsLeading:
-                "`text-[{{value}}]` sets a font SIZE only, so line height comes from whatever ancestor " +
+                "`{{value}}` sets a font SIZE only, so line height comes from whatever ancestor " +
                 "set one - which differs between hosts and renders the same row at two heights. State it: " +
-                "`text-[{{value}}]/[<leading>]` or an explicit `leading-*`.{{docs}}",
+                "`{{value}}/[<leading>]` or an explicit `leading-*`.{{docs}}",
         },
     },
     create(context) {
@@ -29,10 +33,10 @@ export default {
             }
             for (const part of parts) {
                 for (const m of part.matchAll(TEXT_ARB_RE)) {
-                    if (m[2] || !isLength(m[1])) {
+                    if (m[3] || !isLength(m[1] ?? m[2])) {
                         continue;
                     }
-                    context.report({ node: node, messageId: "needsLeading", data: { value: m[1], docs: docs } });
+                    context.report({ node: node, messageId: "needsLeading", data: { value: m[0], docs: docs } });
                 }
             }
         };
@@ -74,7 +78,13 @@ function collectStrings(node, seen) {
 
 function isLength(value) {
     const v = value.trim();
-    if (COLOR_RE.test(v)) {
+    if (SIZE_HINT_RE.test(v)) {
+        return true;
+    }
+    // An unhinted variable is a COLOR: Tailwind reads `text-[var(--chart-2)]` and `text-(--chart-2)`
+    // as `color`. Calling it a size once got it "fixed" to `text-[var(--chart-2)]/[1.5]`, which
+    // compiles to a 150% color-mix - invalid, so the text silently lost its color.
+    if (HINT_RE.test(v) || v.startsWith("var(") || v.startsWith("--") || COLOR_RE.test(v)) {
         return false;
     }
     return LENGTH_RE.test(v);

package/ui.js

@@ -53,6 +53,7 @@ export const ui = [
         rules: {
             "mslmio/require-leading-with-text-size": "error",
             "mslmio/prefer-copy-icon": "error",
+            "mslmio/prefer-table-facets": "error",
         },
     },
 ];