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

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',
    }),
  ],
};

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