@nxds/eslint-plugin 0.6.0 → 0.8.0

package/README.md

@@ -14,12 +14,16 @@ Requires `jsonc-eslint-parser`. Wired in the root `eslint.config.js` to target s
 
 Enforces the `nx:` Tailwind-class conventions from `.claude/rules/shadcn-divergences.md` on class strings (string + single-quasi template literals): correct prefix order (`nx:` before every modifier, not `hover:nx:…`), no banned `accent` token, complete semantic token paths (`-background` / `-foreground` / `-subtle`), and no raw primitive colors (`nx:bg-blue-500`). Ported from the former `.claude/hooks/lint-nx-prefix.mjs` so the checks run in `pnpm lint` and the pre-commit hook. Wired for `packages/react/src/**` and `apps/**` `.tsx`.
 
+Icons keep one size at every density, so the rule reports an icon sized from spacing. That is a numeric spacing step (`size-4`, `h-3`, `w-3`) or a value that reads a spacing variable, such as `size-[var(--nx-spacing-8)]`. It checks a variant whose subject is the `svg`, such as `[&_svg]:size-4` or `[&>svg:not(…)]:h-3`, and the `className` of an `Icon*` or `*Icon` JSX element. `has-[>svg]:size-8` and `[&:has(svg)]:size-9` size the box around the icon, so they pass. Use `size-icon-glyph-xs`, `-sm`, `-default`, `-lg` or `-xl`. They follow the UI scale. Stories are checked, because the docs pages copy their code. The docs app is not checked, and neither are Vue template `class` attributes.
+
 One check reads a whole class-string scope rather than a single literal: `nx:transition-colors` beside a ring-painting `focus-visible:outline-*` class fades the focus ring in, because Tailwind expands `transition-colors` to a list carrying `outline-color`. Only a width or a colour paints a ring, so `outline-none`, `outline-hidden`, `outline-0`, `outline-offset-*` and the style keywords (`outline-solid` / `dashed` / `dotted` / `double`) are exempt. Use `nx:transition-control` / `nx:transition-field` instead — see `/foundations/focus`.
 
 **What counts as one scope.** One class string; one call to `cva`, `cn`, `clsx` or `cx` — base, array elements and `variants` values together; or one `[…].join(' ')`, which collapses an array literal into a single attribute. That **over-approximates**: two sibling `variants` values of the same key are mutually exclusive and never share an element, and the rule reports the pair anyway. Over-reporting is the safe direction here, and the shape every field surface is written in — a base string plus a ring in a later array element — needs the call-wide scope to be caught at all.
 
 Two things fall outside a scope and pass: an array that is never joined, whose elements are per-item class strings; and a string that only meets the rest at a call site — a shared `const`, an argument handed to another function, or a callback body the enclosing call takes with it. The four composer names must be written plainly, and `join` is the one member expression the walk reads, on an array literal receiver — so an aliased or chained composer (`twMerge`, `utils.cn`, a renamed import, `[…].filter(Boolean).join(' ')`) is invisible to it. Specimen surfaces are exempt from this check: the docs pages under `apps/docs/app/_pages`, where a pairing is the subject of the prose. Stories and the rest of the docs app are checked.
 
+A second scope check covers icon line width. A class list that sizes `svg` children, such as `[&_svg]:size-…` or `[&>svg]:h-…`, must also include `nx:icon-stroke`, so every stroked icon draws the line for its size, from `--nx-icon-stroke-base` and `--nx-icon-stroke-ratio`. It must size them with a `size-icon-glyph-*` class, because `size-*`, `h-*` and `w-*` leave `--nx-icon-size` unset. Stories and the docs app are not checked.
+
 ### `@nxds/no-render-prop-types`
 
 Enforces `.claude/rules/composition-over-render-props.md`: component props must not be typed as render callbacks (`(...) => ReactNode`) or component references (`ComponentType` / `FC` / `ElementType`). Event-handler-named props (`on*`) are exempt. Use `children` / named `ReactNode` slots or per-mode components instead. Third-party-mandated shapes (e.g. recharts) opt out with a scoped `eslint-disable` + reason.
@@ -32,6 +36,22 @@ Enforces `.claude/rules/extract-inline-handlers.md`: inline JSX handler props (`
 
 Enforces `.claude/rules/code-comments.md`: JSDoc blocks must not carry `@default` or `@example` tags. The docs read prop defaults from code and usage from `docs` stories, so a tag is a second copy that can drift. Line comments and plain block comments are not checked. Wired in the root `eslint.config.js` for `packages/react/src` and `packages/vue/src`.
 
+### `@nxds/no-react-19-only`
+
+Reports React 19-only APIs in `packages/react`, the source `packages/react-18` is generated from. The generator adds `forwardRef` and changes nothing else, so a React 19-only call would compile there and then break on React 18. It reports:
+
+| Pattern                                                                                                   | Use instead                                             |
+| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+| `use`, `useActionState`, `useOptimistic`, `useEffectEvent`, `Activity`, `captureOwnerStack` from `react`  | An API React 18.3 has                                   |
+| `useFormStatus`, `requestFormReset`, `preload*`, `preinit*`, `preconnect`, `prefetchDNS` from `react-dom` | An API React 18.3 has                                   |
+| `<SomeContext value={…}>`                                                                                 | `<SomeContext.Provider value={…}>`                      |
+| A ref callback that returns a cleanup                                                                     | The node in state, with setup and teardown in an effect |
+| `useDeferredValue(value, initialValue)`                                                                   | One argument                                            |
+| A function passed to `action` or `formAction`                                                             | `onSubmit` or `onClick`                                 |
+| `<title>` outside an `<svg>`, `<meta>`, `<link>`, `<style precedence>`                                    | Metadata the app's framework renders                    |
+
+Wired in the root `eslint.config.js` for `packages/react/src` only. It is not in `nxdsComponentConfig`, because a React 19 app may use these APIs.
+
 ## Source of truth
 
 The token-layer rules are self-contained: the canonical step set is `src/canonical-step-set.json`. The component rules map 1:1 to the `.claude/rules/*.md` cited above — the rule code plus those docs are the spec. Every rule has RuleTester coverage in `__tests__/`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nxds/eslint-plugin",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "description": "ESLint rules that enforce nxds conventions in copied components.",
   "keywords": [

package/src/canonical-step-set.json

@@ -1,10 +1,14 @@
 {
   "$comment": "Union of every px value shipped across packages/core/tokens/semantic/spacing-{vega,lyra,maia,mira,nova,luma,sera}.json. Regenerate via `pnpm --filter @nxds/eslint-plugin refresh:canonical-set`. The shipped union may exceed the originally-intended scale; reconciliation tracked separately.",
   "values": [
-    0, 2, 4, 6, 8, 9, 10, 11, 12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 32,
-    34, 36, 38, 40, 42, 44, 46, 48, 52, 56, 60, 64, 68, 76, 80, 84, 92, 96, 100,
-    108, 112, 116, 120, 124, 128, 132, 140, 144, 148, 156, 160, 164, 172, 176,
-    180, 188, 192, 196, 204, 208, 210, 212, 220, 224, 228, 236, 240, 244, 252,
-    256, 260, 284, 288, 292, 316, 320, 324, 380, 384, 388
+    0, 2, 4, 6, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 23, 24, 25,
+    26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62,
+    64, 66, 68, 70, 76, 78, 80, 82, 84, 86, 92, 94, 96, 98, 100, 102, 108, 110,
+    112, 114, 116, 118, 124, 126, 128, 130, 132, 134, 140, 142, 144, 146, 148,
+    150, 156, 158, 160, 162, 164, 166, 172, 174, 176, 178, 180, 182, 188, 190,
+    192, 194, 196, 198, 204, 206, 208, 210, 212, 214, 220, 222, 224, 226, 228,
+    230, 236, 238, 240, 242, 244, 246, 252, 254, 256, 258, 260, 262, 284, 286,
+    288, 290, 292, 294, 316, 318, 320, 322, 324, 326, 380, 382, 384, 386, 388,
+    390
   ]
 }

package/src/index.js

@@ -3,6 +3,7 @@ import { createRequire } from 'node:module';
 import canonicalSpacingSteps from './rules/canonical-spacing-steps.js';
 import noJsdocDataTags from './rules/no-jsdoc-data-tags.js';
 import noMultiStatementJsxHandler from './rules/no-multi-statement-jsx-handler.js';
+import noReact19Only from './rules/no-react-19-only.js';
 import noRenderPropTypes from './rules/no-render-prop-types.js';
 import nxClassConventions from './rules/nx-class-conventions.js';
 
@@ -18,6 +19,7 @@ const plugin = {
     'no-render-prop-types': noRenderPropTypes,
     'no-multi-statement-jsx-handler': noMultiStatementJsxHandler,
     'no-jsdoc-data-tags': noJsdocDataTags,
+    'no-react-19-only': noReact19Only,
   },
 };
 

package/src/rules/no-react-19-only.js

@@ -0,0 +1,280 @@
+// `packages/react-18` is generated from `packages/react` by wrapping each
+// component in `forwardRef`, and nothing else changes. So `packages/react`
+// must not use anything React 18 lacks: the generated copy would compile and
+// then break at runtime. This rule reports the React 19-only APIs and
+// behaviours an nxds component could reach for.
+
+const REACT_ONLY_19 = new Set([
+  'use',
+  'useActionState',
+  'useOptimistic',
+  'useEffectEvent',
+  'Activity',
+  'captureOwnerStack',
+  'cache',
+  'cacheSignal',
+]);
+
+const REACT_DOM_ONLY_19 = new Set([
+  'useFormStatus',
+  'requestFormReset',
+  'preload',
+  'preloadModule',
+  'preinit',
+  'preinitModule',
+  'preconnect',
+  'prefetchDNS',
+]);
+
+const ONLY_19_BY_SOURCE = {
+  react: REACT_ONLY_19,
+  'react-dom': REACT_DOM_ONLY_19,
+};
+
+const FUNCTION_TYPES = new Set([
+  'ArrowFunctionExpression',
+  'FunctionExpression',
+  'FunctionDeclaration',
+]);
+
+function isFunction(node) {
+  return node != null && FUNCTION_TYPES.has(node.type);
+}
+
+/** Whether `fn` returns a function from its own body, not a nested one. */
+function returnsFunction(fn) {
+  if (
+    fn.type === 'ArrowFunctionExpression' &&
+    fn.body.type !== 'BlockStatement'
+  ) {
+    return isFunction(fn.body);
+  }
+  let found = false;
+  const visit = (node) => {
+    if (found || node == null || typeof node.type !== 'string') return;
+    if (node.type === 'ReturnStatement') {
+      if (isFunction(node.argument)) found = true;
+      return;
+    }
+    if (isFunction(node)) return;
+    for (const [key, value] of Object.entries(node)) {
+      if (key === 'parent') continue;
+      if (Array.isArray(value)) value.forEach(visit);
+      else if (value && typeof value === 'object') visit(value);
+    }
+  };
+  visit(fn.body);
+  return found;
+}
+
+/** The name a call's callee ends in: `useCallback` for `React.useCallback`. */
+function calleeName(call) {
+  const { callee } = call;
+  if (callee.type === 'Identifier') return callee.name;
+  if (
+    callee.type === 'MemberExpression' &&
+    callee.property.type === 'Identifier'
+  ) {
+    return callee.property.name;
+  }
+  return null;
+}
+
+/** The function an identifier names, when it is declared in reach. */
+function functionNamed(context, identifier) {
+  const scope = context.sourceCode.getScope(identifier);
+  let variable = null;
+  for (let current = scope; current && !variable; current = current.upper) {
+    variable = current.set.get(identifier.name) ?? null;
+  }
+  const definition = variable?.defs[0];
+  if (!definition) return null;
+  if (definition.node.type === 'FunctionDeclaration') return definition.node;
+  if (definition.node.type !== 'VariableDeclarator') return null;
+  const init = definition.node.init;
+  if (isFunction(init)) return init;
+  if (init?.type === 'CallExpression' && calleeName(init) === 'useCallback') {
+    return isFunction(init.arguments[0]) ? init.arguments[0] : null;
+  }
+  return null;
+}
+
+function expressionFunction(context, expression) {
+  if (isFunction(expression)) return expression;
+  if (expression.type === 'Identifier')
+    return functionNamed(context, expression);
+  return null;
+}
+
+function attributeExpression(attribute) {
+  const { value } = attribute;
+  return value?.type === 'JSXExpressionContainer' ? value.expression : null;
+}
+
+function hasAncestorElement(node, name) {
+  for (let current = node.parent; current; current = current.parent) {
+    if (
+      current.type === 'JSXElement' &&
+      current.openingElement.name.type === 'JSXIdentifier' &&
+      current.openingElement.name.name === name
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow React 19-only APIs in source that packages/react-18 is generated from.',
+    },
+    schema: [],
+    messages: {
+      api: '`{{name}}` is React 19 only, so the generated packages/react-18 breaks. Use an API React 18.3 has.',
+      contextProvider:
+        'Rendering a context as a provider is React 19 only. Render `<{{name}}.Provider value={…}>`.',
+      refCleanup:
+        'A ref callback that returns a cleanup is React 18-incompatible: React 18 ignores the cleanup and calls the ref with `null`. Keep the node in state and set up and tear down in an effect.',
+      deferredInitialValue:
+        "`useDeferredValue`'s initial value is React 19 only. Pass one argument.",
+      formAction:
+        'A function `{{name}}` is React 19 only. Handle the form in `onSubmit` or the button in `onClick`.',
+      documentMetadata:
+        '`<{{name}}>` is hoisted into the document head by React 19 only. React 18 renders it in place.',
+    },
+  },
+  create(context) {
+    // Local names bound to the `react` / `react-dom` namespace or default import.
+    const namespaces = new Map();
+    const contexts = new Set();
+
+    function reportMember(node, source, name) {
+      if (ONLY_19_BY_SOURCE[source]?.has(name)) {
+        context.report({ node, messageId: 'api', data: { name } });
+      }
+    }
+
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value;
+        if (!(source in ONLY_19_BY_SOURCE)) return;
+        for (const specifier of node.specifiers) {
+          if (specifier.type === 'ImportSpecifier') {
+            const imported =
+              specifier.imported.name ?? specifier.imported.value;
+            reportMember(specifier, source, imported);
+          } else {
+            namespaces.set(specifier.local.name, source);
+          }
+        }
+      },
+
+      MemberExpression(node) {
+        if (
+          node.object.type !== 'Identifier' ||
+          node.property.type !== 'Identifier'
+        ) {
+          return;
+        }
+        const source = namespaces.get(node.object.name);
+        if (source) reportMember(node.property, source, node.property.name);
+      },
+
+      JSXMemberExpression(node) {
+        if (node.object.type !== 'JSXIdentifier') return;
+        const source = namespaces.get(node.object.name);
+        if (source) reportMember(node.property, source, node.property.name);
+      },
+
+      VariableDeclarator(node) {
+        if (
+          node.id.type === 'Identifier' &&
+          node.init?.type === 'CallExpression' &&
+          calleeName(node.init) === 'createContext'
+        ) {
+          contexts.add(node.id.name);
+        }
+      },
+
+      CallExpression(node) {
+        if (
+          calleeName(node) === 'useDeferredValue' &&
+          node.arguments.length > 1
+        ) {
+          context.report({ node, messageId: 'deferredInitialValue' });
+        }
+      },
+
+      JSXOpeningElement(node) {
+        if (node.name.type !== 'JSXIdentifier') return;
+        const { name } = node.name;
+        const attributes = node.attributes.filter(
+          (attribute) => attribute.type === 'JSXAttribute'
+        );
+
+        const isContext = contexts.has(name) || /^[A-Z]\w*Context$/.test(name);
+        if (
+          isContext &&
+          attributes.some((attribute) => attribute.name.name === 'value')
+        ) {
+          context.report({
+            node,
+            messageId: 'contextProvider',
+            data: { name },
+          });
+        }
+
+        if (name === 'meta' || name === 'link') {
+          context.report({
+            node,
+            messageId: 'documentMetadata',
+            data: { name },
+          });
+        }
+        if (name === 'title' && !hasAncestorElement(node.parent, 'svg')) {
+          context.report({
+            node,
+            messageId: 'documentMetadata',
+            data: { name },
+          });
+        }
+        if (
+          name === 'style' &&
+          attributes.some((attribute) => attribute.name.name === 'precedence')
+        ) {
+          context.report({
+            node,
+            messageId: 'documentMetadata',
+            data: { name },
+          });
+        }
+
+        for (const attribute of attributes) {
+          const attributeName = attribute.name.name;
+          const expression = attributeExpression(attribute);
+          if (!expression) continue;
+
+          if (attributeName === 'ref') {
+            const fn = expressionFunction(context, expression);
+            if (fn && returnsFunction(fn)) {
+              context.report({ node: attribute, messageId: 'refCleanup' });
+            }
+          }
+          if (
+            (attributeName === 'action' || attributeName === 'formAction') &&
+            expressionFunction(context, expression)
+          ) {
+            context.report({
+              node: attribute,
+              messageId: 'formAction',
+              data: { name: attributeName },
+            });
+          }
+        }
+      },
+    };
+  },
+};

package/src/rules/nx-class-conventions.js

@@ -35,6 +35,88 @@ export const RAW_LETTER_SPACINGS = [
   'widest',
 ];
 
+// A size from spacing follows density: a numeric spacing step (`size-4`), or an
+// arbitrary value that reads a spacing variable
+// (`size-[var(--nx-spacing-8)]`, `size-(--nx-spacing-8)`). Glyph tokens
+// (`size-icon-glyph-sm`) and other arbitrary values (`size-[24px]`) do not.
+// A leading `!` is Tailwind's important modifier.
+const SPACING_SIZE = /^!?(?:size|h|w)-(?:\d|[[(].*--nx-spacing-)/;
+
+// Any size utility: a spacing step, a glyph token or an arbitrary value.
+const ANY_SIZE = /^!?(?:size|h|w)-/;
+
+// A fixed size that leaves `--nx-icon-size` unset, such as `size-[24px]`. A size
+// from spacing reports `densityIconSize` instead.
+const PLAIN_SIZE = /^!?(?:size|h|w)-(?!icon-glyph-|\d|[[(].*--nx-spacing-)/;
+
+// An `Icon*` or `*Icon` JSX element, such as `IconX` or `CheckIcon`.
+const ICON_ELEMENT_NAME = /^Icon(?![a-z])|Icon$/;
+
+/** The `nx:` classes in a class string. */
+function nxClasses(raw) {
+  return raw.split(/\s+/).filter((token) => token.startsWith('nx:'));
+}
+
+/** Splits a class at the `:` separators outside `[…]` and `(…)`. */
+function splitVariants(className) {
+  const parts = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < className.length; i++) {
+    const char = className[i];
+    if (char === '[' || char === '(') depth++;
+    else if (char === ']' || char === ')') depth--;
+    else if (char === ':' && depth === 0) {
+      parts.push(className.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(className.slice(start));
+  return parts;
+}
+
+/** A selector without its `[…]` and `(…)` groups. */
+function withoutGroups(selector) {
+  let depth = 0;
+  let kept = '';
+  for (const char of selector) {
+    if (char === '[' || char === '(') depth++;
+    else if (char === ']' || char === ')') depth--;
+    else if (depth === 0) kept += char;
+  }
+  return kept;
+}
+
+// An arbitrary variant whose subject is the `svg`, such as `[&_svg]` or
+// `[&>svg:not(…)]`. In `has-[>svg]` and `[&:has(svg)]` the subject is the box
+// around the icon.
+function selectsSvg(variant) {
+  if (!variant.startsWith('[') || !variant.endsWith(']')) return false;
+  const compounds = withoutGroups(variant.slice(1, -1)).split(/[_>+~]/);
+  return /^svg(?![\w-])/.test(compounds.at(-1));
+}
+
+/** Whether an `nx:` class sizes an `svg` with a utility that `size` matches. */
+function sizesSvg(token, size) {
+  const variants = splitVariants(token.slice('nx:'.length));
+  const utility = variants.pop();
+  return size.test(utility) && variants.some(selectsSvg);
+}
+
+function sizesSvgFromSpacing(raw) {
+  return nxClasses(raw).some((token) => sizesSvg(token, SPACING_SIZE));
+}
+
+function sizesFromSpacing(raw) {
+  return nxClasses(raw).some((token) =>
+    SPACING_SIZE.test(splitVariants(token).at(-1))
+  );
+}
+
+function isIconElement(name) {
+  return name.type === 'JSXIdentifier' && ICON_ELEMENT_NAME.test(name.name);
+}
+
 const NAMED_VARIANT = String.raw`@?[\w-]+(?:\[[^\s]+?\])?(?:\/[\w-]+)?:`;
 const ARBITRARY_VARIANT = String.raw`\[[^\s]+?\]:`;
 const CHILD_VARIANT = String.raw`\*{1,2}:`;
@@ -72,21 +154,27 @@ const CHECKS = [
     re: new RegExp(
       `nx:${NX_MODIFIER_CHAIN}font-(?:${RAW_FONT_WEIGHTS.join('|')})\\b`
     ),
-    runtimeOnly: true,
+    skipFile: isExampleFile,
   },
   {
     messageId: 'rawLineHeight',
     re: new RegExp(
       `nx:${NX_MODIFIER_CHAIN}leading-(?:${RAW_LINE_HEIGHTS.join('|')}|\\d+|\\[)`
     ),
-    runtimeOnly: true,
+    skipFile: isExampleFile,
+  },
+  {
+    messageId: 'densityIconSize',
+    test: sizesSvgFromSpacing,
+    // Stories are checked: the docs pages copy their code into apps.
+    skipFile: isDocsFile,
   },
   {
     messageId: 'rawLetterSpacing',
     re: new RegExp(
       `nx:${NX_MODIFIER_CHAIN}tracking-(?:${RAW_LETTER_SPACINGS.join('|')}|\\[)`
     ),
-    runtimeOnly: true,
+    skipFile: isExampleFile,
   },
 ];
 
@@ -105,6 +193,27 @@ function fadesItsFocusRing(scope) {
   );
 }
 
+// A class list that sizes its `svg` children draws the icon, so it sets the
+// icon's line with `nx:icon-stroke` too.
+function leavesIconUnstroked(scope) {
+  const classes = nxClasses(scope);
+  if (classes.includes('nx:icon-stroke')) return false;
+  return classes.some((token) => sizesSvg(token, ANY_SIZE));
+}
+
+// `size-icon-glyph-*` sets `--nx-icon-size`, the size the line is drawn for. Any
+// other size must set the variable itself, under the same variants.
+function sizesIconWithoutLine(scope) {
+  const classes = nxClasses(scope);
+  return classes.some((token) => {
+    if (!sizesSvg(token, PLAIN_SIZE)) return false;
+    const variants = splitVariants(token).slice(0, -1).join(':');
+    return !classes.some((other) =>
+      other.startsWith(`${variants}:[--nx-icon-size:`)
+    );
+  });
+}
+
 function isStoryFile(filename) {
   return /\.stories\.[jt]sx?$/.test(filename);
 }
@@ -113,8 +222,9 @@ function isDocsFile(filename) {
   return /(?:^|[/\\])apps[/\\]docs[/\\]/.test(filename);
 }
 
-// What the runtime-only checks skip: stories and the docs app quote utilities
-// as specimens and prose, and the docs app styles its own chrome off-system.
+// What the raw typography and stroke checks skip: stories and the docs app
+// quote utilities as specimens and prose, and the docs app styles its own
+// chrome off-system.
 function isExampleFile(filename) {
   return isStoryFile(filename) || isDocsFile(filename);
 }
@@ -129,14 +239,14 @@ function isDocsSpecimenPage(filename) {
 const RAW_TYPOGRAPHY_EXCEPTIONS = [
   {
     filename:
-      /(?:^|[/\\])packages[/\\]react[/\\]src[/\\]components[/\\]avatar[/\\]avatar\.tsx$/,
+      /(?:^|[/\\])packages[/\\]react(?:-18)?[/\\]src[/\\]components[/\\]avatar[/\\]avatar\.tsx$/,
     className:
       'nx:flex nx:size-full nx:items-center nx:justify-center nx:rounded-[inherit] nx:bg-muted nx:text-foreground nx:font-medium nx:leading-none',
     messageIds: new Set(['rawFontWeight', 'rawLineHeight']),
   },
   {
     filename:
-      /(?:^|[/\\])packages[/\\]react[/\\]src[/\\]components[/\\]chart[/\\]chart\.tsx$/,
+      /(?:^|[/\\])packages[/\\]react(?:-18)?[/\\]src[/\\]components[/\\]chart[/\\]chart\.tsx$/,
     className: 'nx:text-foreground nx:font-mono nx:font-medium nx:tabular-nums',
     messageIds: new Set(['rawFontWeight']),
   },
@@ -157,10 +267,7 @@ function isRawTypographyException(check, filename, raw) {
 }
 
 function shouldRunCheck(check, filename, raw) {
-  if (!check.runtimeOnly) {
-    return true;
-  }
-  if (isExampleFile(filename)) {
+  if (check.skipFile?.(filename)) {
     return false;
   }
   return !isRawTypographyException(check, filename, raw);
@@ -169,12 +276,12 @@ function shouldRunCheck(check, filename, raw) {
 function matchedMessageIds(raw, filename) {
   const matched = new Set();
   for (const check of CHECKS) {
-    const { messageId, re } = check;
     if (!shouldRunCheck(check, filename, raw)) {
       continue;
     }
-    if (re.test(raw)) {
-      matched.add(messageId);
+    const matches = check.test ? check.test(raw) : check.re.test(raw);
+    if (matches) {
+      matched.add(check.messageId);
     }
   }
   return matched;
@@ -255,7 +362,7 @@ export default {
     type: 'problem',
     docs: {
       description:
-        'Enforce nx: Tailwind class conventions — correct prefix order, no banned `accent` token, complete semantic token paths, no raw primitive colors, no raw named font-size utilities, and no ring-fading `transition-colors` on a focus-ring surface.',
+        'Enforce nx: Tailwind class conventions — correct prefix order, no banned `accent` token, complete semantic token paths, no raw primitive colors, no raw named font-size utilities, no icon sized from spacing, no ring-fading `transition-colors` on a focus-ring surface, and no sized `svg` children without `nx:icon-stroke`.',
     },
     schema: [],
     messages: {
@@ -275,8 +382,14 @@ export default {
         'Raw Tailwind line-height utility — let a typography composite own line-height instead of `nx:leading-*`.',
       rawLetterSpacing:
         'Raw Tailwind letter-spacing utility — use a typography composite such as `nx:typography-label-caps` instead of `nx:tracking-*`.',
+      densityIconSize:
+        'Icon size from spacing — a numeric `size-*`, `h-*` or `w-*`, or one that reads a `--nx-spacing-*` variable, on an `svg` selector (`[&_svg]:size-4`) or on an `Icon*` / `*Icon` element follows density. Use `size-icon-glyph-xs`, `-sm`, `-default`, `-lg` or `-xl` (12, 14, 16, 24 or 32px at the Default UI scale).',
       ringFadingTransition:
         'Ring-fading transition — `nx:transition-colors` includes `outline-color`, so this focus ring fades in instead of landing with the keypress. Use `nx:transition-control` (or `nx:transition-field` on a field surface).',
+      unstrokedIcon:
+        'Unstroked icon — this class list sizes its `svg` children (`[&_svg]:size-icon-glyph-default`), so add `nx:icon-stroke` to draw stroked icons at the icon line width.',
+      plainIconSize:
+        'Plain icon size — size `svg` children with a `size-icon-glyph-*` class, so the line matches the icon. `size-*`, `h-*` and `w-*` leave `--nx-icon-size` unset, so set it on the same selector for a size off the scale.',
     },
   },
   create(context) {
@@ -290,14 +403,22 @@ export default {
     }
 
     function reportScope(node) {
-      if (isDocsSpecimenPage(filename) || isInsideClassCall(node)) {
+      if (isInsideClassCall(node)) {
         return;
       }
       const collected = [];
       collectClassStrings(node, visitorKeys, collected);
-      if (fadesItsFocusRing(collected.join(' '))) {
+      const scope = collected.join(' ');
+      if (!isDocsSpecimenPage(filename) && fadesItsFocusRing(scope)) {
         context.report({ node, messageId: 'ringFadingTransition' });
       }
+      if (isExampleFile(filename)) return;
+      if (leavesIconUnstroked(scope)) {
+        context.report({ node, messageId: 'unstrokedIcon' });
+      }
+      if (sizesIconWithoutLine(scope)) {
+        context.report({ node, messageId: 'plainIconSize' });
+      }
     }
 
     return {
@@ -327,6 +448,24 @@ export default {
         }
         reportScope(node);
       },
+      JSXOpeningElement(node) {
+        if (isDocsFile(filename) || !isIconElement(node.name)) {
+          return;
+        }
+        const className = node.attributes.find(
+          (attribute) =>
+            attribute.type === 'JSXAttribute' &&
+            attribute.name.name === 'className'
+        );
+        if (!className?.value) {
+          return;
+        }
+        const collected = [];
+        collectClassStrings(className.value, visitorKeys, collected);
+        if (collected.some(sizesFromSpacing)) {
+          context.report({ node: className, messageId: 'densityIconSize' });
+        }
+      },
     };
   },
 };