next-yak/dist/internal.js

next-yak is a CSS-in-JS solution tailored for Next.js that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration

// runtime/cssLiteral.tsx
var yakComponentSymbol = Symbol("yak");
function css(...args) {
  const classNames = [];
  const dynamicCssFunctions = [];
  const style = {};
  for (const arg of args) {
    if (typeof arg === "string") {
      classNames.push(arg);
    } else if (typeof arg === "function") {
      dynamicCssFunctions.push(arg);
    } else if (typeof arg === "object" && "style" in arg) {
      for (const key in arg.style) {
        const value = arg.style[key];
        if (typeof value === "function") {
          dynamicCssFunctions.push((props) => ({
            style: {
              [key]: String(
                // The value for a css value can be a theme dependent function e.g.:
                // const borderColor = (props: { theme: { mode: "dark" | "light" } }) => props.theme === "dark" ? "black" : "white";
                // css`border-color: ${borderColor};`
                // Therefore the value has to be extracted recursively
                recursivePropExecution(props, value)
              )
            }
          }));
        } else {
          style[key] = value;
        }
      }
    }
  }
  if (dynamicCssFunctions.length === 0) {
    const className = classNames.join(" ");
    return () => ({ className, style });
  }
  return (props) => {
    const allClassNames = [...classNames];
    const allStyles = { ...style };
    for (let i = 0; i < dynamicCssFunctions.length; i++) {
      unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);
    }
    return {
      className: allClassNames.join(" "),
      style: allStyles
    };
  };
}
var unwrapProps = (props, fn, classNames, style) => {
  let result = fn(props);
  while (result) {
    if (typeof result === "function") {
      result = result(props);
      continue;
    } else if (typeof result === "object") {
      if ("className" in result && result.className) {
        classNames.push(result.className);
      }
      if ("style" in result && result.style) {
        for (const key in result.style) {
          style[key] = result.style[key];
        }
      }
    }
    break;
  }
};
var recursivePropExecution = (props, fn) => {
  const result = fn(props);
  if (typeof result === "function") {
    return recursivePropExecution(props, result);
  }
  if (process.env.NODE_ENV === "development") {
    if (typeof result !== "string" && typeof result !== "number" && !(result instanceof String)) {
      throw new Error(
        `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(
          result
        )}

Dynamic CSS function: ${fn.toString()}
`
      );
    }
  }
  return result;
};

// runtime/styled.tsx
import React from "react";
import { useTheme } from "next-yak/context";
var noTheme = {};
var StyledFactory = (Component) => Object.assign(yakStyled(Component), {
  attrs: (attrs) => yakStyled(Component, attrs)
});
var yakStyled = (Component, attrs) => {
  const isYakComponent = typeof Component !== "string" && yakComponentSymbol in Component;
  const [parentYakComponent, parentAttrsFn] = isYakComponent ? Component[yakComponentSymbol] : [];
  const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);
  return (styles, ...values) => {
    const getRuntimeStyles = css(styles, ...values);
    const yak = (props) => {
      const theme = mergedAttrsFn || getRuntimeStyles.length ? useTheme() : noTheme;
      const combinedProps = "$__attrs" in props ? {
        theme,
        ...props
      } : (
        // overwrite and merge the current props with the processed attrs
        combineProps(
          {
            theme,
            ...props,
            // mark the props as processed
            $__attrs: true
          },
          mergedAttrsFn?.({ theme, ...props })
        )
      );
      const runtimeStyles = getRuntimeStyles(combinedProps);
      const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } = combinedProps;
      const propsBeforeFiltering = themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;
      const filteredProps = !isYakComponent ? removeNonDomProperties(propsBeforeFiltering) : propsBeforeFiltering;
      filteredProps.className = mergeClassNames(
        filteredProps.className,
        runtimeStyles.className
      );
      filteredProps.style = "style" in filteredProps ? {
        ...filteredProps.style,
        ...runtimeStyles.style
      } : runtimeStyles.style;
      return parentYakComponent ? (
        // if the styled(Component) syntax is used and the component is a yak component
        // we can call the yak function directly without running through react createElement
        parentYakComponent(filteredProps)
      ) : (
        // if the final component is a string component e.g. styled("div") or a custom non yak fn e.g. styled(MyComponent)
        /* @__PURE__ */ React.createElement(Component, { ...filteredProps })
      );
    };
    return Object.assign(yak, {
      [yakComponentSymbol]: [yak, mergedAttrsFn]
    });
  };
};
var styled = (
  // this type is wrong - but it will work correctly with compiled code
  StyledFactory
);
var removeNonDomProperties = (obj) => {
  const result = {};
  for (const key in obj) {
    if (!key.startsWith("$") && obj[key] !== void 0) {
      result[key] = obj[key];
    }
  }
  return result;
};
var mergeClassNames = (a, b) => {
  if (!a && !b) return void 0;
  if (!a) return b;
  if (!b) return a;
  return a + " " + b;
};
var combineProps = (props, newProps) => newProps ? (props.className === newProps.className || !newProps.className) && (props.style === newProps.style || !newProps.style) ? (
  // shortcut if no style and class merging is necessary
  {
    ...props,
    ...newProps
  }
) : (
  // merge class names and styles
  {
    ...props,
    ...newProps,
    className: mergeClassNames(props.className, newProps.className),
    style: { ...props.style || {}, ...newProps.style || {} }
  }
) : (
  // if no new props are provided, no merging is necessary
  props
);
var buildRuntimeAttrsProcessor = (attrs, parentAttrsFn) => {
  const ownAttrsFn = attrs && (typeof attrs === "function" ? attrs : () => attrs);
  if (ownAttrsFn && parentAttrsFn) {
    return (props) => {
      const parentProps = parentAttrsFn(props);
      return combineProps(
        parentProps,
        ownAttrsFn(combineProps(props, parentProps))
      );
    };
  }
  return ownAttrsFn || parentAttrsFn;
};

// runtime/atoms.tsx
var atoms = (...atoms2) => {
  const className = atoms2.join(" ");
  return () => ({ className });
};

// runtime/keyframes.tsx
var keyframes = (styles, ...dynamic) => {
  return styles;
};

// runtime/internal.ts
import { useTheme as useTheme2, YakThemeProvider } from "next-yak/context";

// runtime/internals/unitPostFix.ts
var unitPostFix = (arg, unit) => {
  switch (typeof arg) {
    case "function":
      return (props) => unitPostFix(arg(props), unit);
    case "number":
    case "string":
      return `${arg}${unit}`;
    // Ignore falsy values
    default:
      return void 0;
  }
};

// runtime/internals/mergeCssProp.ts
var mergeCssProp = (relevantProps, cssProp) => {
  return {
    className: relevantProps.className ? relevantProps.className + " " + cssProp.className : cssProp.className,
    style: { ...relevantProps.style ?? {}, ...cssProp.style }
  };
};

// runtime/styledDom.tsx
var __yak_a = /* @__PURE__ */ styled("a");
var __yak_abbr = /* @__PURE__ */ styled("abbr");
var __yak_address = /* @__PURE__ */ styled("address");
var __yak_area = /* @__PURE__ */ styled("area");
var __yak_article = /* @__PURE__ */ styled("article");
var __yak_aside = /* @__PURE__ */ styled("aside");
var __yak_audio = /* @__PURE__ */ styled("audio");
var __yak_b = /* @__PURE__ */ styled("b");
var __yak_base = /* @__PURE__ */ styled("base");
var __yak_bdi = /* @__PURE__ */ styled("bdi");
var __yak_bdo = /* @__PURE__ */ styled("bdo");
var __yak_big = /* @__PURE__ */ styled("big");
var __yak_blockquote = /* @__PURE__ */ styled("blockquote");
var __yak_body = /* @__PURE__ */ styled("body");
var __yak_br = /* @__PURE__ */ styled("br");
var __yak_button = /* @__PURE__ */ styled("button");
var __yak_canvas = /* @__PURE__ */ styled("canvas");
var __yak_caption = /* @__PURE__ */ styled("caption");
var __yak_cite = /* @__PURE__ */ styled("cite");
var __yak_code = /* @__PURE__ */ styled("code");
var __yak_col = /* @__PURE__ */ styled("col");
var __yak_colgroup = /* @__PURE__ */ styled("colgroup");
var __yak_data = /* @__PURE__ */ styled("data");
var __yak_datalist = /* @__PURE__ */ styled("datalist");
var __yak_dd = /* @__PURE__ */ styled("dd");
var __yak_del = /* @__PURE__ */ styled("del");
var __yak_details = /* @__PURE__ */ styled("details");
var __yak_dfn = /* @__PURE__ */ styled("dfn");
var __yak_dialog = /* @__PURE__ */ styled("dialog");
var __yak_div = /* @__PURE__ */ styled("div");
var __yak_dl = /* @__PURE__ */ styled("dl");
var __yak_dt = /* @__PURE__ */ styled("dt");
var __yak_em = /* @__PURE__ */ styled("em");
var __yak_embed = /* @__PURE__ */ styled("embed");
var __yak_fieldset = /* @__PURE__ */ styled("fieldset");
var __yak_figcaption = /* @__PURE__ */ styled("figcaption");
var __yak_figure = /* @__PURE__ */ styled("figure");
var __yak_footer = /* @__PURE__ */ styled("footer");
var __yak_form = /* @__PURE__ */ styled("form");
var __yak_h1 = /* @__PURE__ */ styled("h1");
var __yak_h2 = /* @__PURE__ */ styled("h2");
var __yak_h3 = /* @__PURE__ */ styled("h3");
var __yak_h4 = /* @__PURE__ */ styled("h4");
var __yak_h5 = /* @__PURE__ */ styled("h5");
var __yak_h6 = /* @__PURE__ */ styled("h6");
var __yak_header = /* @__PURE__ */ styled("header");
var __yak_hgroup = /* @__PURE__ */ styled("hgroup");
var __yak_hr = /* @__PURE__ */ styled("hr");
var __yak_html = /* @__PURE__ */ styled("html");
var __yak_i = /* @__PURE__ */ styled("i");
var __yak_iframe = /* @__PURE__ */ styled("iframe");
var __yak_img = /* @__PURE__ */ styled("img");
var __yak_input = /* @__PURE__ */ styled("input");
var __yak_ins = /* @__PURE__ */ styled("ins");
var __yak_kbd = /* @__PURE__ */ styled("kbd");
var __yak_keygen = /* @__PURE__ */ styled("keygen");
var __yak_label = /* @__PURE__ */ styled("label");
var __yak_legend = /* @__PURE__ */ styled("legend");
var __yak_li = /* @__PURE__ */ styled("li");
var __yak_link = /* @__PURE__ */ styled("link");
var __yak_main = /* @__PURE__ */ styled("main");
var __yak_map = /* @__PURE__ */ styled("map");
var __yak_mark = /* @__PURE__ */ styled("mark");
var __yak_menu = /* @__PURE__ */ styled("menu");
var __yak_menuitem = /* @__PURE__ */ styled("menuitem");
var __yak_meta = /* @__PURE__ */ styled("meta");
var __yak_meter = /* @__PURE__ */ styled("meter");
var __yak_nav = /* @__PURE__ */ styled("nav");
var __yak_noscript = /* @__PURE__ */ styled("noscript");
var __yak_object = /* @__PURE__ */ styled("object");
var __yak_ol = /* @__PURE__ */ styled("ol");
var __yak_optgroup = /* @__PURE__ */ styled("optgroup");
var __yak_option = /* @__PURE__ */ styled("option");
var __yak_output = /* @__PURE__ */ styled("output");
var __yak_p = /* @__PURE__ */ styled("p");
var __yak_param = /* @__PURE__ */ styled("param");
var __yak_picture = /* @__PURE__ */ styled("picture");
var __yak_pre = /* @__PURE__ */ styled("pre");
var __yak_progress = /* @__PURE__ */ styled("progress");
var __yak_q = /* @__PURE__ */ styled("q");
var __yak_rp = /* @__PURE__ */ styled("rp");
var __yak_rt = /* @__PURE__ */ styled("rt");
var __yak_ruby = /* @__PURE__ */ styled("ruby");
var __yak_s = /* @__PURE__ */ styled("s");
var __yak_samp = /* @__PURE__ */ styled("samp");
var __yak_script = /* @__PURE__ */ styled("script");
var __yak_section = /* @__PURE__ */ styled("section");
var __yak_select = /* @__PURE__ */ styled("select");
var __yak_small = /* @__PURE__ */ styled("small");
var __yak_source = /* @__PURE__ */ styled("source");
var __yak_span = /* @__PURE__ */ styled("span");
var __yak_strong = /* @__PURE__ */ styled("strong");
var __yak_style = /* @__PURE__ */ styled("style");
var __yak_sub = /* @__PURE__ */ styled("sub");
var __yak_summary = /* @__PURE__ */ styled("summary");
var __yak_sup = /* @__PURE__ */ styled("sup");
var __yak_table = /* @__PURE__ */ styled("table");
var __yak_tbody = /* @__PURE__ */ styled("tbody");
var __yak_td = /* @__PURE__ */ styled("td");
var __yak_textarea = /* @__PURE__ */ styled("textarea");
var __yak_tfoot = /* @__PURE__ */ styled("tfoot");
var __yak_th = /* @__PURE__ */ styled("th");
var __yak_thead = /* @__PURE__ */ styled("thead");
var __yak_time = /* @__PURE__ */ styled("time");
var __yak_tr = /* @__PURE__ */ styled("tr");
var __yak_track = /* @__PURE__ */ styled("track");
var __yak_u = /* @__PURE__ */ styled("u");
var __yak_ul = /* @__PURE__ */ styled("ul");
var __yak_use = /* @__PURE__ */ styled("use");
var __yak_var = /* @__PURE__ */ styled("var");
var __yak_video = /* @__PURE__ */ styled("video");
var __yak_wbr = /* @__PURE__ */ styled("wbr");
var __yak_circle = /* @__PURE__ */ styled("circle");
var __yak_clipPath = /* @__PURE__ */ styled("clipPath");
var __yak_defs = /* @__PURE__ */ styled("defs");
var __yak_ellipse = /* @__PURE__ */ styled("ellipse");
var __yak_foreignObject = /* @__PURE__ */ styled("foreignObject");
var __yak_g = /* @__PURE__ */ styled("g");
var __yak_image = /* @__PURE__ */ styled("image");
var __yak_line = /* @__PURE__ */ styled("line");
var __yak_linearGradient = /* @__PURE__ */ styled("linearGradient");
var __yak_marker = /* @__PURE__ */ styled("marker");
var __yak_mask = /* @__PURE__ */ styled("mask");
var __yak_path = /* @__PURE__ */ styled("path");
var __yak_pattern = /* @__PURE__ */ styled("pattern");
var __yak_polygon = /* @__PURE__ */ styled("polygon");
var __yak_polyline = /* @__PURE__ */ styled("polyline");
var __yak_radialGradient = /* @__PURE__ */ styled("radialGradient");
var __yak_rect = /* @__PURE__ */ styled("rect");
var __yak_stop = /* @__PURE__ */ styled("stop");
var __yak_svg = /* @__PURE__ */ styled("svg");
var __yak_text = /* @__PURE__ */ styled("text");
var __yak_tspan = /* @__PURE__ */ styled("tspan");
export {
  YakThemeProvider,
  __yak_a,
  __yak_abbr,
  __yak_address,
  __yak_area,
  __yak_article,
  __yak_aside,
  __yak_audio,
  __yak_b,
  __yak_base,
  __yak_bdi,
  __yak_bdo,
  __yak_big,
  __yak_blockquote,
  __yak_body,
  __yak_br,
  __yak_button,
  __yak_canvas,
  __yak_caption,
  __yak_circle,
  __yak_cite,
  __yak_clipPath,
  __yak_code,
  __yak_col,
  __yak_colgroup,
  __yak_data,
  __yak_datalist,
  __yak_dd,
  __yak_defs,
  __yak_del,
  __yak_details,
  __yak_dfn,
  __yak_dialog,
  __yak_div,
  __yak_dl,
  __yak_dt,
  __yak_ellipse,
  __yak_em,
  __yak_embed,
  __yak_fieldset,
  __yak_figcaption,
  __yak_figure,
  __yak_footer,
  __yak_foreignObject,
  __yak_form,
  __yak_g,
  __yak_h1,
  __yak_h2,
  __yak_h3,
  __yak_h4,
  __yak_h5,
  __yak_h6,
  __yak_header,
  __yak_hgroup,
  __yak_hr,
  __yak_html,
  __yak_i,
  __yak_iframe,
  __yak_image,
  __yak_img,
  __yak_input,
  __yak_ins,
  __yak_kbd,
  __yak_keygen,
  __yak_label,
  __yak_legend,
  __yak_li,
  __yak_line,
  __yak_linearGradient,
  __yak_link,
  __yak_main,
  __yak_map,
  __yak_mark,
  __yak_marker,
  __yak_mask,
  __yak_menu,
  __yak_menuitem,
  mergeCssProp as __yak_mergeCssProp,
  __yak_meta,
  __yak_meter,
  __yak_nav,
  __yak_noscript,
  __yak_object,
  __yak_ol,
  __yak_optgroup,
  __yak_option,
  __yak_output,
  __yak_p,
  __yak_param,
  __yak_path,
  __yak_pattern,
  __yak_picture,
  __yak_polygon,
  __yak_polyline,
  __yak_pre,
  __yak_progress,
  __yak_q,
  __yak_radialGradient,
  __yak_rect,
  __yak_rp,
  __yak_rt,
  __yak_ruby,
  __yak_s,
  __yak_samp,
  __yak_script,
  __yak_section,
  __yak_select,
  __yak_small,
  __yak_source,
  __yak_span,
  __yak_stop,
  __yak_strong,
  __yak_style,
  __yak_sub,
  __yak_summary,
  __yak_sup,
  __yak_svg,
  __yak_table,
  __yak_tbody,
  __yak_td,
  __yak_text,
  __yak_textarea,
  __yak_tfoot,
  __yak_th,
  __yak_thead,
  __yak_time,
  __yak_tr,
  __yak_track,
  __yak_tspan,
  __yak_u,
  __yak_ul,
  unitPostFix as __yak_unitPostFix,
  __yak_use,
  __yak_var,
  __yak_video,
  __yak_wbr,
  atoms,
  css,
  keyframes,
  styled,
  useTheme2 as useTheme
};
//# sourceMappingURL=internal.js.map