merchify-ui/dist/chunk-NLU55MKH.js

React components for merchandise visualization and customization

// src/utils/dev-warnings.ts
var hasCheckedConfig = false;
var configCheckPassed = false;
function checkTailwindConfig() {
  if (process.env.NODE_ENV !== "development") return true;
  if (hasCheckedConfig) return configCheckPassed;
  hasCheckedConfig = true;
  try {
    const testElement = document.createElement("div");
    testElement.className = "bg-background text-foreground";
    testElement.style.position = "absolute";
    testElement.style.visibility = "hidden";
    testElement.style.pointerEvents = "none";
    document.body.appendChild(testElement);
    const styles = window.getComputedStyle(testElement);
    const hasBackgroundColor = styles.backgroundColor && styles.backgroundColor !== "rgba(0, 0, 0, 0)";
    const hasTextColor = styles.color && styles.color !== "rgb(0, 0, 0)";
    document.body.removeChild(testElement);
    if (!hasBackgroundColor || !hasTextColor) {
      console.error(
        "%c\u{1F6A8} merchify-ui: Tailwind styles not detected!",
        "font-size: 14px; font-weight: bold; color: #ef4444;",
        "\n\n\u274C Your components may look unstyled.\n\nCommon causes:\n  1. Missing or incorrect @source paths in globals.css\n  2. Forgot to restart dev server after changing globals.css\n  3. Tailwind CSS not imported in globals.css\n\nQuick fix:\n  Run: npx merchify-cli init\n\nOr manually check:\n  https://merchify-site-staging.driuqzy.workers.dev/llm-kit/latest/theme-setup.md\n"
      );
      configCheckPassed = false;
      return false;
    }
    console.log(
      "%c\u2705 merchify-ui: Tailwind configuration verified",
      "font-size: 12px; color: #10b981;"
    );
    configCheckPassed = true;
    return true;
  } catch (error) {
    console.warn("merchify-ui: Could not verify Tailwind configuration", error);
    configCheckPassed = false;
    return false;
  }
}
function checkComponentStyles(element, componentName) {
  if (process.env.NODE_ENV !== "development") return true;
  if (!element) return false;
  try {
    const styles = window.getComputedStyle(element);
    const hasStyles = styles.backgroundColor && styles.backgroundColor !== "rgba(0, 0, 0, 0)" || styles.padding && styles.padding !== "0px" || styles.margin && styles.margin !== "0px" || styles.display && !["inline", "block"].includes(styles.display);
    if (!hasStyles) {
      console.warn(
        `%c\u26A0\uFE0F ${componentName}: Missing Tailwind styles`,
        "font-size: 12px; color: #f59e0b;",
        "\nComponent may not render correctly.\nCheck @source configuration in globals.css or run: npx merchify-cli init"
      );
      return false;
    }
    return true;
  } catch (error) {
    return false;
  }
}
function checkThemeTokens() {
  if (process.env.NODE_ENV !== "development") return true;
  try {
    const requiredTokens = [
      "--color-background",
      "--color-foreground",
      "--color-primary",
      "--color-card"
    ];
    const rootStyles = getComputedStyle(document.documentElement);
    const missingTokens = requiredTokens.filter(
      (token) => !rootStyles.getPropertyValue(token)
    );
    if (missingTokens.length > 0) {
      console.warn(
        "%c\u26A0\uFE0F merchify-ui: Missing theme tokens",
        "font-size: 12px; color: #f59e0b;",
        `
Missing: ${missingTokens.join(", ")}

Components may not render correctly.
Add theme tokens to globals.css:
  https://merchify-site-staging.driuqzy.workers.dev/llm-kit/latest/themes.css`
      );
      return false;
    }
    return true;
  } catch (error) {
    return false;
  }
}
function runConfigChecks() {
  if (process.env.NODE_ENV !== "development") return true;
  const tailwindOk = checkTailwindConfig();
  const themesOk = checkThemeTokens();
  return tailwindOk && themesOk;
}

export {
  checkTailwindConfig,
  checkComponentStyles,
  checkThemeTokens,
  runConfigChecks
};
//# sourceMappingURL=chunk-NLU55MKH.js.map