@homebound/truss 2.0.13 → 2.1.0-next.2

package/build/index.js

@@ -850,6 +850,7 @@ function makeBreakpoints(breakpoints) {
   const r = {
     print: "@media print"
   };
+  const screenMedia = "@media screen and";
   const bps = Object.keys(breakpoints);
   Object.entries(breakpoints).forEach(([bp, px], i) => {
     const isFirst = i === 0;
@@ -857,11 +858,11 @@ function makeBreakpoints(breakpoints) {
     const min = !isFirst ? `${px}px` : "0";
     const max = !isLast ? `${breakpoints[bps[i + 1]] - 1}px` : "0";
     if (isFirst) {
-      r[bp] = `@media (max-width: ${max})`;
+      r[bp] = `${screenMedia} (max-width: ${max})`;
     } else if (isLast) {
-      r[bp] = `@media (min-width: ${min})`;
+      r[bp] = `${screenMedia} (min-width: ${min})`;
     } else {
-      r[bp] = `@media (min-width: ${min}) and (max-width: ${max})`;
+      r[bp] = `${screenMedia} (min-width: ${min}) and (max-width: ${max})`;
     }
     if (!isFirst) {
       const isSecond = i === 1;
@@ -875,11 +876,11 @@ function makeBreakpoints(breakpoints) {
       if (!isLast) {
         parts.push(`(max-width: ${max})`);
       }
-      r[name] = `@media ${parts.join(" and ")}`;
+      r[name] = `${screenMedia} ${parts.join(" and ")}`;
     }
     if (!isFirst && !isLast) {
-      r[`${bp}AndUp`] = `@media (min-width: ${min})`;
-      r[`${bp}AndDown`] = `@media (max-width: ${max})`;
+      r[`${bp}AndUp`] = `${screenMedia} (min-width: ${min})`;
+      r[`${bp}AndDown`] = `${screenMedia} (max-width: ${max})`;
     }
   });
   return r;
@@ -1009,9 +1010,32 @@ type Opts<T> = {
   rules: T,
   enabled: boolean,
   important: boolean,
-  selector: string | undefined
+  selector: string | undefined,
+  elseApplied: boolean,
 };
 
+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");
+}
+
 class CssBuilder<T extends Properties> {
   constructor(private opts: Opts<T>) {}
 
@@ -1055,13 +1079,13 @@ class CssBuilder<T extends Properties> {
 
   get else() {
     if (this.selector !== undefined) {
-      if (this.selector.includes("not")) {
+      if (this.opts.elseApplied) {
         throw new Error("else was already called");
       } else {
-        return this.newCss({ selector: this.selector.replace("@media", "@media not") });
+        return this.newCss({ selector: invertMediaQuery(this.selector), elseApplied: true });
       }
     }
-    return this.newCss({ enabled: !this.enabled });
+    return this.newCss({ enabled: !this.enabled, elseApplied: true });
   }
 
   get important() { return this.newCss({ important: true }); }
@@ -1091,10 +1115,6 @@ class CssBuilder<T extends Properties> {
     return this.newCss({ rules: rules as any });
   }
 
-  /** Marker helper for legacy object-spread composition. */
-  spread<P extends object>(props: P): P {
-    return props;
-  }
 }
 
 /** Sort keys so equivalent rule objects have deterministic shape. */
@@ -1142,7 +1162,7 @@ export enum Palette {
 export type Xss<P extends keyof Properties> = Pick<Properties, P>;
 
 /** An entry point for Css expressions. CssBuilder is immutable so this is safe to share. */
-export const Css = new CssBuilder({ rules: {}, enabled: true, important: false, selector: undefined });
+export const Css = new CssBuilder({ rules: {}, enabled: true, important: false, selector: undefined, elseApplied: false });
 
 ${typeAliasCode}
 
@@ -1205,9 +1225,8 @@ function generateStylexCssBuilder(config, sections) {
   return code`
 // This file is auto-generated by truss: https://github.com/homebound-team/truss.
 // See your project's \`truss-config.ts\` to make configuration changes (fonts, increments, etc).
-// Target: stylex (build-time plugin)
+// Target: native (build-time plugin)
 
-import * as stylex from "@stylexjs/stylex";
 import { trussProps } from "@homebound/truss/runtime";
 
 /** Given a type X, and the user's proposed type T, only allow keys in X and nothing else. */
@@ -1215,8 +1234,8 @@ export type Only<X, T> = X & Record<Exclude<keyof T, keyof X>, never>;
 
 export type ${def("Properties")} = ${CssProperties}<string | 0, string>;
 
-/** A marker returned by \`stylex.defineMarker()\`, used with \`when\`/\`markerOf\` etc. */
-export type Marker = ReturnType<typeof stylex.defineMarker>;
+/** A marker token used with \`when\`/\`markerOf\` etc. */
+export type Marker = symbol;
 
 ${typographyType}
 
@@ -1234,6 +1253,7 @@ type Opts<T> = {
   rules: T;
   enabled: boolean;
   selector: string | undefined;
+  elseApplied: boolean;
 };
 
 class CssBuilder<T extends Properties> {
@@ -1266,11 +1286,16 @@ class CssBuilder<T extends Properties> {
     return this;
   }
 
-  /** Marks this element with a user-defined marker (return value of stylex.defineMarker()). */
+  /** Marks this element with a user-defined marker. */
   markerOf(_marker: Marker): CssBuilder<T> {
     return this;
   }
 
+  /** Creates a marker token for use with markerOf() and when(). */
+  newMarker(): Marker {
+    return Symbol("truss-marker");
+  }
+
   typography(key: Typography): CssBuilder<T> {
     return (this as any)[key];
   }
@@ -1310,13 +1335,22 @@ class CssBuilder<T extends Properties> {
   if(mediaQuery: string): CssBuilder<T>;
   if(condOrMediaQuery: boolean | string): CssBuilder<T> {
     if (typeof condOrMediaQuery === "boolean") {
-      return new CssBuilder({ ...this.opts, enabled: condOrMediaQuery });
+      return new CssBuilder({ ...this.opts, enabled: condOrMediaQuery, elseApplied: false });
     }
-    return this.newCss({ selector: condOrMediaQuery });
+    return this.newCss({ selector: condOrMediaQuery, elseApplied: false });
   }
 
   get else(): CssBuilder<T> {
-    return new CssBuilder({ ...this.opts, enabled: !this.enabled });
+    if (this.selector !== undefined) {
+      if (this.opts.elseApplied) {
+        throw new Error("else was already called");
+      }
+      return this.newCss({ selector: invertMediaQuery(this.selector), elseApplied: true });
+    }
+    if (this.opts.elseApplied) {
+      throw new Error("else was already called");
+    }
+    return new CssBuilder({ ...this.opts, enabled: !this.enabled, elseApplied: true });
   }
 
   add<P extends Properties>(props: P): CssBuilder<T & P>;
@@ -1331,14 +1365,9 @@ class CssBuilder<T extends Properties> {
     return this.newCss({ rules: rules as any });
   }
 
-  /** Marker helper for legacy object-spread composition. */
-  spread<P extends object>(props: P): P {
-    return props;
-  }
-
-  /** Convert a style array into \`{ className, style }\` props for manual spreading into non-\`css=\` contexts. */
+  /** Convert a style hash into \`{ className, style }\` props for manual spreading into non-\`css=\` contexts. */
   props(styles: Properties): Record<string, unknown> {
-    return trussProps(stylex, ...(Array.isArray(styles) ? styles : [styles]));
+    return trussProps(styles as any);
   }
 
   private get rules(): T {
@@ -1380,12 +1409,35 @@ export enum Palette {
 export type Xss<P extends keyof Properties> = Pick<Properties, P>;
 
 /** An entry point for Css expressions. CssBuilder is immutable so this is safe to share. */
-export const Css = new CssBuilder({ rules: {}, enabled: true, selector: undefined });
+export const Css = new CssBuilder({ rules: {}, enabled: true, selector: undefined, elseApplied: false });
 
 ${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 || ""}
   `;
 }
@@ -1400,7 +1452,7 @@ function generateTrussMapping(config, entries) {
         break;
       case "param":
         abbreviations[entry.abbr] = {
-          kind: "dynamic",
+          kind: "variable",
           props: entry.props || [],
           incremented: false,
           extraDefs: entry.extraDefs
@@ -1408,7 +1460,7 @@ function generateTrussMapping(config, entries) {
         break;
       case "increment-param":
         abbreviations[entry.abbr] = {
-          kind: "dynamic",
+          kind: "variable",
           props: entry.props || [],
           incremented: true,
           extraDefs: entry.extraDefs