@homebound/truss 2.21.5 → 2.22.0

package/build/index.js

@@ -922,6 +922,18 @@ var reactNativeSections = {
   spacing: spacing2
 };
 
+// src/pseudo-selectors.ts
+var TRUSS_PSEUDO_METHODS = {
+  onHover: ":hover",
+  onFocus: ":focus",
+  onFocusVisible: ":focus-visible",
+  onFocusWithin: ":focus-within",
+  onActive: ":active",
+  onDisabled: ":disabled",
+  ifFirstOfType: ":first-of-type",
+  ifLastOfType: ":last-of-type"
+};
+
 // src/generate.ts
 var CssProperties = imp("Properties@csstype");
 var defaultTypeAliases = {
@@ -1249,6 +1261,12 @@ function generateWebCssBuilder(config, sections) {
     ...Object.entries(genBreakpointsMap).map(([name, value]) => `  ${name} = "${value}",`),
     `}`
   ];
+  const pseudoGetterCode = Object.entries(TRUSS_PSEUDO_METHODS).map(([name, selector]) => {
+    return code`
+      get ${name}() {
+        return this.newCss({ selector: ${quote(selector)} });
+      }`;
+  });
   const typographyType = code`
     export type ${def("Typography")} = ${Object.keys(fonts).map(quote).join(" | ")};
   `;
@@ -1257,7 +1275,7 @@ function generateWebCssBuilder(config, sections) {
 // See your project's \`truss-config.ts\` to make configuration changes (fonts, increments, etc).
 // Target: web (build-time plugin)
 
-import { trussProps, useRuntimeStyle as _useRuntimeStyle } from "@homebound/truss/runtime";
+import { trussProps, useRuntimeStyle as _useRuntimeStyle, __invertTrussMediaQuery } from "@homebound/truss/runtime";
 
 /** Given a type X, and the user's proposed type T, only allow keys in X and nothing else. */
 export type Only<X, T> = X & Record<Exclude<keyof T, keyof X | "__kind">, never>;
@@ -1335,30 +1353,7 @@ class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"> {
     return this.rules as any;
   }
 
-  get onHover() {
-    return this.newCss({ selector: ":hover" });
-  }
-  get onFocus() {
-    return this.newCss({ selector: ":focus" });
-  }
-  get onFocusVisible() {
-    return this.newCss({ selector: ":focus-visible" });
-  }
-  get onFocusWithin() {
-    return this.newCss({ selector: ":focus-within" });
-  }
-  get onActive() {
-    return this.newCss({ selector: ":active" });
-  }
-  get onDisabled() {
-    return this.newCss({ selector: ":disabled" });
-  }
-  get ifFirstOfType() {
-    return this.newCss({ selector: ":first-of-type" });
-  }
-  get ifLastOfType() {
-    return this.newCss({ selector: ":last-of-type" });
-  }
+  ${pseudoGetterCode}
 
   /** Marks this element as a default hover marker (for ancestor pseudo selectors). */
   get marker(): CssBuilder<T, S> {
@@ -1384,6 +1379,7 @@ class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"> {
     *
     * \`when(\":hover\")\` — same semantics as \`onHover\`
     * \`when(\":hover:not(:disabled)\")\` — hover only while enabled
+    * \`when('[data-state="open"]')\` — match an element state attribute
     */
   when(selector: string): CssBuilder<T, S>;
   /**
@@ -1396,7 +1392,7 @@ class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"> {
   /**
     * Apply different styles for each selector in the object.
     *
-    * \`when({ ":hover": Css.blue.$, ":focus": Css.red.$ })\`
+    * \`when({ ":hover": Css.blue.$, '[data-state="open"]': Css.red.$ })\`
     */
   when<W extends Record<string, Properties>>(selectors: W): CssBuilder<T & UnionToIntersection<W[keyof W]>, S>;
   when(
@@ -1434,7 +1430,7 @@ class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"> {
       if (this.opts.elseApplied) {
         throw new Error("else was already called");
       }
-      return this.newCss({ selector: invertMediaQuery(this.selector), elseApplied: true });
+      return this.newCss({ selector: __invertTrussMediaQuery(this.selector), elseApplied: true });
     }
     if (this.opts.elseApplied) {
       throw new Error("else was already called");
@@ -1576,29 +1572,6 @@ ${typeAliasCode}
 
 ${breakpointCode}
 
-function invertMediaQuery(query: string): string {
-  const screenPrefix = "@media screen and ";
-  if (query.startsWith(screenPrefix)) {
-    const conditions = query.slice(screenPrefix.length).trim();
-    const rangeMatch = conditions.match(/^\(min-width: (\d+)px\) and \(max-width: (\d+)px\)$/);
-    if (rangeMatch) {
-      const min = Number(rangeMatch[1]);
-      const max = Number(rangeMatch[2]);
-      return \`@media screen and (max-width: \${min - 1}px), screen and (min-width: \${max + 1}px)\`;
-    }
-    const minMatch = conditions.match(/^\(min-width: (\d+)px\)$/);
-    if (minMatch) {
-      return \`@media screen and (max-width: \${Number(minMatch[1]) - 1}px)\`;
-    }
-    const maxMatch = conditions.match(/^\(max-width: (\d+)px\)$/);
-    if (maxMatch) {
-      return \`@media screen and (min-width: \${Number(maxMatch[1]) + 1}px)\`;
-    }
-  }
-  return query.replace("@media", "@media not");
-}
-
-
 ${extras || ""}
   `;
 }