CSS Plugins

CSS plugins enable seamless integration of stylesheets into your JavaScript/TypeScript bundles.

TIP

If you have suggestions or ideas for CSS plugins, please open a new issue.

injectStyles

The injectStyles plugin transforms CSS files and automatically injects them into the document head at runtime. This is particularly useful when building component libraries where you want styles to be automatically applied when components are used.

Installation

The injectStyles plugin uses LightningCSS under the hood. You'll need to install it as a dev dependency:

npm

npm install --save-dev lightningcss

yarn

yarn add --dev lightningcss

pnpm

pnpm add --save-dev lightningcss

bun

bun add --dev lightningcss

Usage

import { defineConfig } from 'bunup';
import { injectStyles } from 'bunup/plugins';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['esm'],
  plugins: [injectStyles()],
});

With this configuration, any imported CSS files will be transformed and injected into the document head when your JavaScript code runs.

Options

The plugin leverages Lightning CSS for transformations and accepts most Lightning CSS transformation options including:

• minify: Controls whether the CSS should be minified
• targets: Specifies browser targets for CSS feature compatibility

For a complete list of transformation options, refer to the Lightning CSS documentation.