Supported bundlers
Webpack

Usage with Webpack

Installation

# npm
npm i -D @wyw-in-js/webpack-loader
# yarn
yarn add --dev @wyw-in-js/webpack-loader
# pnpm
pnpm add -D @wyw-in-js/webpack-loader
# bun
bun add -d @wyw-in-js/webpack-loader

Configuration

module.exports = {
  module: {
    rules: [
      {
        test: /\.js/,
        use: [{ loader: '@wyw-in-js/webpack-loader' }],
      },
    ],
  },
};

Resource queries (?raw, ?url, etc.)

If you import assets with resource queries (e.g. ./arrow.svg?svgUse), WyW-in-JS ignores ?query/#hash for file reads and extension checks.

For cases where evaluated code needs a value from such imports, configure importLoaders in your WyW config (see /configuration).

Disabling vendor prefixing

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.js/,
        use: [
          {
            loader: '@wyw-in-js/webpack-loader',
            options: {
              prefixer: false,
            },
          },
        ],
      },
    ],
  },
};

Keeping CSS comments

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.js/,
        use: [
          {
            loader: '@wyw-in-js/webpack-loader',
            options: {
              keepComments: true,
              // or keep only matching comments:
              // keepComments: /rtl:/,
            },
          },
        ],
      },
    ],
  },
};

Note: if you use a CSS minimizer in production, ensure it preserves comments.

ViteCLI