@yak/react 0.0.0-stage → 10.0.0-rc.1

package/runtime/styledDom.tsx

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

package/withYak/allow-global-css.ts

@@ -0,0 +1,94 @@
+import { existsSync } from "node:fs";
+import path from "node:path";
+
+interface WebpackConfig {
+  module?: { rules?: unknown[] };
+}
+
+interface Rule {
+  test?: unknown;
+  issuer?: unknown;
+  use?: unknown;
+  oneOf?: unknown;
+  rules?: unknown;
+}
+
+export function hasAppDir(projectDir: string): boolean {
+  return (
+    // mirrors next.js's `findDir(dir, "app")`
+    // https://github.com/vercel/next.js/blob/v16.3.4/packages/next/src/lib/find-pages-dir.ts#L4-L13
+    existsSync(path.join(projectDir, "app")) || existsSync(path.join(projectDir, "src", "app"))
+  );
+}
+
+/**
+ * Next.js (pages router) only allows global CSS imports from `_app`.
+ * Everywhere else it expects CSS Modules. Yak's co-located `*.yak.css`
+ * files are plain global CSS, because yak already hashes the class names
+ * itself, so there's no risk of leaking styles
+ *
+ * Next.js has no option to allow this, so we copy its `_app` global CSS
+ * rule without the `_app` issuer check and limit the copy to `.yak.css`.
+ * The copy goes to the start of the same `oneOf`, so it matches before
+ * Next's error rules.
+ */
+export function allowYakGlobalCss(webpackConfig: WebpackConfig) {
+  const rules = webpackConfig.module?.rules;
+  if (!Array.isArray(rules)) {
+    return;
+  }
+
+  // Next.js's internal `regexCssGlobal` source
+  // https://github.com/vercel/next.js/blob/v16.3.4/packages/next/src/build/webpack/config/blocks/css/index.ts#L23
+  const nextGlobalCssRegExpSource = "(?<!\\.module)\\.css$";
+
+  const isRule = (value: unknown): value is Rule =>
+    typeof value === "object" && value !== null && !Array.isArray(value);
+
+  // Next.js sets `issuer: { and: [ctx.customAppFile] }`, where
+  // `customAppFile` is a RegExp for the path of `pages/_app`
+  // https://github.com/vercel/next.js/blob/v16.3.4/packages/next/src/build/webpack-config.ts#L2550-L2552
+  const hasAppIssuer = (rule: Rule): boolean => {
+    if (!isRule(rule.issuer)) return false;
+    const and = (rule.issuer as { and?: unknown }).and;
+    return Array.isArray(and) && and[0] instanceof RegExp && and[0].source.endsWith("_app");
+  };
+
+  const isAppGlobalCssRule = (rule: Rule): boolean =>
+    rule.test instanceof RegExp &&
+    rule.test.source === nextGlobalCssRegExpSource &&
+    hasAppIssuer(rule) &&
+    Array.isArray(rule.use);
+
+  const findAppRule = (ruleList: unknown): { oneOf: unknown[]; appRule: Rule } | undefined => {
+    if (!Array.isArray(ruleList)) return undefined;
+    for (const rule of ruleList) {
+      if (!isRule(rule)) continue;
+      if (Array.isArray(rule.oneOf)) {
+        const appRule = rule.oneOf.find(
+          (item): item is Rule => isRule(item) && isAppGlobalCssRule(item),
+        );
+        if (appRule) return { oneOf: rule.oneOf, appRule };
+      }
+      const found = findAppRule(rule.oneOf) ?? findAppRule(rule.rules);
+      if (found) return found;
+    }
+    return undefined;
+  };
+
+  const found = findAppRule(rules);
+  if (!found) {
+    console.warn(
+      "@yak/react: could not find the next.js global-CSS rules. " +
+        "Please report this issue with your Next.js version at " +
+        "https://github.com/DigitecGalaxus/next-yak/issues/new",
+    );
+    return;
+  }
+
+  found.oneOf.unshift({
+    test: /\.yak\.css$/,
+    sideEffects: true,
+    use: [...(found.appRule.use as unknown[])],
+  });
+}

package/withYak/index.ts

@@ -0,0 +1,268 @@
+/// <reference types="node" />
+import type { NextConfig } from "next";
+import path from "node:path";
+import { allowYakGlobalCss, hasAppDir } from "./allow-global-css.ts";
+import {
+  buildYakPluginOptions,
+  resolveYakContext,
+  type YakConfigOptions,
+} from "yak-internals/config";
+
+export { buildYakPluginOptions, resolveYakContext } from "yak-internals/config";
+export type { YakConfigOptions } from "yak-internals/config";
+
+const currentDir = import.meta.dirname;
+
+const addYak = (yakOptions: YakConfigOptions, nextConfig: NextConfig) => {
+  const yakPluginOptions = buildYakPluginOptions(yakOptions, currentDir);
+
+  if (process.env.TURBOPACK === "1" || process.env.TURBOPACK === "auto") {
+    addYakTurbopack(nextConfig, yakOptions, {
+      ...yakPluginOptions,
+      importMode: {
+        value: "data:text/css;base64,",
+        encoding: "Base64",
+      },
+    });
+  } else {
+    addYakWebpack(nextConfig, yakOptions, {
+      ...yakPluginOptions,
+      importMode: {
+        value: "./{{__BASE_NAME__}}.yak.css!=!./{{__BASE_NAME__}}?./{{__BASE_NAME__}}.yak.css",
+        encoding: "None",
+      },
+    });
+  }
+  return nextConfig;
+};
+
+/**
+ * Configure Turbopack with yak loader for CSS-in-JS transformation
+ * @param nextConfig - Next.js configuration object
+ * @param yakOptions - Yak configuration options
+ * @param yakPluginOptions - Processed plugin options for yak-swc
+ */
+function addYakTurbopack(
+  nextConfig: NextConfig,
+  yakOptions: YakConfigOptions,
+  yakPluginOptions: {
+    minify: boolean;
+    basePath: string;
+    prefix?: string;
+    displayNames: boolean;
+    foldStatic: boolean;
+    strictCssProp: boolean;
+    importMode: {
+      value: string;
+      encoding: string;
+    };
+  },
+) {
+  // turbopack can't handle options with undefined values, so we remove them
+  const yakLoader = removeUndefinedRecursive({
+    loader: path.join(currentDir, "../loaders/turbo-loader.js"),
+    options: {
+      yakOptions: yakOptions,
+      yakPluginOptions: yakPluginOptions,
+    },
+  }) as { loader: string; options: {} };
+
+  nextConfig.turbopack ||= {};
+  nextConfig.turbopack.rules ||= {};
+
+  const ruleKey = "*.{js,jsx,cjs,mjs,ts,tsx,cts,mts}";
+  const rule = {
+    loaders: [] as { loader: string; options: {} }[],
+    ...nextConfig.turbopack.rules[ruleKey],
+  };
+  rule.loaders.push(yakLoader);
+  nextConfig.turbopack.rules[ruleKey] = rule;
+
+  // Configure resolveAlias for custom yak context (similar to webpack)
+  // This allows users to provide a custom context file that will be used
+  // instead of the default baseContext
+  const yakContext = resolveYakContext(yakOptions.contextPath, process.cwd());
+  if (yakContext) {
+    nextConfig.turbopack.resolveAlias ||= {};
+    nextConfig.turbopack.resolveAlias["@yak/react/context/baseContext"] =
+      // This is a hack around the fact that turbopack currently only supports relative paths
+      // turbopack: "server relative imports are not implemented yet"
+      // Relative is quite dangerous here as it relies on the cwd being the starting point
+      `./${path.relative(process.cwd(), yakContext)}`;
+  }
+}
+
+/**
+ * Configure Webpack with yak SWC plugin and webpack loader for CSS-in-JS transformation
+ * @param nextConfig - Next.js configuration object
+ * @param yakOptions - Yak configuration options
+ * @param yakPluginOptions - Processed plugin options for yak-swc
+ */
+function addYakWebpack(
+  nextConfig: NextConfig,
+  yakOptions: YakConfigOptions,
+  yakPluginOptions: {
+    minify: boolean;
+    basePath: string;
+    prefix?: string;
+    displayNames: boolean;
+    foldStatic: boolean;
+    strictCssProp: boolean;
+    importMode: {
+      value: string;
+      encoding: string;
+    };
+  },
+) {
+  // Add SWC plugin for Webpack
+  nextConfig.experimental ||= {};
+  nextConfig.experimental.swcPlugins ||= [];
+  nextConfig.experimental.swcPlugins.push(["@yak/swc", yakPluginOptions]);
+
+  // Configure webpack loader
+  const previousConfig = nextConfig.webpack;
+  nextConfig.webpack = (webpackConfig, options) => {
+    if (previousConfig) {
+      webpackConfig = previousConfig(webpackConfig, options);
+    }
+
+    if (!options.isServer && !hasAppDir(options.dir)) {
+      // Next.js restricts global CSS imports only in the client build of a pages-only project, so only patch its rules there
+      allowYakGlobalCss(webpackConfig);
+    }
+
+    webpackConfig.module.rules.push({
+      test: /\.yak\.css$/,
+      loader: path.join(currentDir, "../loaders/webpack-loader.js"),
+      options: yakOptions,
+    });
+
+    // With the following alias the internal @yak/react code
+    // is able to import a context which works for server components
+    const yakContext = resolveYakContext(
+      yakOptions.contextPath,
+      webpackConfig.context || process.cwd(),
+    );
+    if (yakContext) {
+      webpackConfig.resolve.alias["@yak/react/context/baseContext"] = yakContext;
+    }
+
+    return webpackConfig;
+  };
+}
+
+/**
+ * Recursively removes undefined values from an object or array.
+ *
+ * This function deeply traverses the input object/array and creates a new structure
+ * with all undefined values filtered out. For objects, properties with undefined values
+ * are omitted. For arrays, undefined elements are removed from the result.
+ *
+ * @param obj - The object or array to process
+ * @returns A new object/array with undefined values removed, or the original value if no changes were needed
+ */
+function removeUndefinedRecursive<T>(obj: T): {} {
+  if (typeof obj !== "object" || obj === null) {
+    return obj as {};
+  }
+
+  if (Array.isArray(obj)) {
+    const filtered: unknown[] = [];
+    for (let i = 0; i < obj.length; i++) {
+      const processed = removeUndefinedRecursive(obj[i]);
+      if (processed !== undefined) {
+        filtered.push(processed);
+      }
+    }
+    return filtered as {};
+  }
+
+  const newObj: Record<string, unknown> = {};
+  let hasChanges = false;
+
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      const value = removeUndefinedRecursive((obj as any)[key]);
+      if (value !== undefined) {
+        newObj[key] = value;
+        hasChanges = true;
+      }
+    }
+  }
+
+  return hasChanges ? (newObj as {}) : obj;
+}
+
+// Wrapper to allow sync, async, and function configuration of Next.js
+/**
+ * Add Yak to your Next.js app
+ *
+ * @usage
+ *
+ * ```ts
+ * // next.config.js
+ * const { withYak } = require("@yak/react/withYak");
+ * const nextConfig = {
+ *   // your next config here
+ * };
+ * module.exports = withYak(nextConfig);
+ * ```
+ *
+ * With a custom yakConfig
+ *
+ * ```ts
+ * // next.config.js
+ * const { withYak } = require("@yak/react/withYak");
+ * const nextConfig = {
+ *   // your next config here
+ * };
+ * const yakConfig = {
+ *   // Optional prefix for generated CSS identifiers
+ *   prefix: "my-app",
+ *   // Other yak config options...
+ * };
+ * module.exports = withYak(yakConfig, nextConfig);
+ * ```
+ */
+export const withYak: {
+  <
+    T extends
+      | Record<string, any>
+      | ((...args: any[]) => Record<string, any>)
+      | ((...args: any[]) => Promise<Record<string, any>>),
+  >(
+    yakOptions: YakConfigOptions,
+    nextConfig: T,
+  ): T;
+  // no yakConfig
+  <
+    T extends
+      | Record<string, any>
+      | ((...args: any[]) => Record<string, any>)
+      | ((...args: any[]) => Promise<Record<string, any>>),
+  >(
+    nextConfig: T,
+    _?: undefined,
+  ): T;
+} = (maybeYakOptions, nextConfig) => {
+  if (nextConfig === undefined) {
+    return withYak({}, maybeYakOptions);
+  }
+  // If the second parameter is present the first parameter must be a YakConfigOptions
+  const yakOptions = maybeYakOptions as YakConfigOptions;
+  if (typeof nextConfig === "function") {
+    /**
+     * A NextConfig can be a sync or async function
+     * https://nextjs.org/docs/pages/api-reference/next-config-js
+     * @param {any[]} args
+     */
+    return (...args) => {
+      /** Dynamic Next Configs can be async or sync */
+      const config = nextConfig(...args) as NextConfig | Promise<NextConfig>;
+      return config instanceof Promise
+        ? config.then((config) => addYak(yakOptions, config))
+        : addYak(yakOptions, config);
+    };
+  }
+  return addYak(yakOptions, nextConfig);
+};