@bosh-code/tsdown-plugin-inject-css

Inject CSS imports at the top of files built with tsdown.

During the build process, tsdown strips CSS imports from your source files. This plugin tracks those imports and re-injects them into the built files.

Installation

Install the plugin:

# npm
npm install -D @bosh-code/tsdown-plugin-inject-css

# yarn
yarn add -D @bosh-code/tsdown-plugin-inject-css

# pnpm
pnpm add -D @bosh-code/tsdown-plugin-inject-css

Add it to your tsdown.config.ts:

// tsdown.config.ts

import { injectCssPlugin } from '@bosh-code/tsdown-plugin-inject-css';

export default defineConfig({
  external: ['preact'],
  plugins: [
    injectCssPlugin()
  ]
});

Example

Source files:

Component files:

/* src/greeting.css */

/* Add component styles here */

.greeting {
  color: red;
}

// src/greeting.tsx
import './Foo.css';

export const Greeting = () => <div class="greeting">Hello World</div>;

Library entrypoint:

/* src/index.css */

/* Add global styles here */

html {
  background-color: blue;
}

// src/index.ts
import './index.css';

export { Greeting } from './greeting'

Built files:

/* dist/index.css */
html {
  background-color: blue;
}

.greeting {
  color: red;
}

/* Gorgeous colour theme, I know. */

// dist/index.js
import { jsx as e } from 'preact/jsx-runtime';
import './index.css'; // Injected by plugin

const t = () => e(`div`, { className: `greeting`, children: `Hello World` });
export { t as Greeting };

The how and why

This plugin is heavily inspired by vite-plugin-lib-inject-css but I adapted it to work with tsdown specifically.

I made this because I wanted to use tsdown to build my preact component library.

It should work with multiple entrypoint, however I haven't tried that. I got it to work for my project and called it good.

Contributions welcome!

License

MIT © bosh-code