CLI

CLI (@wyw-in-js/cli)

Use @wyw-in-js/cli to run WyW extraction as a standalone step (outside of a bundler plugin).

Install

# npm
npm i -D @wyw-in-js/cli
# yarn
yarn add -D @wyw-in-js/cli
# pnpm
pnpm add -D @wyw-in-js/cli
# bun
bun add -d @wyw-in-js/cli

Minimal run

wyw-in-js \
  --source-root ./src \
  --out-dir ./dist/wyw-css \
  "src/**/*.{ts,tsx,js,jsx}"

Injecting CSS imports into compiled output

If you compile your sources into dist/, you can also append import/require statements to the compiled JS files:

wyw-in-js \
  --config ./wyw-in-js.config.js \
  --source-root ./src \
  --out-dir ./dist/wyw-css \
  --insert-css-requires ./dist \
  --modules esnext \
  --transform \
  "src/**/*.{ts,tsx,js,jsx}"

Notes:

  • --modules commonjs inserts require(...); any other value inserts import "...".
  • --transform controls whether the CLI uses the transformed JS output produced by WyW when updating files.

Options (reference)

The CLI options below are based on wyw-in-js --help.

  • --out-dir, -o (required): output directory for extracted CSS files.
  • --source-root, -r (required): directory containing source files passed as CLI arguments.
  • --config, -c: config file path (see /configuration).
  • --insert-css-requires, -i: directory containing compiled JS output to append CSS imports/requires to.
  • --modules, -m (default: commonjs): controls injected statement style. Allowed values: commonjs, es2015, es6, esnext, native.
  • --transform, -t: replace template tags with evaluated values (used when updating compiled JS output).
  • --source-maps, -s: generate .map files for extracted CSS.
  • --parallel, -p: run extraction in parallel.
  • --ignore, -x: glob pattern to exclude files (passed to glob).
  • --debug, -d: write debug output (transform events) into a directory.

Migration notes (@linaria/cli → @wyw-in-js/cli)

  • The binary name is wyw-in-js.
  • For advanced settings, use a config file (--config / wyw-in-js.config.js).
  • @wyw-in-js/cli runs @wyw-in-js/transform, which depends on happy-dom and enables it by default via features.happyDOM.
  • You can disable usage of DOM emulation in your config: features: { happyDOM: false } (see /feature-flags). This does not remove happy-dom from your lockfile — it only prevents creating a DOM during build-time eval.
WebpackChangelog