vite-plugin-css-position 3.0.0-next.2 → 3.0.0-next.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -42
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,18 +17,6 @@ A Vite plugin that allows you to control where CSS stylesheets are injected in y
|
|
|
17
17
|
npm install vite-plugin-css-position
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
or
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
pnpm add vite-plugin-css-position
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
or
|
|
27
|
-
|
|
28
|
-
```bash
|
|
29
|
-
yarn add vite-plugin-css-position
|
|
30
|
-
```
|
|
31
|
-
|
|
32
20
|
## Quick Start
|
|
33
21
|
|
|
34
22
|
### 1. Configure Vite
|
|
@@ -114,36 +102,7 @@ viteCssPosition({
|
|
|
114
102
|
**`mode` only affects the production build.** In dev (`enableDev: true`) CSS is always injected
|
|
115
103
|
per-module for HMR.
|
|
116
104
|
|
|
117
|
-
####
|
|
118
|
-
|
|
119
|
-
With a per-chunk mode, styles imported by a dynamically imported component live with that
|
|
120
|
-
component's chunk and only reach the `StylesTarget` position once the component loads — ideal for
|
|
121
|
-
Shadow-DOM micro frontends that should not ship all CSS up front:
|
|
122
|
-
|
|
123
|
-
```tsx
|
|
124
|
-
import { Suspense, lazy } from "react";
|
|
125
|
-
import StylesTarget from "vite-plugin-css-position/react";
|
|
126
|
-
|
|
127
|
-
const Chart = lazy(() => import("./Chart")); // Chart imports its own ./chart.css
|
|
128
|
-
|
|
129
|
-
export function App() {
|
|
130
|
-
return (
|
|
131
|
-
<div>
|
|
132
|
-
<StylesTarget />
|
|
133
|
-
<Suspense fallback={null}>
|
|
134
|
-
<Chart /> {/* chart.css is included only once this loads */}
|
|
135
|
-
</Suspense>
|
|
136
|
-
</div>
|
|
137
|
-
);
|
|
138
|
-
}
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
#### `cssChunks` mode — keep Vite's CSS files
|
|
142
|
-
|
|
143
|
-
`mode: "cssChunks"` keeps Vite's normal, cacheable `.css` chunk files instead of inlining CSS into
|
|
144
|
-
JavaScript, and only registers each chunk's CSS **URL**. `StylesTarget` then includes it at its
|
|
145
|
-
position (and the plugin suppresses Vite's default `<head>` injection). Benefits: HTTP-cacheable CSS,
|
|
146
|
-
leaner JS bundles, and CSP-friendliness (no inline styles).
|
|
105
|
+
#### Mode `cssChunks` mode — keep Vite's CSS files
|
|
147
106
|
|
|
148
107
|
The `cssChunksStrategy` option chooses how the CSS is included:
|
|
149
108
|
|
|
@@ -155,6 +114,17 @@ The `cssChunksStrategy` option chooses how the CSS is included:
|
|
|
155
114
|
No FOUC, deduplicated across multiple shadow roots, and CSP-ideal. Requires `fetch` and a modern
|
|
156
115
|
browser (Chrome 73+ / Firefox 101+ / Safari 16.4+);
|
|
157
116
|
|
|
117
|
+
## Migrating from v2 to v3
|
|
118
|
+
|
|
119
|
+
No code changes required — the default `mode: "inject"` behaves exactly like `2.0.9`.
|
|
120
|
+
|
|
121
|
+
What's new in `3.0.0`:
|
|
122
|
+
|
|
123
|
+
- New **`mode`** option: `"injectPerChunk"` and `"cssChunks"` add component-level lazy-loading; `"cssChunks"` keeps Vite's emitted `.css` files (see [Modes](#modes)).
|
|
124
|
+
- **Zero runtime dependencies** — the CSS-by-JS injection is now built in.
|
|
125
|
+
|
|
126
|
+
See the [CHANGELOG](./CHANGELOG.md) for details.
|
|
127
|
+
|
|
158
128
|
## Development
|
|
159
129
|
|
|
160
130
|
```bash
|