stablekit.ts 0.5.2 → 0.5.3

package/dist/stylelint.cjs

@@ -51,14 +51,17 @@ function createFunctionalTokenPlugin(prefixes) {
 function createDescendantColorPlugin() {
   const dataAttrWithDescendant = /\[data-[^\]]+\]\s+[.#\w]/;
   const colorApplyPattern = /\btext-(?!xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl|left|right|center|justify|wrap|nowrap|ellipsis|clip|truncate)\w/;
-  const message = `Setting color on a descendant inside a data-attribute selector. Set color on the [data-*] container and let children inherit via currentColor.`;
+  const message = `Visual property on a descendant inside a data-attribute selector. Set visual properties on the [data-*] container and let children inherit via currentColor.`;
   const rule = (enabled) => {
     return (root, result) => {
       if (!enabled) return;
       root.walkRules((ruleNode) => {
         if (!dataAttrWithDescendant.test(ruleNode.selector)) return;
-        ruleNode.walkDecls("color", (decl) => {
-          result.warn(message, { node: decl });
+        const visualProps = /^(color|background|background-color|border-color|outline-color|fill|stroke|opacity|box-shadow|text-shadow)$/;
+        ruleNode.walkDecls((decl) => {
+          if (visualProps.test(decl.prop)) {
+            result.warn(message, { node: decl });
+          }
         });
         ruleNode.walkAtRules("apply", (atRule) => {
           if (colorApplyPattern.test(atRule.params)) {

package/dist/stylelint.d.cts

@@ -18,9 +18,10 @@
  *    in scoped selectors like `.badge[data-status="paid"]`, not in
  *    utilities that can spread via @apply or className.
  *
- * 4. Don't set color on descendants inside data-attribute selectors.
+ * 4. Don't set visual properties on descendants inside data-attribute selectors.
  *    `.card[data-status="error"] .icon { color: red }` is wrong —
  *    set color on the container and let children inherit via currentColor.
+ *    Also catches background, border-color, opacity, box-shadow, etc.
  *
  * 5. Don't animate layout properties (width, height, margin, padding,
  *    top/right/bottom/left). These trigger reflow on every frame.

package/dist/stylelint.d.ts

@@ -18,9 +18,10 @@
  *    in scoped selectors like `.badge[data-status="paid"]`, not in
  *    utilities that can spread via @apply or className.
  *
- * 4. Don't set color on descendants inside data-attribute selectors.
+ * 4. Don't set visual properties on descendants inside data-attribute selectors.
  *    `.card[data-status="error"] .icon { color: red }` is wrong —
  *    set color on the container and let children inherit via currentColor.
+ *    Also catches background, border-color, opacity, box-shadow, etc.
  *
  * 5. Don't animate layout properties (width, height, margin, padding,
  *    top/right/bottom/left). These trigger reflow on every frame.

package/dist/stylelint.js

@@ -27,14 +27,17 @@ function createFunctionalTokenPlugin(prefixes) {
 function createDescendantColorPlugin() {
   const dataAttrWithDescendant = /\[data-[^\]]+\]\s+[.#\w]/;
   const colorApplyPattern = /\btext-(?!xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl|left|right|center|justify|wrap|nowrap|ellipsis|clip|truncate)\w/;
-  const message = `Setting color on a descendant inside a data-attribute selector. Set color on the [data-*] container and let children inherit via currentColor.`;
+  const message = `Visual property on a descendant inside a data-attribute selector. Set visual properties on the [data-*] container and let children inherit via currentColor.`;
   const rule = (enabled) => {
     return (root, result) => {
       if (!enabled) return;
       root.walkRules((ruleNode) => {
         if (!dataAttrWithDescendant.test(ruleNode.selector)) return;
-        ruleNode.walkDecls("color", (decl) => {
-          result.warn(message, { node: decl });
+        const visualProps = /^(color|background|background-color|border-color|outline-color|fill|stroke|opacity|box-shadow|text-shadow)$/;
+        ruleNode.walkDecls((decl) => {
+          if (visualProps.test(decl.prop)) {
+            result.warn(message, { node: decl });
+          }
         });
         ruleNode.walkAtRules("apply", (atRule) => {
           if (colorApplyPattern.test(atRule.params)) {

package/package.json

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