0
# JSS Instance Management
1
2
Core JSS instance creation and configuration for setting up the CSS-in-JS environment with custom plugins, renderers, and options.
3
4
## Capabilities
5
6
### Create Function
7
8
Creates a new JSS instance with optional configuration. Each instance maintains its own plugin registry and configuration.
9
10
```javascript { .api }
11
/**
12
* Creates a new instance of JSS with optional configuration
13
* @param options - Optional configuration object
14
* @returns New JSS instance
15
*/
16
function create(options?: Partial<JssOptions>): Jss;
17
```
18
19
**Usage Examples:**
20
21
```javascript
22
import { create } from "jss";
23
24
// Create default instance
25
const jss = create();
26
27
// Create with custom configuration
28
const jss = create({
29
createGenerateId: customIdGenerator,
30
plugins: [myPlugin1, myPlugin2],
31
insertionPoint: '#jss-insertion-point'
32
});
33
```
34
35
### JSS Instance Interface
36
37
The main JSS class that orchestrates stylesheet creation and plugin management.
38
39
```javascript { .api }
40
interface Jss {
41
/** Create a new stylesheet from style definitions */
42
createStyleSheet<Name extends string | number | symbol>(
43
styles: Partial<Styles<Name, any, undefined>>,
44
options?: StyleSheetFactoryOptions
45
): StyleSheet<Name>;
46
47
/** Remove a stylesheet from this JSS instance */
48
removeStyleSheet(sheet: StyleSheet): this;
49
50
/** Configure the JSS instance with new options */
51
setup(options?: Partial<JssOptions>): this;
52
53
/** Add plugins to this JSS instance */
54
use(...plugins: Plugin[]): this;
55
56
/** Create a single CSS rule */
57
createRule(style: JssStyle, options?: RuleFactoryOptions): Rule;
58
createRule<Name extends string>(name: Name, style: JssStyle, options?: RuleFactoryOptions): Rule;
59
}
60
```
61
62
### Default JSS Instance
63
64
The default export provides a pre-configured JSS instance ready for immediate use.
65
66
```javascript { .api }
67
/** Default JSS instance with standard configuration */
68
const jss: Jss;
69
```
70
71
**Usage Example:**
72
73
```javascript
74
import jss from "jss";
75
76
// Use default instance directly
77
const sheet = jss.createStyleSheet({
78
button: {
79
background: 'blue',
80
color: 'white'
81
}
82
});
83
```
84
85
### JSS Configuration Options
86
87
Configuration object for customizing JSS instance behavior.
88
89
```javascript { .api }
90
interface JssOptions {
91
/** Factory function for generating unique class names */
92
createGenerateId: CreateGenerateId;
93
/** Array of plugins to apply to stylesheets */
94
plugins: ReadonlyArray<Plugin>;
95
/** Renderer class for DOM manipulation (null for server-side) */
96
Renderer?: {new (): Renderer} | null;
97
/** DOM insertion point for generated styles */
98
insertionPoint: InsertionPoint;
99
/** ID generation options */
100
id: CreateGenerateIdOptions;
101
}
102
103
interface CreateGenerateIdOptions {
104
/** Whether to minify generated class names */
105
minify?: boolean;
106
}
107
108
type CreateGenerateId = (options?: CreateGenerateIdOptions) => GenerateId;
109
type GenerateId = (rule: Rule, sheet?: StyleSheet<string>) => string;
110
type InsertionPoint = string | HTMLElement | Comment;
111
```
112
113
### Setup Method
114
115
Configures an existing JSS instance with new options. Should not be used twice on the same instance without plugin deduplication logic.
116
117
```javascript { .api }
118
/**
119
* Configure the JSS instance with new options
120
* @param options - Configuration options to apply
121
* @returns The JSS instance for chaining
122
*/
123
setup(options?: Partial<JssOptions>): this;
124
```
125
126
**Usage Example:**
127
128
```javascript
129
import jss from "jss";
130
import myPlugin from "./my-plugin";
131
132
jss.setup({
133
createGenerateId: () => (rule) => `custom-${rule.key}`,
134
plugins: [myPlugin]
135
});
136
```
137
138
### Plugin Management
139
140
Add plugins to extend JSS functionality with custom behavior.
141
142
```javascript { .api }
143
/**
144
* Add plugins to this JSS instance
145
* @param plugins - One or more plugins to add
146
* @returns The JSS instance for chaining
147
*/
148
use(...plugins: Plugin[]): this;
149
```
150
151
**Usage Example:**
152
153
```javascript
154
import jss from "jss";
155
import nested from "jss-plugin-nested";
156
import camelCase from "jss-plugin-camel-case";
157
158
// Add plugins
159
jss.use(nested(), camelCase());
160
161
// Now stylesheets created with this instance will use these plugins
162
const sheet = jss.createStyleSheet({
163
button: {
164
backgroundColor: 'blue', // camelCase plugin converts to background-color
165
'&:hover': { // nested plugin handles pseudo-selectors
166
backgroundColor: 'red'
167
}
168
}
169
});
170
```
171
172
### Rule Creation
173
174
Create individual CSS rules outside of a stylesheet context.
175
176
```javascript { .api }
177
/**
178
* Create a single CSS rule
179
* @param style - Style object for the rule
180
* @param options - Rule creation options
181
* @returns Created rule instance
182
*/
183
createRule(style: JssStyle, options?: RuleFactoryOptions): Rule;
184
185
/**
186
* Create a named CSS rule
187
* @param name - Name/selector for the rule
188
* @param style - Style object for the rule
189
* @param options - Rule creation options
190
* @returns Created rule instance
191
*/
192
createRule<Name extends string>(name: Name, style: JssStyle, options?: RuleFactoryOptions): Rule;
193
194
interface RuleFactoryOptions {
195
selector?: string;
196
classes?: object;
197
sheet?: StyleSheet;
198
index?: number;
199
jss?: Jss;
200
generateId?: GenerateId;
201
Renderer?: Renderer;
202
}
203
```
204
205
**Usage Example:**
206
207
```javascript
208
import jss from "jss";
209
210
// Create anonymous rule
211
const rule = jss.createRule({
212
color: 'blue',
213
fontSize: '16px'
214
});
215
216
// Create named rule
217
const buttonRule = jss.createRule('button', {
218
background: 'green',
219
border: 'none'
220
});
221
```