@homebound/truss 2.21.4 → 2.21.6

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 = {
@@ -941,13 +953,13 @@ async function generate(config) {
     return;
   }
   if (target === "react-native") {
-    const output = generateCssBuilder(config).toString();
+    const output = generateReactNativeBuilder(config).toString();
     await fs.writeFile(outputPath, output);
     return;
   }
   throw new Error(`Unsupported truss target "${target}". Use "web" (default) or "react-native".`);
 }
-function generateCssBuilder(config) {
+function generateReactNativeBuilder(config) {
   const { fonts, increment, extras, typeAliases, breakpoints = {}, palette } = config;
   const sections = generateSections(config);
   const lines = Object.entries(sections).map(([name, value]) => [`// ${name}`, ...value, ""]).flat();
@@ -1015,7 +1027,6 @@ ${typographyType}
 type Opts<T> = {
   rules: T,
   enabled: boolean,
-  important: boolean,
   selector: string | undefined,
   elseApplied: boolean,
 };
@@ -1054,7 +1065,7 @@ class CssBuilder<T extends Properties> {
 
   ${lines.join("\n  ").replace(/ +\n/g, "\n")}
     
-  get $(): T { return maybeImportant(sortObject(this.rules), this.opts.important); }
+  get $(): T { return sortObject(this.rules); }
 
   if(bp: Breakpoint): CssBuilder<T>;
   if(cond: boolean): CssBuilder<T>;
@@ -1111,8 +1122,6 @@ class CssBuilder<T extends Properties> {
     return this.newCss({ selector: undefined, elseApplied: false });
   }
 
-  get important() { return this.newCss({ important: true }); }
-
   /** Add real CSS property/value pairs, either as add("prop", value) or add({ prop: value, ... }). */
   add<P extends Properties>(props: P): CssBuilder<T & P>;
   add<K extends keyof Properties>(prop: K, value: Properties[K]): CssBuilder<T & { [U in K]: Properties[K] }>;
@@ -1140,25 +1149,6 @@ class CssBuilder<T extends Properties> {
     return this.newCss({ rules: rules as any });
   }
 
-  /** Adds new properties, either a specific key/value or a Properties object, to a nested selector. */
-  addIn<P extends Properties>(selector: string, props: P | undefined): CssBuilder<T & P>;
-  addIn<K extends keyof Properties>(selector: string, prop: K, value: Properties[K]): CssBuilder<T & { [U in K]: Properties[K] }>;
-  addIn<K extends keyof Properties>(selector: string, propOrProperties: K | Properties, value?: Properties[K]): CssBuilder<any> {
-    const newRules = typeof propOrProperties === "string" ?  { [propOrProperties]: value } : propOrProperties;
-    if (!this.enabled) return this;
-    if (newRules === undefined) {
-      return this;
-    }
-    const rules = { ...this.rules, [selector]: { ...(this.rules as any)[selector], ...newRules } };
-    return this.newCss({ rules: rules as any });
-  }
-
-  /** Marker for the build-time transform to append a raw className. */
-  className(className: string | undefined): CssBuilder<T> {
-    void className;
-    return this;
-  }
-
   /** Marker for the build-time transform to append raw inline styles. */
   style(inlineStyle: InlineStyle): CssBuilder<T> {
     void inlineStyle;
@@ -1182,16 +1172,6 @@ function sortObject<T extends object>(obj: T): T {
     }, ({} as any) as T) as T;
 }
 
-/** Conditionally adds \`important!\` to everything. */
-function maybeImportant<T extends object>(obj: T, important: boolean): T {
-  if (important) {
-    Object.keys(obj).forEach(key => {
-      (obj as any)[key] = \`\${(obj as any)[key]} !important\`;
-    });
-  }
-  return obj;
-}
-
 /** Converts \`inc\` into pixels value with a \`px\` suffix. */
 export function maybeInc(inc: number | string): string {
   return typeof inc === "string" ? inc : \`\${increment(inc)}px\`;
@@ -1224,7 +1204,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, elseApplied: false });
+export const Css = new CssBuilder({ rules: {}, enabled: true, selector: undefined, elseApplied: false });
 
 ${typeAliasCode}
 
@@ -1281,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(" | ")};
   `;
@@ -1289,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>;
@@ -1367,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> {
@@ -1466,7 +1429,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");
@@ -1608,29 +1571,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 || ""}
   `;
 }