Frameworks

Vite and Rolldown

@lenso/stylex-build provides vite and rolldown adapters. Configure the adapter with Lenso's stylex-rules.json metadata and your application root. Quick start shows the Vite options.

Load @lenso/tokens/styles.css from the entry that renders your application. The theme stylesheet and compiled application StyleX rules are separate inputs; both must reach the document.

Next.js

For Next 16.3.8 App Router Webpack production/non-watch builds, use the named prepareNext export. It generates an ordinary marked CSS file before Next's CSS pipeline, processing raw package and application rules together once.

1// next.config.mjs2import { prepareNext } from "@lenso/stylex-build";3
4const prepared = prepareNext({5  metadata: [import.meta.resolve("@lenso/tokens/stylex-rules.json")],6  sources: [7    new URL("./app/layout.tsx", import.meta.url),8    new URL("./app/page.tsx", import.meta.url),9    new URL("./app/global-error.tsx", import.meta.url),10    new URL("./src/styles/server.stylex.ts", import.meta.url),11  ],12  cssFile: new URL("./app/lenso.generated.css", import.meta.url),13  unstable_moduleResolution: {14    type: "commonJS",15    rootDir: import.meta.dirname,16  },17});18
19export default {20  async webpack(config) {21    config.cache = false;22    config.plugins.push(await prepared);23    return config;24  },25};

Use this configuration for production builds only. Reuse one preparation promise and plugin across Next's compiler callbacks; disable Webpack caching so cached transforms cannot bypass raw-rule coverage checks.

The example lists one small application's files. Supply all actual application JS/TS source files, including server-only declarations and error styles. metadata, sources and cssFile accept absolute paths or file URLs; lightningcssOptions configures final CSS processing. The raw-rule coverage guard rejects omitted or stale declarations. Generated writes are atomic and idempotent; the helper rejects overwriting an authored CSS file.

Each HTML owner must explicitly import the same generated CSS file and @lenso/tokens/styles.css: every root layout, custom global-error and custom global-not-found. Each supplies its own <html>, <body> and theme. global-error must be a Client Component; it replaces the root layout and cannot rely on that layout's imports or theme.

Run next build --webpack and check served production pages, including an actual cold root-layout failure. This helper does not establish support for next dev, HMR, newer Next versions, Turbopack or Pages Router.

The legacy stylex.webpack automatic asset rewrite remains a pinned 16.3.8 compatibility/development fallback and rejects custom global errors. It is not the new production default: the public helper has production proof, while watch behavior remains unproved. The CLI still emits the legacy setup through init to preserve existing development flows. check recognizes direct prepareNext configuration but does not certify CSS ownership.

Other frameworks

An application must run React, compile its StyleX declarations and deliver the combined CSS. A working Webpack adapter does not by itself establish support for every framework or bundler. If your framework is not covered by the adapter, verify its production build and stylesheet delivery before relying on the integration.