@telegraph/postcss-config 0.0.31 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @telegraph/postcss-config
 
+## 0.1.0
+
+### Minor Changes
+
+- [#714](https://github.com/knocklabs/telegraph/pull/714) [`627e61c`](https://github.com/knocklabs/telegraph/commit/627e61c3b17ccfc36f5fb835bb5f21a092efca95) Thanks [@kylemcd](https://github.com/kylemcd)! - feat: hover, focus, etc states as component props
+
 ## 0.0.31
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { default as styleEnginePostCssConfig } from "./style-engine-postcss-config";
+export { default as interactivePlugin } from "./interactive-plugin";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.styleEnginePostCssConfig = void 0;
+exports.interactivePlugin = exports.styleEnginePostCssConfig = void 0;
 var style_engine_postcss_config_1 = require("./style-engine-postcss-config");
 Object.defineProperty(exports, "styleEnginePostCssConfig", { enumerable: true, get: function () { return __importDefault(style_engine_postcss_config_1).default; } });
+var interactive_plugin_1 = require("./interactive-plugin");
+Object.defineProperty(exports, "interactivePlugin", { enumerable: true, get: function () { return __importDefault(interactive_plugin_1).default; } });

package/dist/interactive-plugin.d.ts

@@ -0,0 +1,29 @@
+import type { AcceptedPlugin } from "postcss";
+/**
+ * PostCSS plugin: @telegraph/interactive
+ *
+ * Processes `@telegraph interactive(<selector>)` at-rules and auto-generates
+ * pseudo-class cascade rules based on the base rule's declarations.
+ *
+ * Input:
+ *   .tgph-box {
+ *     --background-color: none;
+ *     background-color: var(--background-color);
+ *     border-color: var(--border-color);
+ *   }
+ *   @telegraph interactive(.tgph-box);
+ *
+ * Output (appended):
+ *   .tgph-box--interactive:hover {
+ *     background-color: var(--hover--background-color, var(--background-color));
+ *     border-color: var(--hover--border-color, var(--border-color));
+ *   }
+ *   .tgph-box--interactive:focus-visible { ... }
+ *   .tgph-box--interactive:active { ... }
+ *   .tgph-box--interactive:has(:focus-within) { ... }
+ *   .tgph-box--interactive:disabled,
+ *   .tgph-box--interactive[aria-disabled="true"] { ... }
+ */
+declare const interactivePlugin: () => AcceptedPlugin;
+export default interactivePlugin;
+//# sourceMappingURL=interactive-plugin.d.ts.map

package/dist/interactive-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive-plugin.d.ts","sourceRoot":"","sources":["../src/interactive-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAA6B,MAAM,SAAS,CAAC;AAoFzE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,iBAAiB,QAAO,cA6E7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/interactive-plugin.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Mapping from pseudo-state names to the CSS variable prefix used in
+ * the cascade-fallback pattern.
+ *
+ * This must stay in sync with PSEUDO_CSS_PREFIX in
+ * packages/style-engine/src/helpers/getStyleProp/getStyleProp.ts
+ */
+const PSEUDO_STATE_MAP = {
+    hover: "hover",
+    focus: "focus",
+    active: "active",
+    "focus-within": "focus-within",
+    disabled: "disabled",
+};
+/**
+ * Maps pseudo-state names to their CSS selectors.
+ * Each state may have multiple selector variants (e.g. disabled also matches
+ * aria-disabled).
+ */
+const PSEUDO_SELECTORS = {
+    hover: [":hover"],
+    focus: [":focus-visible"],
+    active: [":active"],
+    "focus-within": [":has(:focus-within)"],
+    disabled: [":disabled", '[aria-disabled="true"]'],
+};
+/**
+ * Extracts declarations from a rule that follow the pattern:
+ *   property: var(--custom-prop);
+ *
+ * These are the declarations we'll generate pseudo-state variants for.
+ * We only match simple `var(--name)` references (no fallbacks in the base rule)
+ * since those are the style-engine-managed properties.
+ */
+function extractInteractiveDeclarations(rule) {
+    const declarations = [];
+    rule.walkDecls((decl) => {
+        // Skip custom property definitions (e.g. --background-color: none).
+        // We only want real CSS property declarations like `background-color: var(--background-color)`.
+        if (decl.prop.startsWith("--"))
+            return;
+        // Match `var(--some-name)` — simple variable reference with no fallback
+        const match = decl.value.match(/^var\((--[\w-]+)\)$/);
+        if (match && match[1]) {
+            declarations.push({
+                property: decl.prop,
+                cssVar: match[1],
+            });
+        }
+    });
+    return declarations;
+}
+/**
+ * Builds the pseudo-state selector string for a given base selector and state.
+ *
+ * Examples:
+ *   buildSelector(".tgph-box", "hover")
+ *     => ".tgph-box--interactive:hover"
+ *   buildSelector(".tgph-box", "disabled")
+ *     => ".tgph-box--interactive:disabled, .tgph-box--interactive[aria-disabled=\"true\"]"
+ */
+function buildSelector(baseSelector, state) {
+    const pseudoSelectors = PSEUDO_SELECTORS[state];
+    if (!pseudoSelectors)
+        return "";
+    return pseudoSelectors
+        .map((pseudo) => `${baseSelector}--interactive${pseudo}`)
+        .join(",\n");
+}
+/**
+ * PostCSS plugin: @telegraph/interactive
+ *
+ * Processes `@telegraph interactive(<selector>)` at-rules and auto-generates
+ * pseudo-class cascade rules based on the base rule's declarations.
+ *
+ * Input:
+ *   .tgph-box {
+ *     --background-color: none;
+ *     background-color: var(--background-color);
+ *     border-color: var(--border-color);
+ *   }
+ *   @telegraph interactive(.tgph-box);
+ *
+ * Output (appended):
+ *   .tgph-box--interactive:hover {
+ *     background-color: var(--hover--background-color, var(--background-color));
+ *     border-color: var(--hover--border-color, var(--border-color));
+ *   }
+ *   .tgph-box--interactive:focus-visible { ... }
+ *   .tgph-box--interactive:active { ... }
+ *   .tgph-box--interactive:has(:focus-within) { ... }
+ *   .tgph-box--interactive:disabled,
+ *   .tgph-box--interactive[aria-disabled="true"] { ... }
+ */
+const interactivePlugin = () => {
+    return {
+        postcssPlugin: "@telegraph/interactive",
+        Once(root) {
+            // Collect all @telegraph interactive(...) directives
+            const directives = [];
+            root.walkAtRules("telegraph", (atRule) => {
+                const match = atRule.params.match(/^interactive\((.+)\)$/);
+                if (match && match[1]) {
+                    directives.push({
+                        atRule,
+                        selector: match[1].trim(),
+                    });
+                }
+            });
+            if (directives.length === 0)
+                return;
+            for (const { atRule, selector } of directives) {
+                // Find the base rule matching the selector
+                let baseRule = null;
+                root.walkRules((rule) => {
+                    if (rule.selector === selector) {
+                        baseRule = rule;
+                    }
+                });
+                if (!baseRule) {
+                    throw atRule.error(`@telegraph interactive: could not find base rule "${selector}" in this file.`);
+                }
+                const declarations = extractInteractiveDeclarations(baseRule);
+                if (declarations.length === 0) {
+                    throw atRule.error(`@telegraph interactive: no "property: var(--name)" declarations found in "${selector}".`);
+                }
+                // eslint-disable-next-line @typescript-eslint/no-require-imports
+                const postcss = require("postcss");
+                // Track the last inserted node so rules are appended in order
+                let lastInserted = atRule;
+                // Generate pseudo-state rules for each state
+                for (const state of Object.keys(PSEUDO_STATE_MAP)) {
+                    const prefix = PSEUDO_STATE_MAP[state];
+                    const pseudoSelector = buildSelector(selector, state);
+                    if (!pseudoSelector)
+                        continue;
+                    const rule = postcss.rule({ selector: pseudoSelector });
+                    for (const decl of declarations) {
+                        rule.append(postcss.decl({
+                            prop: decl.property,
+                            value: `var(--${prefix}--${decl.cssVar.replace(/^--/, "")}, var(${decl.cssVar}))`,
+                        }));
+                    }
+                    // Insert after the last inserted node to preserve order
+                    atRule.parent?.insertAfter(lastInserted, rule);
+                    lastInserted = rule;
+                }
+                // Remove the directive
+                atRule.remove();
+            }
+        },
+    };
+};
+exports.default = interactivePlugin;

package/dist/style-engine-postcss-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-engine-postcss-config.d.ts","sourceRoot":"","sources":["../src/style-engine-postcss-config.ts"],"names":[],"mappings":";;;AAAA,wBAUE"}
+{"version":3,"file":"style-engine-postcss-config.d.ts","sourceRoot":"","sources":["../src/style-engine-postcss-config.ts"],"names":[],"mappings":";;;AAGA,wBAgBE"}

package/dist/style-engine-postcss-config.js

@@ -1,13 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const interactivePlugin = require("./interactive-plugin").default;
 exports.default = {
     plugins: [
+        // Must run before other plugins so that the generated rules are available
+        // for subsequent processing (e.g. autoprefixer, discard-empty).
+        interactivePlugin(),
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
         require("postcss-discard-empty"),
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
         require("autoprefixer"),
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
         require("@csstools/postcss-global-data")({
             module: ["@telegraph/tokens/dist/css/breakpoints.css"],
         }),
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
         require("postcss-custom-media"),
     ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/postcss-config",
-  "version": "0.0.31",
+  "version": "0.1.0",
   "author": "@knocklabs",
   "license": "MIT",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/postcss-config",
@@ -18,8 +18,8 @@
     "format:check": "prettier \"src/**/*.{js,ts,tsx}\" --check"
   },
   "dependencies": {
-    "@csstools/postcss-global-data": "^3.1.0",
-    "@telegraph/tokens": "^0.1.3",
+    "@csstools/postcss-global-data": "^4.0.0",
+    "@telegraph/tokens": "^0.1.4",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.6",
     "postcss-combine-duplicated-selectors": "^10.0.3",
@@ -30,7 +30,7 @@
     "@knocklabs/eslint-config": "^0.0.5",
     "@knocklabs/typescript-config": "^0.0.2",
     "@telegraph/prettier-config": "^0.0.7",
-    "eslint": "^8.56.0",
+    "eslint": "^10.0.2",
     "typescript": "^5.9.3"
   }
 }