stablekit.ts 0.6.1 → 0.6.2

package/dist/stylelint.cjs

@@ -27,6 +27,7 @@ var pluginRuleName = "stablekit/no-functional-in-utility";
 var descendantColorRuleName = "stablekit/no-descendant-color-in-state";
 var duplicateRulesetRuleName = "stablekit/no-duplicate-ruleset";
 var nearDuplicateRuleName = "stablekit/no-near-duplicate-ruleset";
+var undefinedTokenRuleName = "stablekit/no-undefined-token";
 function createFunctionalTokenPlugin(prefixes) {
   const rule = (enabled) => {
     return (root, result) => {
@@ -178,13 +179,53 @@ function createNearDuplicatePlugin() {
     rule
   };
 }
+function createUndefinedTokenPlugin(runtimePrefixes) {
+  const varPattern = /var\(--([a-zA-Z0-9_-]+)/g;
+  const rule = (enabled) => {
+    return (root, result) => {
+      if (!enabled) return;
+      const defined = /* @__PURE__ */ new Set();
+      root.walkDecls((decl) => {
+        if (decl.prop.startsWith("--")) {
+          defined.add(decl.prop);
+        }
+      });
+      root.walkAtRules("theme", (atRule) => {
+        atRule.walkDecls((decl) => {
+          if (decl.prop.startsWith("--")) {
+            defined.add(decl.prop);
+          }
+        });
+      });
+      root.walkDecls((decl) => {
+        if (decl.prop.startsWith("--")) return;
+        let match;
+        varPattern.lastIndex = 0;
+        while ((match = varPattern.exec(decl.value)) !== null) {
+          const name = `--${match[1]}`;
+          if (defined.has(name)) continue;
+          if (runtimePrefixes.some((p) => name.startsWith(p))) continue;
+          result.warn(
+            `Reference to undefined custom property "${name}". This token is not defined anywhere in this file.`,
+            { node: decl }
+          );
+        }
+      });
+    };
+  };
+  return {
+    ruleName: undefinedTokenRuleName,
+    rule
+  };
+}
 function createStyleLint(options = {}) {
   const {
     ignoreTypes = ["html", "body"],
     functionalTokens = [],
+    runtimeTokens = [],
     files = ["src/**/*.css"]
   } = options;
-  const plugins = [createDescendantColorPlugin(), createDuplicateRulesetPlugin(), createNearDuplicatePlugin()];
+  const plugins = [createDescendantColorPlugin(), createDuplicateRulesetPlugin(), createNearDuplicatePlugin(), createUndefinedTokenPlugin(runtimeTokens)];
   if (functionalTokens.length > 0) {
     plugins.push(createFunctionalTokenPlugin(functionalTokens));
   }
@@ -204,6 +245,8 @@ function createStyleLint(options = {}) {
     [duplicateRulesetRuleName]: true,
     // Flag near-duplicate rulesets (same props, differ by 1 value).
     [nearDuplicateRuleName]: true,
+    // Flag var() references to custom properties not defined in this file.
+    [undefinedTokenRuleName]: true,
     // Ban animating layout properties — causes reflow on every frame.
     // Use transform (scaleY, translateY) or opacity instead.
     "declaration-property-value-disallowed-list": [

package/dist/stylelint.d.cts

@@ -40,6 +40,11 @@ interface StyleLintOptions {
      *  e.g. ["--color-status-", "--color-danger"]
      *  Any var() referencing these inside @utility is a lint error. */
     functionalTokens?: string[];
+    /** Custom property prefixes set at runtime (JS, Radix, inline styles)
+     *  that should not be flagged as undefined.
+     *  e.g. ["--radix-", "--bar-"]
+     *  @default [] */
+    runtimeTokens?: string[];
     /** Glob patterns for files to lint.
      *  @default ["src/**\/*.css"] */
     files?: string[];

package/dist/stylelint.d.ts

@@ -40,6 +40,11 @@ interface StyleLintOptions {
      *  e.g. ["--color-status-", "--color-danger"]
      *  Any var() referencing these inside @utility is a lint error. */
     functionalTokens?: string[];
+    /** Custom property prefixes set at runtime (JS, Radix, inline styles)
+     *  that should not be flagged as undefined.
+     *  e.g. ["--radix-", "--bar-"]
+     *  @default [] */
+    runtimeTokens?: string[];
     /** Glob patterns for files to lint.
      *  @default ["src/**\/*.css"] */
     files?: string[];

package/dist/stylelint.js

@@ -3,6 +3,7 @@ var pluginRuleName = "stablekit/no-functional-in-utility";
 var descendantColorRuleName = "stablekit/no-descendant-color-in-state";
 var duplicateRulesetRuleName = "stablekit/no-duplicate-ruleset";
 var nearDuplicateRuleName = "stablekit/no-near-duplicate-ruleset";
+var undefinedTokenRuleName = "stablekit/no-undefined-token";
 function createFunctionalTokenPlugin(prefixes) {
   const rule = (enabled) => {
     return (root, result) => {
@@ -154,13 +155,53 @@ function createNearDuplicatePlugin() {
     rule
   };
 }
+function createUndefinedTokenPlugin(runtimePrefixes) {
+  const varPattern = /var\(--([a-zA-Z0-9_-]+)/g;
+  const rule = (enabled) => {
+    return (root, result) => {
+      if (!enabled) return;
+      const defined = /* @__PURE__ */ new Set();
+      root.walkDecls((decl) => {
+        if (decl.prop.startsWith("--")) {
+          defined.add(decl.prop);
+        }
+      });
+      root.walkAtRules("theme", (atRule) => {
+        atRule.walkDecls((decl) => {
+          if (decl.prop.startsWith("--")) {
+            defined.add(decl.prop);
+          }
+        });
+      });
+      root.walkDecls((decl) => {
+        if (decl.prop.startsWith("--")) return;
+        let match;
+        varPattern.lastIndex = 0;
+        while ((match = varPattern.exec(decl.value)) !== null) {
+          const name = `--${match[1]}`;
+          if (defined.has(name)) continue;
+          if (runtimePrefixes.some((p) => name.startsWith(p))) continue;
+          result.warn(
+            `Reference to undefined custom property "${name}". This token is not defined anywhere in this file.`,
+            { node: decl }
+          );
+        }
+      });
+    };
+  };
+  return {
+    ruleName: undefinedTokenRuleName,
+    rule
+  };
+}
 function createStyleLint(options = {}) {
   const {
     ignoreTypes = ["html", "body"],
     functionalTokens = [],
+    runtimeTokens = [],
     files = ["src/**/*.css"]
   } = options;
-  const plugins = [createDescendantColorPlugin(), createDuplicateRulesetPlugin(), createNearDuplicatePlugin()];
+  const plugins = [createDescendantColorPlugin(), createDuplicateRulesetPlugin(), createNearDuplicatePlugin(), createUndefinedTokenPlugin(runtimeTokens)];
   if (functionalTokens.length > 0) {
     plugins.push(createFunctionalTokenPlugin(functionalTokens));
   }
@@ -180,6 +221,8 @@ function createStyleLint(options = {}) {
     [duplicateRulesetRuleName]: true,
     // Flag near-duplicate rulesets (same props, differ by 1 value).
     [nearDuplicateRuleName]: true,
+    // Flag var() references to custom properties not defined in this file.
+    [undefinedTokenRuleName]: true,
     // Ban animating layout properties — causes reflow on every frame.
     // Use transform (scaleY, translateY) or opacity instead.
     "declaration-property-value-disallowed-list": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stablekit.ts",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "React toolkit for layout stability — zero-shift components for loading states, content swaps, and spatial containers.",
   "type": "module",
   "main": "./dist/index.cjs",