@hanzogui/static 7.3.0 → 8.0.0

package/dist/extractor/createExtractor.cjs

@@ -71,6 +71,33 @@ let hasLoggedBaseInfo = false;
 function isFullyDisabled(props) {
   return props.disableExtraction && props.disableDebugAttr;
 }
+function hasUntilMeasuredAncestor(path, groupName) {
+  let current = path.parentPath;
+  while (current) {
+    if (current.isJSXElement()) {
+      const opening = current.node.openingElement;
+      let foundGroup = false;
+      let foundUntilMeasured = false;
+      for (const attr of opening.attributes) {
+        if (!t.isJSXAttribute(attr)) continue;
+        if (!t.isJSXIdentifier(attr.name)) continue;
+        const aName = attr.name.name;
+        if (aName === "group") {
+          if (t.isStringLiteral(attr.value) && attr.value.value === groupName) {
+            foundGroup = true;
+          } else if (t.isJSXExpressionContainer(attr.value) && t.isStringLiteral(attr.value.expression) && attr.value.expression.value === groupName) {
+            foundGroup = true;
+          }
+        } else if (aName === "untilMeasured") {
+          foundUntilMeasured = true;
+        }
+      }
+      if (foundGroup && foundUntilMeasured) return true;
+    }
+    current = current.parentPath;
+  }
+  return false;
+}
 function createExtractor({
   logger = console,
   platform = "web"
@@ -205,7 +232,7 @@ function createExtractor({
     loadGui: load,
     loadGuiSync: loadSync,
     getGui() {
-      return projectInfo?.guiConfig;
+      return projectInfo?.hanzoguiConfig;
     },
     parseSync: (f, props) => {
       globalThis.expo ||= {};
@@ -220,10 +247,10 @@ function createExtractor({
   };
   function parseWithConfig({
     components,
-    guiConfig
+    hanzoguiConfig
   }, fileOrPath, options) {
     const {
-      config = "gui.config.ts",
+      config = "hanzogui.config.ts",
       importsWhitelist = ["constants.js"],
       evaluateVars = true,
       sourcePath = "",
@@ -246,7 +273,7 @@ function createExtractor({
       dynamicComponentCache.delete(sourcePath);
       styledCheckCache.delete(sourcePath);
     }
-    if (sourcePath.includes(".gui-dynamic-eval")) {
+    if (sourcePath.includes(".hanzogui-dynamic-eval")) {
       return null;
     }
     const {
@@ -291,7 +318,14 @@ function createExtractor({
       }
       return !!(staticConfig.validStyles?.[name] || pseudoDescriptors[name] ||
       // don't disable variants or else you lose many things flattening
-      staticConfig.variants?.[name] || projectInfo?.guiConfig?.shorthands[name]);
+      staticConfig.variants?.[name] || projectInfo?.hanzoguiConfig?.shorthands[name]);
+    }
+    function getGroupPseudo(name) {
+      const [_, groupName, a, b, c] = name.split("-");
+      if (!groupName) return;
+      const m2 = a && b ? `${a}-${b}` : "";
+      const media = m2 && mediaQueryConfig[m2] && m2 || a && mediaQueryConfig[a] && a;
+      return media ? media === m2 ? c : b ? `${b}${c ? `-${c}` : ""}` : void 0 : a ? `${a}${b ? `-${b}` : ""}${c ? `-${c}` : ""}` : void 0;
     }
     const isTargetingHTML = platform2 === "web";
     const ogDebug = shouldPrintDebug;
@@ -306,14 +340,14 @@ function createExtractor({
       if (shouldPrintDebug) {
         logger.info(["loaded components:", propsWithFileInfo.allLoadedComponents.map(comp => Object.keys(comp.nameToInfo).join(", ")).join(", ")].join(" "));
       }
-      if (process.env.DEBUG?.startsWith("gui")) {
+      if (process.env.DEBUG?.startsWith("hanzogui")) {
         logger.info(["loaded:", propsWithFileInfo.allLoadedComponents.map(x => x.moduleName)].join("\n"));
       }
     }
-    tm.mark("load-gui", !!shouldPrintDebug);
+    tm.mark("load-hanzogui", !!shouldPrintDebug);
     if (!isFullyDisabled(options)) {
-      if (!guiConfig?.themes) {
-        console.error(`\u26D4\uFE0F Error: Missing "themes" in your gui.config file:
+      if (!hanzoguiConfig?.themes) {
+        console.error(`\u26D4\uFE0F Error: Missing "themes" in your hanzogui.config file:
 
             You may not need the compiler! Remember you can run Gui with no configuration at all.
 
@@ -323,15 +357,15 @@ function createExtractor({
               - try out https://github.com/bmish/check-dependency-version-consistency to see if there are mis-matches.
               - or search your lockfile for mis-matches.
           `);
-        console.info(`  Got config:`, guiConfig);
+        console.info(`  Got config:`, hanzoguiConfig);
         process.exit(0);
       }
     }
-    const firstThemeName = Object.keys(guiConfig?.themes || {})[0];
-    const firstTheme = guiConfig?.themes[firstThemeName] || {};
+    const firstThemeName = Object.keys(hanzoguiConfig?.themes || {})[0];
+    const firstTheme = hanzoguiConfig?.themes[firstThemeName] || {};
     if (!firstTheme || typeof firstTheme !== "object") {
       const err = `Missing theme ${firstThemeName}, an error occurred when importing your config`;
-      console.info(err, `Got config:`, guiConfig);
+      console.info(err, `Got config:`, hanzoguiConfig);
       console.info(`Looking for theme:`, firstThemeName);
       throw new Error(err);
     }
@@ -348,8 +382,8 @@ function createExtractor({
     const body = fileOrPath.type === "Program" ? fileOrPath.get("body") : fileOrPath.program.body;
     if (!isFullyDisabled(options)) {
       if (Object.keys(components || []).length === 0) {
-        console.warn(`Warning: Gui didn't find any valid components (DEBUG=gui for more)`);
-        if (process.env.DEBUG === "gui") {
+        console.warn(`Warning: Gui didn't find any valid components (DEBUG=hanzogui for more)`);
+        if (process.env.DEBUG === "hanzogui") {
           console.info(`components`, Object.keys(components || []), components);
         }
       }
@@ -498,7 +532,7 @@ function createExtractor({
             }
           } catch (err) {
             if (shouldPrintDebug) {
-              logger.info(`skip optimize styled(${variableName}), unable to pre-process (DEBUG=gui for more)`);
+              logger.info(`skip optimize styled(${variableName}), unable to pre-process (DEBUG=hanzogui for more)`);
             }
           }
         }
@@ -806,6 +840,10 @@ function createExtractor({
                 }
                 return [attribute.value, path.get("value")];
               })();
+              if (deoptProps.has(name) || platform2 === "native" && name[0] === "$" && (name.startsWith("$theme-") || name.startsWith("$group-") && getGroupPseudo(name) !== "hover")) {
+                inlined.set(name, true);
+                return attr;
+              }
               const remove = () => {
                 Array.isArray(valuePath) ? valuePath.map(p => p.remove()) : valuePath.remove();
               };
@@ -843,7 +881,17 @@ function createExtractor({
                 inlined.set("theme", attr.value);
                 return attr;
               }
+              if (isTargetingHTML && name === "group" && t.isStringLiteral(value)) {
+                return [];
+              }
               const styleValue = attemptEvalSafe(value);
+              if (name[0] === "$" && (name.startsWith("$theme-") || name.startsWith("$group-")) && styleValue && typeof styleValue === "object" && Object.keys(styleValue).some(k => k[0] === "$")) {
+                if (shouldPrintDebug) {
+                  logger.info(`  ! nested media-like key inside ${name}, deopt to runtime`);
+                }
+                inlined.set(name, true);
+                return attr;
+              }
               if (!variants[name] && !isValidStyleKey(name, staticConfig)) {
                 let out = null;
                 propMapper(name, styleValue, propMapperStyleState, false, (key, val) => {
@@ -854,6 +902,7 @@ function createExtractor({
                   if (isTargetingHTML) {
                     out = reactNativeWebInternals.createDOMProps(isTextView ? "span" : "div", out);
                     delete out.className;
+                    delete out.style;
                   }
                 }
                 let didInline = false;
@@ -873,6 +922,12 @@ function createExtractor({
                   if (import_validHTMLAttributes.validHTMLAttributes[key] || key.startsWith("aria-") || key.startsWith("data-") ||
                   // this is debug stuff added by vite / new jsx transform
                   key === "__source" || key === "__self") {
+                    if (styleValue === import_constants.FAILED_EVAL && key !== name && t.isJSXAttribute(attr.value)) {
+                      return {
+                        type: "attr",
+                        value: t.jsxAttribute(t.jsxIdentifier(key), attr.value.value)
+                      };
+                    }
                     return attr;
                   }
                   if (shouldPrintDebug) {
@@ -899,12 +954,15 @@ function createExtractor({
                 }
                 if (isValidStyleKey(name, staticConfig)) {
                   if (name[0] === "$") {
-                    if (name.startsWith("$theme-") || name.startsWith("$group-")) {
-                      if (shouldPrintDebug) {
-                        logger.info(`  ! not flattening media-like style: ${name}`);
+                    if (name.startsWith("$group-")) {
+                      const groupName = name.slice("$group-".length).split("-")[0];
+                      if (groupName && hasUntilMeasuredAncestor(path, groupName)) {
+                        if (shouldPrintDebug) {
+                          logger.info(`  ! group="${groupName}" ancestor has untilMeasured, not flattening: ${name}`);
+                        }
+                        inlined.set(name, true);
+                        return attr;
                       }
-                      inlined.set(name, true);
-                      return attr;
                     }
                     if (name.startsWith("$platform-")) {
                       const platformName = name.slice(10);
@@ -1202,11 +1260,20 @@ function createExtractor({
           const inlineProps = /* @__PURE__ */new Set([
           // adding some always inline props
           ...(restProps.inlineProps || []), ...(staticConfig.inlineProps || [])]);
+          const canFlattenTransition = isTargetingHTML && hanzoguiConfig?.animations.outputStyle === "css" && !hanzoguiConfig.animationDrivers;
           const deoptProps = /* @__PURE__ */new Set([
-          // always de-opt animation these
-          "animation", "animateOnly", "animatePresence", "disableOptimization", ...(!isTargetingHTML ? ["pressStyle", "focusStyle", "focusVisibleStyle", "focusWithinStyle", "disabledStyle"] : []),
+          // css-only transitions lower to ordinary css; every runtime driver
+          // needs the component preserved so it can respond to prop changes.
+          "animation", ...(canFlattenTransition ? [] : ["transition"]), "animateOnly", "animatePresence", "disableOptimization", ...(!isTargetingHTML ? [
+          // native has no css pseudo selectors; these are runtime-only on
+          // rn (event listeners + style merge in createComponent), and if
+          // we let them flatten into the stylesheet they get written
+          // under a literal key that rn treats as an unknown style prop.
+          // hover is intentionally excluded: it is no-op on native and
+          // should be dropped rather than preserved as runtime work.
+          "pressStyle", "focusStyle", "focusVisibleStyle", "focusWithinStyle", "disabledStyle"] : []),
           // when using a non-CSS driver, de-opt on enterStyle/exitStyle
-          ...(guiConfig?.animations.isReactNative ? ["enterStyle", "exitStyle"] : [])]);
+          ...(hanzoguiConfig?.animations.isReactNative ? ["enterStyle", "exitStyle"] : [])]);
           const inlineWhenUnflattened = new Set(staticConfig.inlineWhenUnflattened || []);
           const staticNamespace = (0, import_getStaticBindingsForScope.getStaticBindingsForScope)(traversePath.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug);
           const attemptEval = !evaluateVars ? import_evaluateAstNode.evaluateAstNode : (0, import_createEvaluator.createEvaluator)({
@@ -1237,7 +1304,7 @@ function createExtractor({
             style: {},
             theme: defaultTheme,
             viewProps: defaultProps,
-            conf: guiConfig,
+            conf: hanzoguiConfig,
             props: defaultProps,
             componentState,
             styleProps: {
@@ -1344,7 +1411,7 @@ function createExtractor({
             if (!isValidStyleKey(key, staticConfig)) {
               return [];
             }
-            const name = guiConfig?.shorthands[key] || key;
+            const name = hanzoguiConfig?.shorthands[key] || key;
             if (value === void 0) {
               logger.warn(`\u26A0\uFE0F Error evaluating default style for component, prop ${key} ${value}`);
               shouldDeopt = true;
@@ -1483,6 +1550,7 @@ function createExtractor({
                       const cn = out.className;
                       out = reactNativeWebInternals.createDOMProps(isTextView ? "span" : "div", out);
                       out.className = cn;
+                      delete out.style;
                     }
                     if (shouldPrintDebug) {
                       logger.info([" - expanded variant", name, out].join(" "));
@@ -1515,7 +1583,7 @@ function createExtractor({
             }
             let key = Object.keys(cur.value)[0];
             const value = cur.value[key];
-            const fullKey = guiConfig?.shorthands[key];
+            const fullKey = hanzoguiConfig?.shorthands[key];
             if (fullKey) {
               cur.value = {
                 [fullKey]: value
@@ -1558,7 +1626,25 @@ function createExtractor({
             const before = process.env.IS_STATIC;
             process.env.IS_STATIC = "is_static";
             try {
-              const out = getSplitStyles(props, staticConfig, defaultTheme, "", componentState, {
+              let extractedMediaLikeProps = null;
+              let propsForSplit = props;
+              for (const k in props) {
+                if (k[0] === "$" && (k.startsWith("$group-") || k.startsWith("$theme-"))) {
+                  if (propsForSplit === props) {
+                    propsForSplit = {
+                      ...props
+                    };
+                  }
+                  if (platform2 === "native" && k.startsWith("$group-") && getGroupPseudo(k) === "hover") {
+                    delete propsForSplit[k];
+                    continue;
+                  }
+                  extractedMediaLikeProps ||= {};
+                  extractedMediaLikeProps[k] = propsForSplit[k];
+                  delete propsForSplit[k];
+                }
+              }
+              const out = getSplitStyles(propsForSplit, staticConfig, defaultTheme, "", componentState, {
                 ...styleProps,
                 noClass: true,
                 fallbackProps: completeProps,
@@ -1566,15 +1652,36 @@ function createExtractor({
                   resolveValues: "except-theme"
                 })
               }, void 0, void 0, void 0, void 0, false, debugPropValue || shouldPrintDebug);
+              if (extractedMediaLikeProps && platform2 !== "native") {
+                for (const k in extractedMediaLikeProps) {
+                  const block = extractedMediaLikeProps[k];
+                  if (!block || typeof block !== "object") continue;
+                  const blockOut = getSplitStyles(block, staticConfig, defaultTheme, "", componentState, {
+                    ...styleProps,
+                    noClass: true,
+                    fallbackProps: completeProps
+                  }, void 0, void 0, void 0, void 0, false, debugPropValue || shouldPrintDebug);
+                  if (blockOut) {
+                    extractedMediaLikeProps[k] = {
+                      ...blockOut.style,
+                      ...blockOut.pseudos
+                    };
+                  }
+                }
+              }
               let outProps = {
                 ...(includeProps ? out.viewProps : {}),
                 ...out.style,
-                ...out.pseudos
+                ...out.pseudos,
+                ...extractedMediaLikeProps
               };
               for (const key in outProps) {
                 if (deoptProps.has(key)) {
                   shouldFlatten = false;
                 }
+                if (platform2 === "native" && key[0] === "$" && (key.startsWith("$theme-") || key.startsWith("$group-") && getGroupPseudo(key) !== "hover")) {
+                  shouldFlatten = false;
+                }
               }
               if (shouldPrintDebug) {
                 logger.info(`(${debugName})`);
@@ -1783,7 +1890,7 @@ function createExtractor({
             node,
             lineNumbers,
             filePath,
-            config: guiConfig,
+            config: hanzoguiConfig,
             flatNodeName,
             attemptEval,
             jsxPath: traversePath,

package/dist/extractor/extractHelpers.cjs

@@ -171,7 +171,7 @@ const isValidImport = (props, moduleName, componentName) => {
   return Boolean(getValidImport(props, moduleName, componentName));
 };
 const getValidComponentPackages = (0, import_memoize.memoize)(props => {
-  return [... /* @__PURE__ */new Set(["@hanzogui/core", "gui", ...(props.components || [])])];
+  return [... /* @__PURE__ */new Set(["@hanzogui/core", "hanzogui", ...(props.components || [])])];
 });
 const getValidComponentsPaths = (0, import_memoize.memoize)(props => {
   return getValidComponentPackages(props).flatMap(pkg => {

package/dist/extractor/extractMediaStyle.cjs

@@ -41,7 +41,7 @@ var t = __toESM(require("@babel/types"));
 var core = __toESM(require("@hanzogui/core"));
 var import_requireGuiCore = require("../helpers/requireGuiCore.cjs");
 var import_extractHelpers = require("./extractHelpers.cjs");
-function extractMediaStyle(props, ternary, jsxPath, guiConfig, sourcePath, importance = 0, shouldPrintDebug = false) {
+function extractMediaStyle(props, ternary, jsxPath, hanzoguiConfig, sourcePath, importance = 0, shouldPrintDebug = false) {
   const {
     getCSSStylesAtomic
   } = (0, import_requireGuiCore.requireGuiCore)("web");
@@ -52,9 +52,9 @@ function extractMediaStyle(props, ternary, jsxPath, guiConfig, sourcePath, impor
   const {
     key
   } = mt;
-  const mq = guiConfig.media[key];
+  const mq = hanzoguiConfig.media[key];
   if (!mq) {
-    console.error(`Media query "${key}" not found: ${Object.keys(guiConfig.media)}`);
+    console.error(`Media query "${key}" not found: ${Object.keys(hanzoguiConfig.media)}`);
     return null;
   }
   const getStyleObj = (styleObj, negate = false) => {
@@ -68,7 +68,7 @@ function extractMediaStyle(props, ternary, jsxPath, guiConfig, sourcePath, impor
     console.info("  media query, no styles?");
     return null;
   }
-  const mediaKeys = Object.keys(guiConfig.media);
+  const mediaKeys = Object.keys(hanzoguiConfig.media);
   const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {
     acc[cur] = new Array(importance + 1).fill(":root").join("");
     return acc;
@@ -80,7 +80,7 @@ function extractMediaStyle(props, ternary, jsxPath, guiConfig, sourcePath, impor
   } of styleOpts) {
     const styles = getCSSStylesAtomic(styleObj);
     const singleMediaStyles = styles.map(style => {
-      const mediaStyle = core.createMediaStyle(style, key, guiConfig.media, true, negate);
+      const mediaStyle = core.createMediaStyle(style, key, hanzoguiConfig.media, true, negate);
       const className = `.${mediaStyle[core.StyleObjectIdentifier]}`;
       return {
         ...mediaStyle,

package/dist/extractor/extractToClassNames.cjs

@@ -94,7 +94,7 @@ async function extractToClassNames({
   }
   tm.mark(`babel-parse`, shouldPrintDebug === "verbose");
   const cssMap = /* @__PURE__ */new Map();
-  const guiConfig = extractor.getGui();
+  const hanzoguiConfig = extractor.getGui();
   const res = await extractor.parse(ast, {
     shouldPrintDebug,
     ...options,
@@ -136,6 +136,41 @@ async function extractToClassNames({
       let baseFontFamily = "";
       let mediaStylesSeen = 1;
       const comment = util.format("/* %s:%s (%s) */", filePath, lineNumbers, originalNodeName);
+      let staticGroupName = null;
+      for (const attr of jsxPath.node.openingElement.attributes) {
+        if (!t.isJSXAttribute(attr) || !t.isJSXIdentifier(attr.name)) continue;
+        if (attr.name.name !== "group") continue;
+        if (t.isStringLiteral(attr.value)) {
+          staticGroupName = attr.value.value;
+        } else if (t.isJSXExpressionContainer(attr.value) && t.isStringLiteral(attr.value.expression)) {
+          staticGroupName = attr.value.expression.value;
+        }
+        break;
+      }
+      if (staticGroupName) {
+        const containerIdentifier = `t_group_${staticGroupName}`;
+        const containerType = hanzoguiConfig.settings?.webContainerType || "inline-size";
+        const containerSelector = `.${containerIdentifier}`;
+        if (!cssMap.has(containerSelector)) {
+          cssMap.set(containerSelector, {
+            css: `${containerSelector} { container-name: ${staticGroupName}; container-type: ${containerType}; }`,
+            commentTexts: [comment]
+          });
+        } else {
+          cssMap.get(containerSelector).commentTexts.push(comment);
+        }
+      }
+      const hasCSSOnlyAnimationDriver = hanzoguiConfig.animations.outputStyle === "css" && !hanzoguiConfig.animationDrivers;
+      let elementIsAnimated = false;
+      for (const attr of jsxPath.node.openingElement.attributes) {
+        if (!t.isJSXAttribute(attr) || !t.isJSXIdentifier(attr.name)) continue;
+        const n = attr.name.name;
+        if (n === "transition" && hasCSSOnlyAnimationDriver) continue;
+        if (n === "animation" || n === "transition" || n === "animateOnly" || n === "animatePresence" || n === "animatedBy" || n === "enterStyle" || n === "exitStyle") {
+          elementIsAnimated = true;
+          break;
+        }
+      }
       function addStyle(style) {
         const identifier = style[import_web.StyleObjectIdentifier];
         const rules = style[import_web.StyleObjectRules];
@@ -158,17 +193,27 @@ async function extractToClassNames({
           const property = style2[0];
           const mediaName = property.slice(1);
           if (mediaName.startsWith("group-")) {
-            throw new import_errors.BailOptimizationError();
+            if (elementIsAnimated) {
+              throw new import_errors.BailOptimizationError();
+            }
+            const mediaStyle = createMediaStyle(style2, mediaName, extractor.getGui().media, "group", false, mediaStylesSeen);
+            const identifier2 = addStyle(mediaStyle);
+            classNames.push(identifier2);
+            continue;
           }
           const mediaTypeMatch = mediaName.match(/^(theme|platform)-/);
           if (mediaTypeMatch) {
             const mediaType = mediaTypeMatch[1];
-            const mediaStyle = createMediaStyle(style2, mediaName, extractor.getGui().media, mediaType, false, mediaStylesSeen);
+            if (mediaType === "theme" && elementIsAnimated) {
+              throw new import_errors.BailOptimizationError();
+            }
+            const innerKey = mediaType === "theme" ? mediaName.slice("theme-".length) : mediaName;
+            const mediaStyle = createMediaStyle(style2, innerKey, extractor.getGui().media, mediaType, false, mediaStylesSeen);
             const identifier2 = addStyle(mediaStyle);
             classNames.push(identifier2);
             continue;
           }
-          if (mediaName in guiConfig.media) {
+          if (mediaName in hanzoguiConfig.media) {
             const mediaStyle = createMediaStyle(style2, mediaName, extractor.getGui().media, true, false, mediaStylesSeen);
             const identifier2 = addStyle(mediaStyle);
             classNames.push(identifier2);
@@ -249,6 +294,9 @@ async function extractToClassNames({
       if (baseFontFamily) {
         baseClassNameStr = `font_${baseFontFamily}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`;
       }
+      if (staticGroupName) {
+        baseClassNameStr = `t_group_${staticGroupName}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`;
+      }
       const baseTypeClass = staticConfig.isText ? "is_Text" : "is_View";
       baseClassNameStr = `${baseTypeClass}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`;
       const componentNameFinal = staticConfig.componentName;

package/dist/extractor/extractToNative.cjs

@@ -62,7 +62,7 @@ const importWithStyle = import_template.default.ast(`import { _withStableStyle }
 const extractor = (0, import_createExtractor.createExtractor)({
   platform: "native"
 });
-let guiBuildOptionsLoaded;
+let hanzoguiBuildOptionsLoaded;
 function extractToNative(sourceFileName, sourceCode, options) {
   const ast = (0, import_parser.parse)(sourceCode, {
     sourceType: "module",
@@ -88,7 +88,7 @@ function getBabelPlugin() {
 }
 function getBabelParseDefinition(options) {
   return {
-    name: "gui",
+    name: "hanzogui",
     visitor: {
       Program: {
         enter(root) {
@@ -122,12 +122,12 @@ function getBabelParseDefinition(options) {
             return;
           }
           if (!options.config && !options.components) {
-            guiBuildOptionsLoaded ||= (0, import_loadGui.loadGuiBuildConfigSync)({});
+            hanzoguiBuildOptionsLoaded ||= (0, import_loadGui.loadGuiBuildConfigSync)({});
           }
           const finalOptions = {
             // @ts-ignore just in case they leave it out
             platform: "native",
-            ...guiBuildOptionsLoaded,
+            ...hanzoguiBuildOptionsLoaded,
             ...options
           };
           const printLog = (0, import_createLogger.createLogger)(sourcePath, finalOptions);
@@ -178,6 +178,7 @@ function getBabelParseDefinition(options) {
                 const stylesExpr = t.arrayExpression([]);
                 const hocStylesExpr = t.arrayExpression([]);
                 const expressions = [];
+                const mediaExpressionIndexes = /* @__PURE__ */new Set();
                 const finalAttrs = [];
                 const themeKeysUsed = /* @__PURE__ */new Set();
                 function getStyleExpression(style, forTernary = false) {
@@ -253,7 +254,14 @@ function getBabelParseDefinition(options) {
                         if (attr.value.inlineMediaQuery) {
                           hasMediaKeys = true;
                         }
-                        expressions.push(attr.value.test);
+                        let expression = attr.value.test;
+                        if (attr.value.inlineMediaQuery && t.isLogicalExpression(attr.value.test, {
+                          operator: "&&"
+                        }) && t.isStringLiteral(attr.value.test.left)) {
+                          expression = t.arrayExpression([t.stringLiteral(attr.value.inlineMediaQuery), t.unaryExpression("!", t.unaryExpression("!", attr.value.test.right))]);
+                          mediaExpressionIndexes.add(expressions.length);
+                        }
+                        expressions.push(expression);
                         addStyleExpression(t.conditionalExpression(t.identifier(`_expressions[${expressions.length - 1}]`), consExpr || t.nullLiteral(), altExpr || t.nullLiteral()), true);
                         const styleExpr = t.conditionalExpression(attr.value.test, consExpr || t.nullLiteral(), altExpr || t.nullLiteral());
                         addStyleExpression(styleExpr);
@@ -273,7 +281,7 @@ function getBabelParseDefinition(options) {
                   }
                 }
                 props.node.attributes = finalAttrs;
-                if (themeKeysUsed.size || hocStylesExpr.elements.length > 1 || hasDynamicStyle) {
+                if (themeKeysUsed.size || hocStylesExpr.elements.length > 1 || hasDynamicStyle || hasMediaKeys) {
                   if (!hasImportedViewWrapper) {
                     root.unshiftContainer("body", importWithStyle);
                     hasImportedViewWrapper = true;
@@ -292,7 +300,7 @@ function getBabelParseDefinition(options) {
                     props.jsxPath.node.closingElement.name = t.jsxIdentifier(wrapperName);
                   }
                   if (expressions.length) {
-                    const safeExpressions = expressions.map(expr => t.isStringLiteral(expr) ? expr : t.unaryExpression("!", t.unaryExpression("!", expr)));
+                    const safeExpressions = expressions.map((expr, index) => t.isStringLiteral(expr) || mediaExpressionIndexes.has(index) ? expr : t.unaryExpression("!", t.unaryExpression("!", expr)));
                     props.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("_expressions"), t.jsxExpressionContainer(t.arrayExpression(safeExpressions))));
                   }
                 } else {
@@ -336,7 +344,7 @@ function getBabelParseDefinition(options) {
 }
 function assertValidTag(node) {
   if (node.attributes.find(x => x.type === "JSXAttribute" && x.name.name === "style")) {
-    if (process.env.DEBUG?.startsWith("gui")) {
+    if (process.env.DEBUG?.startsWith("hanzogui")) {
       console.warn("\u26A0\uFE0F Cannot pass style attribute to extracted style");
     }
   }

package/dist/extractor/getPrefixLogs.cjs

@@ -27,5 +27,5 @@ __export(getPrefixLogs_exports, {
 module.exports = __toCommonJS(getPrefixLogs_exports);
 var import_cli_color = require("@hanzogui/cli-color");
 function getPrefixLogs(options) {
-  return options?.prefixLogs ?? ` \u{1F425} [gui]  ${(0, import_cli_color.colorString)(import_cli_color.Color.FgYellow, options?.platform || "web")}`;
+  return options?.prefixLogs ?? ` \u{1F425} [hanzogui]  ${(0, import_cli_color.colorString)(import_cli_color.Color.FgYellow, options?.platform || "web")}`;
 }

package/dist/extractor/getStaticBindingsForScope.cjs

@@ -141,8 +141,8 @@ async function getStaticBindingsForScope(scope, whitelist = [], sourcePath, bind
         }
       } catch (err) {
         if (shouldPrintDebug) {
-          console.warn(`    | Skipping partial evaluation of constant file: ${moduleName} (DEBUG=gui for more)`);
-        } else if (process.env.DEBUG?.startsWith("gui")) {
+          console.warn(`    | Skipping partial evaluation of constant file: ${moduleName} (DEBUG=hanzogui for more)`);
+        } else if (process.env.DEBUG?.startsWith("hanzogui")) {
           console.info(`Error in partial evaluation`, err.message, err.stack);
         }
       }