@tamagui/theme-builder 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/ThemeBuilder.cjs

@@ -3,20 +3,22 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var ThemeBuilder_exports = {};
 __export(ThemeBuilder_exports, {
@@ -31,113 +33,167 @@ class ThemeBuilder {
   }
   _getThemeFn;
   addPalettes(palettes) {
-    return this.state.palettes = {
+    this.state.palettes = {
       // as {} prevents generic string key merge messing up types
       ...this.state.palettes,
       ...palettes
-    }, this;
+    };
+    return this;
   }
   addTemplates(templates) {
-    return this.state.templates = {
+    this.state.templates = {
       // as {} prevents generic string key merge messing up types
       ...this.state.templates,
       ...templates
-    }, this;
+    };
+    return this;
   }
   addMasks(masks) {
-    return this.state.masks = {
+    this.state.masks = {
       // as {} prevents generic string key merge messing up types
       ...this.state.masks,
       ...(0, import_create_theme.objectFromEntries)((0, import_create_theme.objectEntries)(masks).map(([key, val]) => [key, (0, import_create_theme.createMask)(val)]))
-    }, this;
+    };
+    return this;
   }
   // for dev mode only really
   _addedThemes = [];
   addThemes(themes) {
-    return this._addedThemes.push({
+    this._addedThemes.push({
       type: "themes",
       args: [themes]
-    }), this.state.themes = {
+    });
+    this.state.themes = {
       // as {} prevents generic string key merge messing up types
       ...this.state.themes,
       ...themes
-    }, this;
+    };
+    return this;
   }
   // these wont be typed to save some complexity and because they don't need to be typed!
   addComponentThemes(childThemeDefinition, options) {
-    return this.addChildThemes(childThemeDefinition, options), this;
+    void this.addChildThemes(childThemeDefinition, options);
+    return this;
   }
   addChildThemes(childThemeDefinition, options) {
     const currentThemes = this.state.themes;
-    if (!currentThemes) throw new Error("No themes defined yet, use addThemes first to set your base themes");
+    if (!currentThemes) {
+      throw new Error(`No themes defined yet, use addThemes first to set your base themes`);
+    }
     this._addedThemes.push({
       type: "childThemes",
       args: [childThemeDefinition, options]
     });
-    const currentThemeNames = Object.keys(currentThemes),
-      incomingThemeNames = Object.keys(childThemeDefinition),
-      namesWithDefinitions = currentThemeNames.flatMap(prefix => {
-        const avoidNestingWithin = options?.avoidNestingWithin;
-        return avoidNestingWithin && avoidNestingWithin.some(avoidName => prefix.startsWith(avoidName) || prefix.endsWith(avoidName)) ? [] : incomingThemeNames.map(subName => {
-          const fullName = `${prefix}_${subName}`,
-            definition = childThemeDefinition[subName];
-          return "avoidNestingWithin" in definition && definition.avoidNestingWithin.some(name => (name === "light" || name === "dark") && prefix.includes("_") ? !1 : prefix.startsWith(name) || prefix.endsWith(name)) || prefix.endsWith(`_${subName}`) ? null : [fullName, definition];
-        }).filter(Boolean);
-      }),
-      childThemes = Object.fromEntries(namesWithDefinitions),
-      next = {
-        // as {} prevents generic string key merge messing up types
-        ...this.state.themes,
-        ...childThemes
-      };
-    return this.state.themes = next, this;
+    const currentThemeNames = Object.keys(currentThemes);
+    const incomingThemeNames = Object.keys(childThemeDefinition);
+    const namesWithDefinitions = currentThemeNames.flatMap(prefix => {
+      const avoidNestingWithin = options?.avoidNestingWithin;
+      if (avoidNestingWithin) {
+        if (avoidNestingWithin.some(avoidName => prefix.startsWith(avoidName) || prefix.endsWith(avoidName))) {
+          return [];
+        }
+      }
+      return incomingThemeNames.map(subName => {
+        const fullName = `${prefix}_${subName}`;
+        const definition = childThemeDefinition[subName];
+        if ("avoidNestingWithin" in definition) {
+          const avoidNest = definition.avoidNestingWithin;
+          if (avoidNest.some(name => {
+            if ((name === "light" || name === "dark") && prefix.includes("_")) {
+              return false;
+            }
+            return prefix.startsWith(name) || prefix.endsWith(name);
+          })) {
+            return null;
+          }
+        }
+        if (prefix.endsWith(`_${subName}`)) {
+          return null;
+        }
+        if (fullName in currentThemes) {
+          return null;
+        }
+        return [fullName, definition];
+      }).filter(Boolean);
+    });
+    const childThemes = Object.fromEntries(namesWithDefinitions);
+    const next = {
+      // as {} prevents generic string key merge messing up types
+      ...this.state.themes,
+      ...childThemes
+    };
+    this.state.themes = next;
+    return this;
   }
   getTheme(fn) {
-    return this._getThemeFn = fn, this;
+    this._getThemeFn = fn;
+    return this;
   }
   build() {
-    if (!this.state.themes) return {};
-    const out = {},
-      maskedThemes = [];
+    if (!this.state.themes) {
+      return {};
+    }
+    const out = {};
+    const maskedThemes = [];
     for (const themeName in this.state.themes) {
-      const nameParts = themeName.split("_"),
-        parentName = nameParts.slice(0, nameParts.length - 1).join("_"),
-        definitions = this.state.themes[themeName],
-        themeDefinition = Array.isArray(definitions) ? (() => {
-          const found = definitions.find(
-          // endWith match stronger than startsWith
-          d => d.parent ? parentName.endsWith(d.parent) || parentName.startsWith(d.parent) : !0);
-          return found || null;
-        })() : definitions;
-      if (themeDefinition) if ("theme" in themeDefinition) out[themeName] = themeDefinition.theme;else if ("mask" in themeDefinition) maskedThemes.push({
-        parentName,
-        themeName,
-        mask: themeDefinition
-      });else {
+      const nameParts = themeName.split("_");
+      const parentName = nameParts.slice(0, nameParts.length - 1).join("_");
+      const definitions = this.state.themes[themeName];
+      const themeDefinition = Array.isArray(definitions) ? (() => {
+        const found = definitions.find(
+        // endWith match stronger than startsWith
+        d => d.parent ? parentName.endsWith(d.parent) || parentName.startsWith(d.parent) : true);
+        if (!found) {
+          return null;
+        }
+        return found;
+      })() : definitions;
+      if (!themeDefinition) {
+        continue;
+      }
+      if ("theme" in themeDefinition) {
+        out[themeName] = themeDefinition.theme;
+      } else if ("mask" in themeDefinition) {
+        maskedThemes.push({
+          parentName,
+          themeName,
+          mask: themeDefinition
+        });
+      } else {
         let {
           palette: paletteName = "",
           template: templateName,
           ...options
         } = themeDefinition;
         const parentDefinition = this.state.themes[parentName];
-        if (!this.state.palettes) throw new Error(`No palettes defined for theme with palette expected: ${themeName}`);
-        let palette = this.state.palettes[paletteName || ""],
-          attemptParentName = `${parentName}_${paletteName}`;
-        for (; !palette && attemptParentName;) attemptParentName in this.state.palettes ? (palette = this.state.palettes[attemptParentName], paletteName = attemptParentName) : attemptParentName = attemptParentName.split("_").slice(0, -1).join("_");
+        if (!this.state.palettes) {
+          throw new Error(`No palettes defined for theme with palette expected: ${themeName}`);
+        }
+        let palette = this.state.palettes[paletteName || ""];
+        let attemptParentName = `${parentName}_${paletteName}`;
+        while (!palette && attemptParentName) {
+          if (attemptParentName in this.state.palettes) {
+            palette = this.state.palettes[attemptParentName];
+            paletteName = attemptParentName;
+          } else {
+            attemptParentName = attemptParentName.split("_").slice(0, -1).join("_");
+          }
+        }
         if (!palette) {
           const msg = process.env.NODE_ENV !== "production" ? `: ${themeName}: ${paletteName}
           Definition: ${JSON.stringify(themeDefinition)}
           Parent: ${JSON.stringify(parentDefinition)}
-          Potential: (${Object.keys(this.state.palettes).join(", ")})` : "";
+          Potential: (${Object.keys(this.state.palettes).join(", ")})` : ``;
           throw new Error(`No palette for theme${msg}`);
         }
         const template = this.state.templates?.[templateName] ??
         // fall back to finding the scheme specific on if it exists
         this.state.templates?.[`${nameParts[0]}_${templateName}`];
-        if (!template) throw new Error(`No template for theme ${themeName}: ${templateName} in templates:
-- ${Object.keys(this.state.templates || {}).join(`
- - `)}`);
-        const theme = (0, import_create_theme.createThemeWithPalettes)(this.state.palettes, paletteName, template, options, themeName, !0);
+        if (!template) {
+          throw new Error(`No template for theme ${themeName}: ${templateName} in templates:
+- ${Object.keys(this.state.templates || {}).join("\n - ")}`);
+        }
+        const theme = (0, import_create_theme.createThemeWithPalettes)(this.state.palettes, paletteName, template, options, themeName, true);
         out[themeName] = this._getThemeFn ? {
           ...theme,
           ...this._getThemeFn({
@@ -159,20 +215,27 @@ class ThemeBuilder {
       parentName
     } of maskedThemes) {
       const parent = out[parentName];
-      if (!parent) continue;
+      if (!parent) {
+        continue;
+      }
       const {
         mask: maskName,
         ...options
       } = mask;
       let maskFunction = this.state.masks?.[maskName];
-      if (!maskFunction) throw new Error(`No mask ${maskName}`);
+      if (!maskFunction) {
+        throw new Error(`No mask ${maskName}`);
+      }
       const parentTheme = this.state.themes[parentName];
       if (parentTheme && "childOptions" in parentTheme) {
         const {
           mask: mask2,
           ...childOpts
         } = parentTheme.childOptions;
-        mask2 && (maskFunction = this.state.masks?.[mask2]), Object.assign(options, childOpts);
+        if (mask2) {
+          maskFunction = this.state.masks?.[mask2];
+        }
+        Object.assign(options, childOpts);
       }
       out[themeName] = (0, import_create_theme.applyMask)(parent, maskFunction, options, parentName, themeName);
     }