tsdown-plugin-css-inject

中文 | English

A tsdown plugin that automatically injects CSS imports into JS chunks.

Features

Automatically injects CSS import statements at the top of each JS chunk during library bundling, ensuring CSS is loaded alongside JS.

Quick Start

import { defineConfig } from "vite-plus";
import { cssInject } from "tsdown-plugin-css-inject";

export default defineConfig({
  pack: {
    plugins: [cssInject()],
    css: { splitting: true },
  },
});

How It Works

1. Track CSS Imports - Intercept all CSS file imports in the resolveId hook
2. Record Module Associations - Store CSS files imported by each module
3. Inject Imports - In the renderChunk hook, inject CSS imports for chunks with CSS dependencies

Conventions

• CSS files share the same name as their corresponding chunk (standard behavior)
• Example: index.js corresponds to index.css, demo2-abc123.js corresponds to demo2-abc123.css

Supported Module Formats

• ES Module: import './style.css';
• CommonJS: require('./style.css');

Compatibility

• ✅ tsdown (vite-plus)

Acknowledgments

Inspired by vite-plugin-lib-inject-css