Usage with Rollup

Compatible with Rollup v1, v2, v3, and v4.

Installation

To use WyW-in-JS with Rollup, you need to use it together with a plugin which handles CSS files, such as rollup-plugin-css-only:

# npm
npm i -D rollup-plugin-css-only @wyw-in-js/rollup
# yarn
yarn add --dev rollup-plugin-css-only @wyw-in-js/rollup
# pnpm
pnpm add -D rollup-plugin-css-only @wyw-in-js/rollup
# bun
bun add -d rollup-plugin-css-only @wyw-in-js/rollup

Note: WyW packages are ESM-only and require Node.js >=22. Use an ESM Rollup config (for example rollup.config.mjs) or dynamic import() if your project still uses CommonJS.

Configuration

import wyw from '@wyw-in-js/rollup';
import css from 'rollup-plugin-css-only';
 
export default {
  plugins: [
    wyw({
      sourceMap: process.env.NODE_ENV !== 'production',
    }),
    css({
      output: 'styles.css',
    }),
  ],
};

eval.require defaults to warn-and-run in v2. If eval-time require() happens, WyW will warn and execute it at runtime; use importOverrides or eval.require: 'error' to make it explicit.

Eval resolver modes

eval.resolver: 'native' and the native step of eval.resolver: 'hybrid' use oxc-resolver with automatic tsconfig.json discovery, so TypeScript baseUrl/paths aliases work by default.

Rollup core does not expose a single static alias map. Aliases implemented by plugins such as @rollup/plugin-alias are part of the plugin resolver pipeline and are resolved only by the bundler fallback.

hybrid: tries eval.customResolver, then native resolution, then Rollup's resolver. Use this when evaluated imports depend on Rollup resolver plugins.
native: uses only oxc-resolver; Rollup resolver plugins are not called. Mirror plugin aliases in oxcOptions.resolver.alias or keep using hybrid.

Concurrency (tsdown/rolldown)

Some Rollup-compatible bundlers may execute plugin hooks concurrently (e.g. tsdown/rolldown). To keep evaluation deterministic, @wyw-in-js/rollup serializes transform() calls by default.

If you are sure your bundler runs transforms sequentially, you can opt out:

wyw({
  serializeTransform: false,
});

Disabling vendor prefixing

Stylis adds vendor-prefixed CSS by default. To disable it (and reduce CSS size), pass prefixer: false:

wyw({
  prefixer: false,
});

Keeping CSS comments

Stylis strips CSS comments by default. To preserve them (for example, /*rtl:ignore*/), pass keepComments:

wyw({
  keepComments: true,
  // or keep only matching comments:
  // keepComments: /rtl:/,
});

Note: if your CSS pipeline minifies output, ensure the minifier keeps comments.

If you are using @rollup/plugin-babel (opens in a new tab) as well, ensure the wyw plugin is declared earlier in the plugins array than your babel plugin.

import wyw from '@wyw-in-js/rollup';
import css from 'rollup-plugin-css-only';
import babel from '@rollup/plugin-babel';
 
export default {
  plugins: [
    wyw({
      sourceMap: process.env.NODE_ENV !== 'production',
    }),
    css({
      output: 'styles.css',
    }),
    babel({}),
    /* rest of your plugins */
  ],
};

Parcel Rspack