@homebound/truss 2.0.13 → 2.1.0-next.1

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;
@@ -1091,10 +1092,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. */
@@ -1205,9 +1202,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 +1211,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}
 
@@ -1266,11 +1262,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];
   }
@@ -1331,14 +1332,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 {
@@ -1400,7 +1396,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 +1404,7 @@ function generateTrussMapping(config, entries) {
         break;
       case "increment-param":
         abbreviations[entry.abbr] = {
-          kind: "dynamic",
+          kind: "variable",
           props: entry.props || [],
           incremented: true,
           extraDefs: entry.extraDefs