0
# Style System
1

2
WindiCSS provides a comprehensive style system with classes for representing CSS properties, styles, keyframes, and stylesheets. These classes enable programmatic CSS generation and manipulation with full control over selectors, properties, and metadata.
3

4
## Capabilities
5

6
### Property Class
7

8
Represents individual CSS properties with name, value, comments, and importance.
9

10
```typescript { .api }
11
/**
12
 * Represents a CSS property with name, value, and metadata
13
 */
14
class Property {
15
  /** CSS property name or array of names */
16
  name: string | string[];
17
  /** CSS property value */
18
  value?: string;
19
  /** Comment associated with the property */
20
  comment?: string;
21
  /** Whether the property should be marked as !important */
22
  important: boolean;
23

24
  /**
25
   * Creates a new CSS property
26
   * @param name - Property name(s)
27
   * @param value - Property value
28
   * @param comment - Optional comment
29
   * @param important - Whether to mark as important
30
   */
31
  constructor(
32
    name: string | string[],
33
    value?: string,
34
    comment?: string,
35
    important?: boolean
36
  );
37

38
  /**
39
   * Converts property to CSS string
40
   * @param minify - Whether to minify output
41
   * @returns CSS property string
42
   */
43
  build(minify?: boolean): string;
44

45
  /**
46
   * Creates property from CSS string
47
   * @param css - CSS property string
48
   * @returns Property instance or undefined
49
   */
50
  static parse(css: string): Property | undefined;
51

52
  /**
53
   * Clones the property
54
   * @returns New Property instance
55
   */
56
  clone(): Property;
57
}
58
```
59

60
**Usage Examples:**
61

62
```typescript
63
import { Property } from "windicss/utils/style";
64

65
// Basic property
66
const bgColor = new Property('background-color', '#3b82f6');
67
console.log(bgColor.build()); // "background-color: #3b82f6;"
68

69
// Important property
70
const textColor = new Property('color', '#ffffff', undefined, true);
71
console.log(textColor.build()); // "color: #ffffff !important;"
72

73
// Property with comment
74
const margin = new Property('margin', '1rem', 'Standard spacing');
75
console.log(margin.build()); // "/* Standard spacing */ margin: 1rem;"
76

77
// Multiple property names
78
const borderStyle = new Property(['border-top-style', 'border-bottom-style'], 'solid');
79
console.log(borderStyle.build()); // "border-top-style: solid; border-bottom-style: solid;"
80

81
// Parse from CSS
82
const parsed = Property.parse('padding: 0.5rem 1rem');
83
console.log(parsed?.name); // "padding"
84
console.log(parsed?.value); // "0.5rem 1rem"
85
```
86

87
### Style Class
88

89
Represents CSS rules with selectors, properties, and metadata for organizing styles.
90

91
```typescript { .api }
92
/**
93
 * Represents a CSS rule with selector, properties, and metadata
94
 */
95
class Style {
96
  /** CSS selector */
97
  selector: string;
98
  /** Array of CSS properties */
99
  property: Property[];
100
  /** Array of child styles for nested rules */
101
  children: Style[];
102
  /** Array of at-rules (media queries, etc.) */
103
  atRules?: string[];
104
  /** Array of pseudo-classes */
105
  pseudoClasses?: string[];
106
  /** Array of pseudo-elements */
107
  pseudoElements?: string[];
108
  /** Parent selector wrapper */
109
  parentSelector?: string;
110
  /** Whether the entire rule is important */
111
  important: boolean;
112
  /** Metadata for organizing and processing */
113
  meta: StyleMeta;
114

115
  /**
116
   * Creates a new CSS style rule
117
   * @param selector - CSS selector
118
   * @param property - Property or array of properties
119
   * @param important - Whether to mark rule as important
120
   */
121
  constructor(
122
    selector?: string,
123
    property?: Property | Property[],
124
    important?: boolean
125
  );
126

127
  /**
128
   * Extends this style with another style
129
   * @param style - Style to extend with
130
   * @returns New extended Style instance
131
   */
132
  extend(style: Style): Style;
133

134
  /**
135
   * Clones the style
136
   * @param selector - Optional new selector
137
   * @returns New Style instance
138
   */
139
  clone(selector?: string): Style;
140

141
  /**
142
   * Adds at-rule wrapper (media query, etc.)
143
   * @param rule - At-rule string
144
   * @returns This style instance for chaining
145
   */
146
  atRule(rule: string): Style;
147

148
  /**
149
   * Adds pseudo-class
150
   * @param pseudoClass - Pseudo-class name
151
   * @returns This style instance for chaining
152
   */
153
  pseudoClass(pseudoClass: string): Style;
154

155
  /**
156
   * Adds pseudo-element
157
   * @param pseudoElement - Pseudo-element name
158
   * @returns This style instance for chaining
159
   */
160
  pseudoElement(pseudoElement: string): Style;
161

162
  /**
163
   * Wraps with parent selector
164
   * @param parent - Parent selector
165
   * @returns This style instance for chaining
166
   */
167
  parent(parent: string): Style;
168

169
  /**
170
   * Wraps with child selector
171
   * @param child - Child selector
172
   * @returns This style instance for chaining
173
   */
174
  child(child: string): Style;
175

176
  /**
177
   * Wraps selector with modifier function
178
   * @param modifier - Function to modify selector
179
   * @returns This style instance for chaining
180
   */
181
  wrapSelector(modifier: (selector: string) => string): Style;
182

183
  /**
184
   * Updates metadata
185
   * @param layer - CSS layer
186
   * @param group - Group name
187
   * @param order - Order for sorting
188
   * @param count - Processing count
189
   * @param important - Force important
190
   * @param respectSelector - Respect existing selector
191
   * @returns This style instance for chaining
192
   */
193
  updateMeta(
194
    layer: "base" | "components" | "utilities",
195
    group: string,
196
    order: number,
197
    count: number,
198
    important?: boolean,
199
    respectSelector?: boolean
200
  ): Style;
201

202
  /**
203
   * Converts style to CSS string
204
   * @param minify - Whether to minify output
205
   * @param level - Indentation level
206
   * @returns CSS rule string
207
   */
208
  build(minify?: boolean, level?: number): string;
209

210
  /**
211
   * Generates styles from selector and style object
212
   * @param selector - CSS selector
213
   * @param styleObj - Style object with CSS properties
214
   * @returns Array of Style instances
215
   */
216
  static generate(selector: string, styleObj: any): Style[];
217
}
218

219
interface StyleMeta {
220
  layer: "base" | "components" | "utilities";
221
  group: string;
222
  order: number;
223
  count: number;
224
  respectSelector?: boolean;
225
  variants?: string[];
226
}
227
```
228

229
**Usage Examples:**
230

231
```typescript
232
import { Style, Property } from "windicss/utils/style";
233

234
// Basic style
235
const buttonStyle = new Style('.btn', [
236
  new Property('padding', '0.5rem 1rem'),
237
  new Property('border-radius', '0.375rem'),
238
  new Property('font-weight', '500')
239
]);
240
console.log(buttonStyle.build());
241
// ".btn { padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; }"
242

243
// Style with pseudo-class
244
const hoverStyle = new Style('.btn')
245
  .pseudoClass('hover');
246
hoverStyle.property.push(new Property('background-color', '#2563eb'));
247
console.log(hoverStyle.build());
248
// ".btn:hover { background-color: #2563eb; }"
249

250
// Style with media query
251
const responsiveStyle = new Style('.container')
252
  .atRule('@media (min-width: 768px)');
253
responsiveStyle.property.push(new Property('max-width', '1024px'));
254

255
// Generate styles from object
256
const generatedStyles = Style.generate('.card', {
257
  backgroundColor: '#ffffff',
258
  borderRadius: '0.5rem',
259
  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
260
  padding: '1.5rem'
261
});
262
```
263

264
### Keyframes Class
265

266
Represents CSS keyframe animations with support for animation properties.
267

268
```typescript { .api }
269
/**
270
 * Represents CSS keyframes for animations
271
 */
272
class Keyframes extends Style {
273
  /**
274
   * Creates CSS keyframes
275
   * @param selector - Animation name
276
   * @param property - Keyframe properties
277
   * @param important - Whether to mark as important
278
   */
279
  constructor(
280
    selector?: string,
281
    property?: Property | Property[],
282
    important?: boolean
283
  );
284

285
  /**
286
   * Generates keyframes from animation object
287
   * @param name - Animation name
288
   * @param animationObj - Object with keyframe percentages and properties
289
   * @returns Keyframes instance
290
   */
291
  static generate(name: string, animationObj: Record<string, any>): Keyframes;
292

293
  /**
294
   * Converts keyframes to CSS string
295
   * @param minify - Whether to minify output
296
   * @returns CSS keyframes string
297
   */
298
  build(minify?: boolean): string;
299
}
300
```
301

302
**Usage Examples:**
303

304
```typescript
305
import { Keyframes, Property } from "windicss/utils/style";
306

307
// Basic keyframes
308
const fadeIn = new Keyframes('fadeIn');
309
fadeIn.children = [
310
  new Style('0%', new Property('opacity', '0')),
311
  new Style('100%', new Property('opacity', '1'))
312
];
313
console.log(fadeIn.build());
314
// "@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }"
315

316
// Generate from object
317
const slideIn = Keyframes.generate('slideIn', {
318
  '0%': {
319
    transform: 'translateX(-100%)',
320
    opacity: '0'
321
  },
322
  '100%': {
323
    transform: 'translateX(0)',
324
    opacity: '1'
325
  }
326
});
327
```
328

329
### Container Class
330

331
Special container for grouping related styles with shared metadata.
332

333
```typescript { .api }
334
/**
335
 * Container for grouping related styles
336
 */
337
class Container extends Style {
338
  /**
339
   * Creates a style container
340
   * @param selector - Container selector
341
   * @param children - Child styles
342
   */
343
  constructor(selector?: string, children?: Style[]);
344

345
  /**
346
   * Adds child style to container
347
   * @param style - Style to add
348
   * @returns This container for chaining
349
   */
350
  addChild(style: Style): Container;
351

352
  /**
353
   * Converts container to CSS string
354
   * @param minify - Whether to minify output
355
   * @returns CSS string with all child styles
356
   */
357
  build(minify?: boolean): string;
358
}
359
```
360

361
### StyleSheet Class
362

363
Collection of styles with methods for organization, sorting, and CSS generation.
364

365
```typescript { .api }
366
/**
367
 * Collection of styles with organization and generation methods
368
 */
369
class StyleSheet {
370
  /** Array of styles in the sheet */
371
  children: Style[];
372
  /** Whether to use CSS prefixer */
373
  prefixer: boolean;
374

375
  /**
376
   * Creates a new stylesheet
377
   * @param children - Initial styles
378
   */
379
  constructor(children?: Style[]);
380

381
  /**
382
   * Adds style(s) to the sheet
383
   * @param style - Style or array of styles to add
384
   * @returns This stylesheet for chaining
385
   */
386
  add(style: Style | Style[]): StyleSheet;
387

388
  /**
389
   * Sorts styles by their metadata order
390
   * @returns This stylesheet for chaining
391
   */
392
  sort(): StyleSheet;
393

394
  /**
395
   * Sorts styles using custom sorting function
396
   * @param sortFn - Custom sorting function
397
   * @returns This stylesheet for chaining
398
   */
399
  sortby(sortFn: (a: Style, b: Style) => number): StyleSheet;
400

401
  /**
402
   * Combines duplicate styles with same selector
403
   * @returns This stylesheet for chaining
404
   */
405
  combine(): StyleSheet;
406

407
  /**
408
   * Extends this stylesheet with another
409
   * @param styleSheet - StyleSheet to extend with
410
   * @returns New extended StyleSheet
411
   */
412
  extend(styleSheet: StyleSheet): StyleSheet;
413

414
  /**
415
   * Converts stylesheet to CSS string
416
   * @param minify - Whether to minify output
417
   * @returns Complete CSS string
418
   */
419
  build(minify?: boolean): string;
420

421
  /**
422
   * Clones the stylesheet
423
   * @returns New StyleSheet instance
424
   */
425
  clone(): StyleSheet;
426

427
  /**
428
   * Gets styles by layer
429
   * @param layer - Layer to filter by
430
   * @returns Array of styles in the layer
431
   */
432
  getLayer(layer: "base" | "components" | "utilities"): Style[];
433
}
434
```
435

436
**Usage Examples:**
437

438
```typescript
439
import { StyleSheet, Style, Property } from "windicss/utils/style";
440

441
// Create stylesheet
442
const sheet = new StyleSheet();
443

444
// Add individual styles
445
sheet.add(new Style('.btn', [
446
  new Property('padding', '0.5rem 1rem'),
447
  new Property('border-radius', '0.375rem')
448
]));
449

450
sheet.add(new Style('.btn-primary', [
451
  new Property('background-color', '#3b82f6'),
452
  new Property('color', '#ffffff')
453
]));
454

455
// Sort and combine
456
sheet.sort().combine();
457

458
// Generate CSS
459
console.log(sheet.build());
460
// Complete CSS output with all styles
461

462
// Add multiple styles at once
463
const additionalStyles = [
464
  new Style('.card', new Property('background-color', '#ffffff')),
465
  new Style('.shadow', new Property('box-shadow', '0 4px 6px -1px rgba(0, 0, 0, 0.1)'))
466
];
467
sheet.add(additionalStyles);
468

469
// Get styles by layer
470
const utilityStyles = sheet.getLayer('utilities');
471
const componentStyles = sheet.getLayer('components');
472
```
473

474
### InlineAtRule Class
475

476
Special property class for handling inline at-rules like media queries within properties.
477

478
```typescript { .api }
479
/**
480
 * Represents inline at-rules within properties
481
 */
482
class InlineAtRule extends Property {
483
  /**
484
   * Creates inline at-rule
485
   * @param name - At-rule name
486
   * @param value - At-rule value
487
   * @param comment - Optional comment
488
   * @param important - Whether to mark as important
489
   */
490
  constructor(
491
    name: string | string[],
492
    value?: string,
493
    comment?: string,
494
    important?: boolean
495
  );
496

497
  /**
498
   * Converts to CSS at-rule string
499
   * @param minify - Whether to minify output
500
   * @returns CSS at-rule string
501
   */
502
  build(minify?: boolean): string;
503
}
504
```
505

506
**Usage Example:**
507

508
```typescript
509
import { InlineAtRule } from "windicss/utils/style";
510

511
const mediaRule = new InlineAtRule('@media', '(min-width: 768px)');
512
console.log(mediaRule.build()); // "@media (min-width: 768px)"
513
```