fix(docs): new readme

Author: bosh-code

.github/images/nz-made.png

@@ -3,169 +3,128 @@
 [![npm version](https://img.shields.io/npm/v/@bosh-code/tsdown-plugin-inject-css)](https://npmjs.com/package/@bosh-code/tsdown-plugin-inject-css)
 ![license](https://img.shields.io/npm/l/@bosh-code/tsdown-plugin-inject-css)
 
-Inject CSS imports at the top of each chunk file in tsdown builds.
+Inject CSS imports at the top of files built with [tsdown](https://tsdown.dev/).
 
 During the build process, tsdown strips CSS imports from your source files. This plugin tracks those imports and
-re-injects them into output chunks.
+re-injects them into the built files.
 
-```js
-// Input: foo.ts
-import './foo.css';
-
-export const Foo = () => <div>Foo</div>;
-
-// Output: foo.js (with plugin)
-import './foo.css';
-
-export const Foo = () => <div>Foo</div>;
-```
+## Installation
 
-## Features
+Install the plugin:
 
-- 💡 Automatically tracks CSS imports before they're stripped
-- 🎯 Injects imports into the correct output chunks
-- ⚡️ Sourcemap support
-- 🛠 Out-of-box, minimal configuration
-- 🔄 Works with tsdown's code splitting and chunking
+```shell
+# npm
+npm install -D @bosh-code/tsdown-plugin-inject-css
 
-## Installation
+# yarn
+yarn add -D @bosh-code/tsdown-plugin-inject-css
 
-```bash
-npm install @bosh-code/tsdown-plugin-inject-css -D
-# or
-pnpm add @bosh-code/tsdown-plugin-inject-css -D
-# or
-yarn add @bosh-code/tsdown-plugin-inject-css -D
+# pnpm
+pnpm add -D @bosh-code/tsdown-plugin-inject-css
 ```
 
-## Usage
+Add it to your `tsdown.config.ts`:
 
 ```ts
 // tsdown.config.ts
-import { defineConfig } from 'tsdown';
-import { libInjectCss } from '@bosh-code/tsdown-plugin-inject-css';
+
+import { injectCssPlugin } from '@bosh-code/tsdown-plugin-inject-css';
 
 export default defineConfig({
-  entry: ['./src/index.ts'],
-  format: ['esm'],
+  external: ['preact'],
   plugins: [
-    libInjectCss({
-      sourcemap: true, // default: true
-    }),
-  ],
+    injectCssPlugin()
+  ]
 });
-```
 
-## How It Works
-
-The plugin operates in three phases:
+```
 
-1. **Transform Phase**: Scans source files for CSS imports (e.g., `import './style.css'`) before they're stripped
-2. **Render Phase**: Tracks which source modules end up in which output chunks
-3. **Generate Phase**: Re-injects the CSS imports at the top of the appropriate chunks
+___
 
 ### Example
 
-Given this structure:
-
-```ts
-// src/foo.ts
-import './foo.css';
+#### Source files:
 
-export const Foo = () => <div>Foo < /div>;
+Component files:
 
-// src/bar.ts
-import './bar.css';
+```css
+/* src/greeting.css */
 
-export const Bar = () => <div>Bar < /div>;
+/* Add component styles here */
 
-// src/index.ts
-export { Foo } from './foo';
-export { Bar } from './bar';
+.greeting {
+  color: red;
+}
 ```
 
-The plugin ensures:
-
-- `foo.js` includes `import './foo.css';`
-- `bar.js` includes `import './bar.css';`
-- `index.js` imports from `foo.js` and `bar.js` (CSS already handled)
+```tsx
+// src/greeting.tsx
+import './Foo.css';
 
-## Options
+export const Greeting = () => <div class="greeting">Hello World</div>;
+```
 
-### `sourcemap`
+Library entrypoint:
 
-- Type: `boolean`
-- Default: `true`
+```css
+/* src/index.css */
 
-Whether to generate sourcemaps for the modified chunks.
+/* Add global styles here */
 
-```ts
-libInjectCss({
-  sourcemap: false, // Disable sourcemap generation
-})
+html {
+  background-color: blue;
+}
 ```
 
-## Why This Plugin?
-
-When building component libraries with tsdown, CSS imports are typically stripped during the transpilation process. This
-plugin solves the problem by:
+```ts
+// src/index.ts
+import './index.css';
 
-1. **Preserving CSS imports**: Ensures styles are loaded when components are used
-2. **Proper chunking**: Each chunk only imports its required CSS files
-3. **Tree-shaking friendly**: Works seamlessly with tsdown's code splitting
-4. **Zero configuration**: Works out of the box with sensible defaults
+export { Greeting } from './greeting'
+```
 
-## Compatibility
+#### Built files:
 
-This plugin is designed for:
+```css
+/* dist/index.css */
+html {
+  background-color: blue;
+}
 
-- ✅ tsdown (primary target)
-- ✅ Rolldown (direct compatibility)
-- ⚠️ Rollup (may work with limitations)
+.greeting {
+  color: red;
+}
 
-## Configuration Tips
+/* Gorgeous colour theme, I know. */
+```
 
-### For Component Libraries
+```js
+// dist/index.js
+import { jsx as e } from 'preact/jsx-runtime';
+import './index.css'; // Injected by plugin
 
-When building a component library, you typically want:
+const t = () => e(`div`, { className: `greeting`, children: `Hello World` });
+export { t as Greeting };
 
-```ts
-export default defineConfig({
-  entry: ['./src/index.ts'],
-  format: ['esm'],
-  dts: true,
-  sourcemap: true,
-  plugins: [
-    libInjectCss(),
-  ],
-});
 ```
 
-### With Multiple Entry Points
+___
 
-The plugin works seamlessly with multiple entries:
+### The how and why
 
-```ts
-export default defineConfig({
-  entry: {
-    index: './src/index.ts',
-    button: './src/button/index.ts',
-    card: './src/card/index.ts',
-  },
-  format: ['esm'],
-  plugins: [
-    libInjectCss(),
-  ],
-});
-```
+This plugin is *heavily* inspired by [vite-plugin-lib-inject-css](https://github.com/emosheeep/vite-plugin-lib-inject-css) but
+I adapted it to work with tsdown specifically.
 
-Each entry point will have its CSS imports properly injected.
+I made this because I wanted to use tsdown to build my preact component library.
 
-## Inspired By
+It *should* work with multiple entrypoint, however I haven't tried that. I got it to work for my project and called it good.
 
-This plugin is inspired by [vite-plugin-lib-inject-css](https://github.com/emosheeep/vite-plugin-lib-inject-css) but
-adapted specifically for tsdown's architecture and build process.
+**Contributions welcome!**
 
-## License
+### License
 
 MIT © bosh-code
+
+<div align="center">
+  <img style="width: 120px" src="https://raw.githubusercontent.com/bosh-code/tsdown-plugin-inject-css/main/.github/images/nz-made.png">
+</div>