@typestyles/next 0.0.0-unstable.015bb9921923

package/dist/index.js

@@ -0,0 +1,57 @@
+// src/server.ts
+import { collectStyles, getRegisteredCss } from "typestyles/server";
+async function collectStylesFromComponent(component) {
+  const { renderToString } = await import("react-dom/server");
+  const { css } = collectStyles(() => renderToString(component));
+  return css;
+}
+async function getTypestylesMetadata(component) {
+  return collectStylesFromComponent(component);
+}
+
+// src/client.tsx
+import { useState, useEffect, useServerInsertedHTML, useSyncExternalStore } from "react";
+import { getRegisteredCss as getRegisteredCss2 } from "typestyles/server";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useTypestyles() {
+  return useSyncExternalStore(
+    () => () => {
+    },
+    () => getRegisteredCss2(),
+    () => ""
+  );
+}
+function TypestylesStylesheet({ children }) {
+  const [css, setCss] = useState("");
+  useServerInsertedHTML(() => {
+    const registeredCss = getRegisteredCss2();
+    if (registeredCss) {
+      return /* @__PURE__ */ jsx("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
+    }
+    return null;
+  });
+  useEffect(() => {
+    setCss(getRegisteredCss2());
+  }, []);
+  if (children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      /* @__PURE__ */ jsx("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
+    ] });
+  }
+  return null;
+}
+function createTypestylesLayout(layout) {
+  return function TypestylesLayout(props) {
+    return /* @__PURE__ */ jsx(TypestylesStylesheet, { children: layout(props) });
+  };
+}
+export {
+  TypestylesStylesheet,
+  collectStylesFromComponent,
+  createTypestylesLayout,
+  getRegisteredCss,
+  getTypestylesMetadata,
+  useServerInsertedHTML,
+  useTypestyles
+};

package/dist/server.cjs

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  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;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/server.ts
+var server_exports = {};
+__export(server_exports, {
+  collectStylesFromComponent: () => collectStylesFromComponent,
+  getRegisteredCss: () => import_server.getRegisteredCss,
+  getTypestylesMetadata: () => getTypestylesMetadata
+});
+module.exports = __toCommonJS(server_exports);
+var import_server = require("typestyles/server");
+async function collectStylesFromComponent(component) {
+  const { renderToString } = await import("react-dom/server");
+  const { css } = (0, import_server.collectStyles)(() => renderToString(component));
+  return css;
+}
+async function getTypestylesMetadata(component) {
+  return collectStylesFromComponent(component);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  collectStylesFromComponent,
+  getRegisteredCss,
+  getTypestylesMetadata
+});

package/dist/server.js

@@ -0,0 +1,15 @@
+// src/server.ts
+import { collectStyles, getRegisteredCss } from "typestyles/server";
+async function collectStylesFromComponent(component) {
+  const { renderToString } = await import("react-dom/server");
+  const { css } = collectStyles(() => renderToString(component));
+  return css;
+}
+async function getTypestylesMetadata(component) {
+  return collectStylesFromComponent(component);
+}
+export {
+  collectStylesFromComponent,
+  getRegisteredCss,
+  getTypestylesMetadata
+};

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@typestyles/next",
+  "version": "0.0.0-unstable.015bb9921923",
+  "description": "Next.js integration for typestyles SSR",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./server": {
+      "types": "./src/server.d.ts",
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    },
+    "./client": {
+      "types": "./src/client.d.ts",
+      "import": "./dist/client.js",
+      "require": "./dist/client.cjs",
+      "default": "./dist/client.js"
+    },
+    "./build": {
+      "types": "./src/build.d.ts",
+      "import": "./dist/build.js",
+      "require": "./dist/build.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "next",
+    "nextjs",
+    "typestyles",
+    "ssr",
+    "react"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dbanksdesign/typestyles",
+    "directory": "packages/next"
+  },
+  "peerDependencies": {
+    "next": ">=13.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "typestyles": ">=0.1.0",
+    "webpack": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": false
+    },
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    },
+    "webpack": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "vitest": "^3.0.0",
+    "@types/node": "^25.2.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typestyles": "0.0.0-unstable.015bb9921923",
+    "typescript": "^5.4.0",
+    "webpack": "^5.97.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/build.d.ts

@@ -0,0 +1,27 @@
+import type { NextConfig } from 'next';
+
+export interface TypestylesExtractManifestV1 {
+  version: 1;
+  css: string;
+}
+
+export interface BuildTypestylesForNextOptions {
+  root: string;
+  modules: string[];
+  cssOutFile: string;
+  manifestOutFile?: string;
+  manifestCssPath?: string;
+}
+
+export declare function buildTypestylesForNext(
+  options: BuildTypestylesForNextOptions,
+): Promise<void>;
+
+export interface WithTypestylesExtractOptions {
+  disableClientRuntime?: boolean;
+}
+
+export declare function withTypestylesExtract(
+  nextConfig?: NextConfig,
+  options?: WithTypestylesExtractOptions,
+): NextConfig;

package/src/build.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from 'vitest';
+import type { NextConfig } from 'next';
+import type { Configuration } from 'webpack';
+import { withTypestylesExtract } from './build.js';
+
+type WebpackContext = Parameters<NonNullable<NextConfig['webpack']>>[1];
+
+describe('withTypestylesExtract', () => {
+  it('merges NEXT_PUBLIC_TYPESTYLES_RUNTIME_DISABLED into env for Turbopack + webpack', () => {
+    const merged = withTypestylesExtract(
+      { env: { CUSTOM: 'x' } },
+      { disableClientRuntime: true },
+    );
+    expect(merged.env).toEqual({
+      CUSTOM: 'x',
+      NEXT_PUBLIC_TYPESTYLES_RUNTIME_DISABLED: 'true',
+    });
+  });
+
+  it('does not override env when disableClientRuntime is false', () => {
+    const merged = withTypestylesExtract(
+      { env: { CUSTOM: 'x' } },
+      { disableClientRuntime: false },
+    );
+    expect(merged.env).toEqual({ CUSTOM: 'x' });
+  });
+
+  it('chains user webpack() and adds DefinePlugin on the client', async () => {
+    const webpackMod = await import('webpack');
+    const userWebpack = vi.fn((cfg: { plugins: unknown[] }) => {
+      cfg.plugins.push('user-marker');
+      return cfg;
+    });
+    const merged = withTypestylesExtract({ webpack: userWebpack });
+    const config = { plugins: [] as unknown[] };
+    const result = merged.webpack!(config as Configuration, {
+      isServer: false,
+    } as WebpackContext);
+    expect(userWebpack).toHaveBeenCalled();
+    const hasDefine = result.plugins?.some(
+      (p: unknown) => p instanceof webpackMod.default.DefinePlugin,
+    );
+    expect(hasDefine).toBe(true);
+  });
+
+  it('does not add DefinePlugin for server bundles', async () => {
+    const webpackMod = await import('webpack');
+    const merged = withTypestylesExtract({});
+    const config = { plugins: [] as unknown[] };
+    const result = merged.webpack!(config as Configuration, {
+      isServer: true,
+    } as WebpackContext);
+    const hasDefine = result.plugins?.some(
+      (p: unknown) => p instanceof webpackMod.default.DefinePlugin,
+    );
+    expect(hasDefine).toBe(false);
+  });
+});

package/src/build.ts

@@ -0,0 +1,112 @@
+import { mkdir, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { dirname, join, resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { collectStylesFromModules } from 'typestyles/build';
+import type { NextConfig } from 'next';
+
+/** Manifest shape written next to extracted CSS (optional). */
+export interface TypestylesExtractManifestV1 {
+  version: 1;
+  css: string;
+}
+
+/** Shape of `require('webpack')` for `DefinePlugin` only (webpack is an optional peer). */
+type WebpackWithDefinePlugin = {
+  DefinePlugin: new (definitions: Record<string, string>) => unknown;
+};
+
+export interface BuildTypestylesForNextOptions {
+  root: string;
+  modules: string[];
+  cssOutFile: string;
+  manifestOutFile?: string;
+  manifestCssPath?: string;
+}
+
+/**
+ * Extract TypeStyles CSS for a Next.js app (run from a script before `next build`, or in CI).
+ * Loads each module path (relative to `root`) so side-effect registrations run, then writes CSS.
+ */
+export async function buildTypestylesForNext(options: BuildTypestylesForNextOptions): Promise<void> {
+  const { root, modules, cssOutFile, manifestOutFile, manifestCssPath } = options;
+  const loaders = modules.map((mod) => {
+    const abs = resolve(root, mod);
+    const href = pathToFileURL(abs).href;
+    return () => import(href);
+  });
+  const css = await collectStylesFromModules(loaders);
+  const outAbs = resolve(root, cssOutFile);
+  await mkdir(dirname(outAbs), { recursive: true });
+  await writeFile(outAbs, css, 'utf8');
+  if (manifestOutFile) {
+    const manifest: TypestylesExtractManifestV1 = {
+      version: 1,
+      css: manifestCssPath ?? cssOutFile,
+    };
+    const manAbs = resolve(root, manifestOutFile);
+    await mkdir(dirname(manAbs), { recursive: true });
+    await writeFile(manAbs, `${JSON.stringify(manifest, null, 2)}\n`, 'utf8');
+  }
+}
+
+export interface WithTypestylesExtractOptions {
+  /**
+   * When true (default), client bundles skip DOM style injection (`__TYPESTYLES_RUNTIME_DISABLED__`).
+   * Pair with a global stylesheet from {@link buildTypestylesForNext}.
+   */
+  disableClientRuntime?: boolean;
+}
+
+/**
+ * Merge Next.js config so client bundles use pre-extracted CSS only (no runtime `<style>` injection).
+ *
+ * - **Webpack**: adds `DefinePlugin` for `__TYPESTYLES_RUNTIME_DISABLED__` on client bundles.
+ * - **Turbopack** (`next dev --turbo` / Turbopack production): webpack hooks do not run; the same
+ *   `next.config` `env` entry `NEXT_PUBLIC_TYPESTYLES_RUNTIME_DISABLED` is merged so the client
+ *   bundle still disables runtime insertion (see `typestyles` `sheet` implementation).
+ */
+export function withTypestylesExtract(
+  nextConfig: NextConfig = {},
+  options: WithTypestylesExtractOptions = {},
+): NextConfig {
+  const disableClientRuntime = options.disableClientRuntime !== false;
+
+  return {
+    ...nextConfig,
+    ...(disableClientRuntime
+      ? {
+          env: {
+            ...(typeof nextConfig.env === 'object' &&
+            nextConfig.env !== null &&
+            !Array.isArray(nextConfig.env)
+              ? (nextConfig.env as Record<string, string>)
+              : {}),
+            NEXT_PUBLIC_TYPESTYLES_RUNTIME_DISABLED: 'true',
+          },
+        }
+      : {}),
+    webpack(config, context) {
+      const nextWebpack =
+        typeof nextConfig.webpack === 'function' ? nextConfig.webpack(config, context) : config;
+
+      if (disableClientRuntime && !context.isServer) {
+        try {
+          const require = createRequire(join(process.cwd(), 'package.json'));
+          const webpackLib = require('webpack') as WebpackWithDefinePlugin;
+          nextWebpack.plugins.push(
+            new webpackLib.DefinePlugin({
+              __TYPESTYLES_RUNTIME_DISABLED__: JSON.stringify('true'),
+            }),
+          );
+        } catch {
+          console.warn(
+            '[@typestyles/next/build] Could not load webpack; client bundles may still inject <style>.',
+          );
+        }
+      }
+
+      return nextWebpack;
+    },
+  };
+}

package/src/client.d.ts

@@ -0,0 +1,37 @@
+import type * as React from 'react';
+import type { useSyncExternalStore } from 'react';
+
+/**
+ * Subscribe to typestyles CSS changes. Use this in client components
+ * that need to stay up-to-date with dynamically registered styles.
+ */
+export function useTypestyles(): ReturnType<typeof useSyncExternalStore<string>>;
+
+/**
+ * Re-export of React’s `useServerInsertedHTML` (App Router / streaming SSR).
+ * Declared here so consumers get a stable signature even when their `@types/react` predates the hook.
+ */
+export function useServerInsertedHTML(
+  callback: () => React.ReactNode | null,
+): void;
+
+/**
+ * Props for the TypestylesStylesheet component.
+ */
+export interface TypestylesStylesheetProps {
+  children?: React.ReactNode;
+}
+
+/**
+ * A React component that renders typestyles CSS.
+ */
+export function TypestylesStylesheet(
+  props: TypestylesStylesheetProps,
+): React.JSX.Element | null;
+
+/**
+ * Create a Next.js layout export that includes typestyles.
+ */
+export function createTypestylesLayout<P extends { children?: React.ReactNode }>(
+  layout: (props: P) => React.ReactNode,
+): (props: P) => React.JSX.Element;

package/src/client.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import React, { useState, useEffect, useServerInsertedHTML, useSyncExternalStore } from 'react';
+import { getRegisteredCss } from 'typestyles/server';
+
+/**
+ * Subscribe to typestyles CSS changes. Use this in client components
+ * that need to stay up-to-date with dynamically registered styles.
+ *
+ * @example
+ * ```tsx
+ * // components/Styles.tsx
+ * 'use client';
+ * import { useTypestyles } from '@typestyles/next/client';
+ *
+ * export function Styles() {
+ *   useTypestyles();
+ *   return null;
+ * }
+ * ```
+ */
+export function useTypestyles() {
+  return useSyncExternalStore(
+    () => () => {},
+    () => getRegisteredCss(),
+    () => '',
+  );
+}
+
+/**
+ * Collect styles during server rendering for App Router.
+ * Use this in a Client Component wrapper that collects styles from its children.
+ *
+ * @example
+ * ```tsx
+ * // components/TypestylesProvider.tsx
+ * 'use client';
+ *
+ * import { useServerInsertedHTML, getRegisteredCss } from '@typestyles/next/client';
+ *
+ * export function TypestylesProvider({ children }: { children: React.ReactNode }) {
+ *   useServerInsertedHTML(() => {
+ *     return (
+ *       <style
+ *         id="typestyles"
+ *         dangerouslySetInnerHTML={{ __html: getRegisteredCss() }}
+ *       />
+ *     );
+ *   });
+ *   return <>{children}</>;
+ * }
+ * ```
+ */
+export { useServerInsertedHTML };
+
+/**
+ * Props for the TypestylesStylesheet component.
+ */
+export interface TypestylesStylesheetProps {
+  /**
+   * The children to render (styles will be collected from these).
+   * If not provided, only the existing registered CSS will be included.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * A React component that renders typestyles CSS.
+ *
+ * For App Router: Use this in your root layout to collect and render styles.
+ * Works with both Client Components and React Server Components.
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import { TypestylesStylesheet } from '@typestyles/next/client';
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <TypestylesStylesheet />
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+export function TypestylesStylesheet({ children }: TypestylesStylesheetProps) {
+  const [css, setCss] = useState('');
+
+  useServerInsertedHTML(() => {
+    const registeredCss = getRegisteredCss();
+    if (registeredCss) {
+      return <style id="typestyles" dangerouslySetInnerHTML={{ __html: registeredCss }} />;
+    }
+    return null;
+  });
+
+  useEffect(() => {
+    setCss(getRegisteredCss());
+  }, []);
+
+  if (children) {
+    return (
+      <>
+        {children}
+        <style id="typestyles-client" dangerouslySetInnerHTML={{ __html: css }} />
+      </>
+    );
+  }
+
+  return null;
+}
+
+/**
+ * Create a Next.js layout export that includes typestyles.
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import { createTypestylesLayout } from '@typestyles/next/client';
+ *
+ * export default createTypestylesLayout(function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <title>My App</title>
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   );
+ * });
+ * ```
+ */
+export function createTypestylesLayout<P extends { children?: React.ReactNode }>(
+  layout: (props: P) => React.ReactNode,
+): (props: P) => React.ReactNode {
+  return function TypestylesLayout(props: P) {
+    return <TypestylesStylesheet>{layout(props)}</TypestylesStylesheet>;
+  };
+}

package/src/index.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement, ReactNode } from 'react';
+
+export { getRegisteredCss } from 'typestyles/server';
+
+export interface TypestylesStylesheetProps {
+  children?: ReactNode;
+}
+
+export function TypestylesStylesheet(props: TypestylesStylesheetProps): React.JSX.Element;
+
+export function collectStylesFromComponent(component: ReactElement): Promise<string>;
+
+export function createTypestylesLayout<P extends { children?: ReactNode }>(
+  layout: (props: P) => ReactNode,
+): (props: P) => React.JSX.Element;

package/src/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * @typestyles/next - Next.js integration for typestyles
+ *
+ * This package provides two entry points:
+ *
+ * 1. Main entry (this file) - Re-exports everything
+ * 2. `/server` - Server-safe utilities (getRegisteredCss, collectStylesFromComponent, getTypestylesMetadata)
+ * 3. `/client` - Client components (TypestylesStylesheet, useTypestyles, useServerInsertedHTML)
+ *
+ * For App Router, prefer using the client entry for components:
+ *   import { TypestylesStylesheet } from '@typestyles/next/client';
+ *
+ * Or use server utilities for SSR:
+ *   import { getRegisteredCss } from '@typestyles/next/server';
+ */
+
+// Re-export server-safe utilities
+export { getRegisteredCss, collectStylesFromComponent, getTypestylesMetadata } from './server';
+
+// Re-export client components and hooks
+export {
+  TypestylesStylesheet,
+  useTypestyles,
+  useServerInsertedHTML,
+  createTypestylesLayout,
+  type TypestylesStylesheetProps,
+} from './client';

package/src/react-augmentation.d.ts

@@ -0,0 +1,13 @@
+/**
+ * `useServerInsertedHTML` exists at runtime in Next.js App Router / React 18.3+ client builds,
+ * but some `@types/react` releases omit it. Augment `react` so local `tsc` and tooling match runtime.
+ *
+ * @see https://react.dev/reference/react-dom/server/useServerInsertedHTML
+ */
+import type { ReactNode } from 'react';
+
+declare module 'react' {
+  export function useServerInsertedHTML(callback: () => ReactNode | null): void;
+}
+
+export {};

package/src/server.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+
+export { getRegisteredCss } from 'typestyles/server';
+
+export declare function collectStylesFromComponent(component: ReactElement): Promise<string>;
+
+export declare function getTypestylesMetadata(component: ReactElement): Promise<string>;