0
# Vite Plugin CSS Injected by JS
1

2
A Vite plugin that eliminates separate CSS files by injecting CSS directly into the JavaScript bundle, enabling single-file JavaScript applications. The plugin offers comprehensive configuration options, seamless Vite integration, and supports both development and production modes.
3

4
## Package Information
5

6
- **Package Name**: vite-plugin-css-injected-by-js
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install vite-plugin-css-injected-by-js`
10

11
## Core Imports
12

13
```typescript
14
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
15
```
16

17
For TypeScript usage with type annotations:
18

19
```typescript
20
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
21

22
// Types are inferred from the function parameter
23
const config: Parameters<typeof cssInjectedByJsPlugin>[0] = {
24
  styleId: "my-styles",
25
  topExecutionPriority: false,
26
};
27

28
export default defineConfig({
29
  plugins: [cssInjectedByJsPlugin(config)],
30
});
31
```
32

33
For CommonJS:
34

35
```javascript
36
const cssInjectedByJsPlugin = require("vite-plugin-css-injected-by-js");
37
```
38

39
## Basic Usage
40

41
```typescript
42
import { defineConfig } from "vite";
43
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
44

45
export default defineConfig({
46
  plugins: [
47
    cssInjectedByJsPlugin(),
48
  ],
49
});
50
```
51

52
Simple configuration with style ID:
53

54
```typescript
55
export default defineConfig({
56
  plugins: [
57
    cssInjectedByJsPlugin({
58
      styleId: "my-app-styles",
59
      topExecutionPriority: false,
60
    }),
61
  ],
62
});
63
```
64

65
## Architecture
66

67
The plugin operates by intercepting CSS files during the Vite build process and converting them into JavaScript code that injects the styles at runtime. Key components:
68

69
- **Build Plugin**: Processes CSS assets and injects them into JavaScript bundles
70
- **Injection System**: Runtime code that creates and inserts style elements into the DOM
71
- **Asset Processing**: CSS filtering, concatenation, and transformation pipeline
72
- **Development Support**: Experimental hot-reload functionality for development mode
73

74
The plugin supports two injection modes:
75
- **Global Injection**: All CSS injected into the main entry point (default)
76
- **Relative Injection**: CSS injected per entry point based on import relationships
77

78
## Capabilities
79

80
### Main Plugin Function
81

82
Core plugin function that creates Vite plugins for CSS injection.
83

84
```typescript { .api }
85
export default function cssInjectedByJsPlugin(
86
  config?: PluginConfiguration
87
): Plugin[];
88
```
89

90
[Plugin Configuration](./configuration.md)
91

92
### Development Mode Support
93

94
Experimental development server integration with hot-reload support for CSS injection.
95

96
```typescript { .api }
97
interface DevOptions {
98
  enableDev?: boolean;
99
  removeStyleCode?: (id: string) => string;
100
  removeStyleCodeFunction?: (id: string) => void;
101
}
102
```
103

104
[Development Mode](./development-mode.md)
105

106
### Custom Injection Functions
107

108
Advanced customization of CSS injection behavior with custom JavaScript code.
109

110
```typescript { .api }
111
type InjectCode = (cssCode: string, options: InjectCodeOptions) => string;
112
type InjectCodeFunction = (cssCode: string, options: InjectCodeOptions) => void;
113

114
interface InjectCodeOptions {
115
  styleId?: string | (() => string);
116
  useStrictCSP?: boolean;
117
  attributes?: { [key: string]: string };
118
}
119
```
120

121
[Custom Injection](./custom-injection.md)
122

123
## Types
124

125
```typescript { .api }
126
interface PluginConfiguration extends BaseOptions {
127
  cssAssetsFilterFunction?: (chunk: OutputAsset) => boolean;
128
  jsAssetsFilterFunction?: (chunk: OutputChunk) => boolean;
129
  preRenderCSSCode?: (cssCode: string) => string;
130
  relativeCSSInjection?: boolean;
131
  suppressUnusedCssWarning?: boolean;
132
}
133

134
interface BaseOptions {
135
  dev?: DevOptions;
136
  injectCode?: InjectCode;
137
  injectCodeFunction?: InjectCodeFunction;
138
  injectionCodeFormat?: ModuleFormat;
139
  styleId?: string | (() => string);
140
  topExecutionPriority?: boolean;
141
  useStrictCSP?: boolean;
142
}
143

144
// External types from dependencies
145
type Plugin = import('vite').Plugin;
146
type OutputAsset = import('rollup').OutputAsset;
147
type OutputChunk = import('rollup').OutputChunk;
148
type ModuleFormat = import('rollup').ModuleFormat;
149
```