0
# CSS Features
1

2
Individual CSS feature polyfills that can be enabled, disabled, or configured. PostCSS Preset Env includes 60+ CSS feature plugins covering color functions, logical properties, selectors, custom properties, and modern syntax.
3

4
## Capabilities
5

6
### Feature Configuration System
7

8
Control individual CSS features through the features configuration object.
9

10
```typescript { .api }
11
interface pluginsOptions {
12
  [featureId: string]: subPluginOptions<any>;
13
}
14

15
/**
16
 * Plugin option configuration types
17
 * - boolean: Enable (true) or disable (false) the feature
18
 * - object: Enable with specific configuration
19
 * - ['auto'|boolean, object]: Tuple with enable/disable and configuration
20
 */
21
type subPluginOptions<T> = ['auto' | boolean, T] | T | boolean;
22
```
23

24
**Usage Examples:**
25

26
```javascript
27
postcssPresetEnv({
28
  features: {
29
    // Enable feature with default options
30
    'nesting-rules': true,
31
    
32
    // Disable feature
33
    'custom-properties': false,
34
    
35
    // Configure feature options
36
    'custom-properties': { preserve: true },
37
    
38
    // Tuple format: [enable, options]
39
    'autoprefixer': [true, { grid: 'autoplace' }]
40
  }
41
});
42
```
43

44
### Color Module Features
45

46
CSS Color Module Level 4 features for modern color syntax and functions.
47

48
```typescript { .api }
49
interface ColorFeatures {
50
  /** color() function for wide-gamut colors */
51
  'color-function'?: subPluginOptions<ColorFunctionOptions>;
52
  
53
  /** color-mix() function for color blending */
54
  'color-mix'?: subPluginOptions<ColorMixOptions>;
55
  
56
  /** Variadic color-mix() function arguments */
57
  'color-mix-variadic-function-arguments'?: subPluginOptions<ColorMixVariadicOptions>;
58
  
59
  /** hwb() function (hue, whiteness, blackness) */
60
  'hwb-function'?: subPluginOptions<HWBFunctionOptions>;
61
  
62
  /** lab() function for Lab color space */
63
  'lab-function'?: subPluginOptions<LabFunctionOptions>;
64
  
65
  /** oklab() function for OKLab color space */
66
  'oklab-function'?: subPluginOptions<OklabFunctionOptions>;
67
  
68
  /** alpha() function for alpha channel manipulation */
69
  'alpha-function'?: subPluginOptions<AlphaFunctionOptions>;
70
  
71
  /** 8-digit hexadecimal alpha notation (#rrggbbaa) */
72
  'hexadecimal-alpha-notation'?: subPluginOptions<HexAlphaOptions>;
73
  
74
  /** Modern color functional notation (space-separated syntax) */
75
  'color-functional-notation'?: subPluginOptions<ColorFunctionalNotationOptions>;
76
  
77
  /** rebeccapurple color keyword */
78
  'rebeccapurple-color'?: subPluginOptions<RebeccapurpleOptions>;
79
  
80
  /** Relative color syntax (from keyword) */
81
  'relative-color-syntax'?: subPluginOptions<RelativeColorSyntaxOptions>;
82
  
83
  /** light-dark() function for theme-aware colors */
84
  'light-dark-function'?: subPluginOptions<LightDarkFunctionOptions>;
85
  
86
  /** Gamut mapping for out-of-gamut colors */
87
  'gamut-mapping'?: subPluginOptions<GamutMappingOptions>;
88
  
89
  /** Display P3 linear color space support */
90
  'color-function-display-p3-linear'?: subPluginOptions<DisplayP3LinearOptions>;
91
  
92
  /** Gradients interpolation method */
93
  'gradients-interpolation-method'?: subPluginOptions<GradientsInterpolationOptions>;
94
}
95
```
96

97
**Usage Examples:**
98

99
```javascript
100
// Enable modern color functions
101
postcssPresetEnv({
102
  features: {
103
    'color-mix': true,
104
    'lab-function': { preserve: true },
105
    'hwb-function': true,
106
    'hexadecimal-alpha-notation': true
107
  }
108
});
109
```
110

111
### Logical Properties Features
112

113
CSS Logical Properties and Values for writing-mode independent layouts.
114

115
```typescript { .api }
116
interface LogicalPropertiesFeatures {
117
  /** Logical properties and values (margin-inline, padding-block, etc.) */
118
  'logical-properties-and-values'?: subPluginOptions<LogicalPropertiesOptions>;
119
  
120
  /** Logical overflow properties */
121
  'logical-overflow'?: subPluginOptions<LogicalOverflowOptions>;
122
  
123
  /** Logical overscroll-behavior properties */
124
  'logical-overscroll-behavior'?: subPluginOptions<LogicalOverscrollOptions>;
125
  
126
  /** Logical resize property values */
127
  'logical-resize'?: subPluginOptions<LogicalResizeOptions>;
128
  
129
  /** Logical viewport units (vi, vb, etc.) */
130
  'logical-viewport-units'?: subPluginOptions<LogicalViewportOptions>;
131
  
132
  /** Logical values in float and clear properties */
133
  'float-clear-logical-values'?: subPluginOptions<FloatClearLogicalOptions>;
134
}
135
```
136

137
**Usage Examples:**
138

139
```javascript
140
// Enable logical properties for RTL/LTR support
141
postcssPresetEnv({
142
  features: {
143
    'logical-properties-and-values': {
144
      preserve: true
145
    },
146
    'logical-overflow': true,
147
    'logical-viewport-units': true
148
  },
149
  logical: {
150
    inlineDirection: 'right-to-left'
151
  }
152
});
153
```
154

155
### Selector Features
156

157
CSS Selectors Level 4 pseudo-classes and advanced selector functionality.
158

159
```typescript { .api }
160
interface SelectorFeatures {
161
  /** :is() matches-any pseudo-class */
162
  'is-pseudo-class'?: subPluginOptions<IsPseudoOptions>;
163
  
164
  /** :has() relational pseudo-class */
165
  'has-pseudo-class'?: subPluginOptions<HasPseudoOptions>;
166
  
167
  /** :focus-visible focus-indicated pseudo-class */
168
  'focus-visible-pseudo-class'?: subPluginOptions<FocusVisibleOptions>;
169
  
170
  /** :focus-within focus container pseudo-class */
171
  'focus-within-pseudo-class'?: subPluginOptions<FocusWithinOptions>;
172
  
173
  /** :any-link hyperlink pseudo-class */
174
  'any-link-pseudo-class'?: subPluginOptions<AnyLinkOptions>;
175
  
176
  /** :dir() directionality pseudo-class */
177
  'dir-pseudo-class'?: subPluginOptions<DirPseudoOptions>;
178
  
179
  /** :not() enhanced negation pseudo-class */
180
  'not-pseudo-class'?: subPluginOptions<NotPseudoOptions>;
181
  
182
  /** :blank empty-value pseudo-class */
183
  'blank-pseudo-class'?: subPluginOptions<BlankPseudoOptions>;
184
  
185
  /** :scope scope pseudo-class */
186
  'scope-pseudo-class'?: subPluginOptions<ScopePseudoOptions>;
187
  
188
  /** Case-insensitive attribute selectors */
189
  'case-insensitive-attributes'?: subPluginOptions<CaseInsensitiveOptions>;
190
}
191
```
192

193
**Usage Examples:**
194

195
```javascript
196
// Enable modern pseudo-classes
197
postcssPresetEnv({
198
  features: {
199
    'focus-visible-pseudo-class': true,
200
    'has-pseudo-class': { preserve: true },
201
    'is-pseudo-class': true,
202
    'case-insensitive-attributes': true
203
  }
204
});
205
```
206

207
### Custom Syntax Features
208

209
Custom properties, selectors, and media queries for advanced CSS organization.
210

211
```typescript { .api }
212
interface CustomSyntaxFeatures {
213
  /** Custom properties (CSS variables) */
214
  'custom-properties'?: subPluginOptions<CustomPropertiesOptions>;
215
  
216
  /** Custom media queries */
217
  'custom-media-queries'?: subPluginOptions<CustomMediaOptions>;
218
  
219
  /** Custom selectors */
220
  'custom-selectors'?: subPluginOptions<CustomSelectorsOptions>;
221
  
222
  /** Cascade layers (@layer) */
223
  'cascade-layers'?: subPluginOptions<CascadeLayersOptions>;
224
  
225
  /** CSS nesting rules */
226
  'nesting-rules'?: subPluginOptions<NestingOptions>;
227
}
228
```
229

230
**Usage Examples:**
231

232
```javascript
233
// Enable custom syntax features
234
postcssPresetEnv({
235
  features: {
236
    'custom-properties': { preserve: false },
237
    'custom-media-queries': true,
238
    'nesting-rules': { noIsPseudoSelector: false },
239
    'cascade-layers': true
240
  }
241
});
242
```
243

244
### Layout and Positioning Features
245

246
Modern layout features for gap properties, place properties, and positioning.
247

248
```typescript { .api }
249
interface LayoutFeatures {
250
  /** Gap properties for flexbox and grid */
251
  'gap-properties'?: subPluginOptions<GapPropertiesOptions>;
252
  
253
  /** Place properties shorthand */
254
  'place-properties'?: subPluginOptions<PlacePropertiesOptions>;
255
  
256
  /** Double-position gradients */
257
  'double-position-gradients'?: subPluginOptions<DoublePositionGradientsOptions>;
258
  
259
  /** image-set() function */
260
  'image-set-function'?: subPluginOptions<ImageSetFunctionOptions>;
261
  
262
  /** Two-value display property syntax */
263
  'display-two-values'?: subPluginOptions<DisplayTwoValuesOptions>;
264
  
265
  /** Overflow shorthand property */
266
  'overflow-property'?: subPluginOptions<OverflowPropertyOptions>;
267
  
268
  /** overflow-wrap property replacement */
269
  'overflow-wrap-property'?: subPluginOptions<OverflowWrapOptions>;
270
}
271
```
272

273
**Usage Examples:**
274

275
```javascript
276
// Enable modern layout features
277
postcssPresetEnv({
278
  features: {
279
    'gap-properties': true,
280
    'place-properties': true,
281
    'image-set-function': { preserve: true },
282
    'overflow-property': true
283
  }
284
});
285
```
286

287
### Typography and Text Features
288

289
Typography-related features for fonts, text decoration, and text properties.
290

291
```typescript { .api }
292
interface TypographyFeatures {
293
  /** font-variant property */
294
  'font-variant-property'?: subPluginOptions<FontVariantOptions>;
295
  
296
  /** system-ui font family */
297
  'system-ui-font-family'?: subPluginOptions<SystemUIFontOptions>;
298
  
299
  /** Font format() keywords */
300
  'font-format-keywords'?: subPluginOptions<FontFormatOptions>;
301
  
302
  /** text-decoration shorthand */
303
  'text-decoration-shorthand'?: subPluginOptions<TextDecorationOptions>;
304
  
305
  /** Content alt text */
306
  'content-alt-text'?: subPluginOptions<ContentAltTextOptions>;
307
  
308
  /** ic length unit */
309
  'ic-unit'?: subPluginOptions<ICUnitOptions>;
310
}
311
```
312

313
### Mathematical Functions
314

315
Mathematical functions for calculations and value transformations.
316

317
```typescript { .api }
318
interface MathFunctions {
319
  /** clamp() function */
320
  'clamp'?: subPluginOptions<ClampOptions>;
321
  
322
  /** Trigonometric functions (sin, cos, tan, etc.) */
323
  'trigonometric-functions'?: subPluginOptions<TrigonometricOptions>;
324
  
325
  /** Exponential functions (pow, sqrt, log, etc.) */
326
  'exponential-functions'?: subPluginOptions<ExponentialOptions>;
327
  
328
  /** Sign functions (abs, sign) */
329
  'sign-functions'?: subPluginOptions<SignFunctionsOptions>;
330
  
331
  /** Stepped value functions (round, mod, rem) */
332
  'stepped-value-functions'?: subPluginOptions<SteppedValueOptions>;
333
  
334
  /** random() function */
335
  'random-function'?: subPluginOptions<RandomFunctionOptions>;
336
  
337
  /** Nested calc() expressions */
338
  'nested-calc'?: subPluginOptions<NestedCalcOptions>;
339
}
340
```
341

342
### Media Query Features
343

344
Enhanced media query syntax and features.
345

346
```typescript { .api }
347
interface MediaQueryFeatures {
348
  /** Media query ranges (width >= 320px) */
349
  'media-query-ranges'?: subPluginOptions<MediaQueryRangesOptions>;
350
  
351
  /** Aspect-ratio number values */
352
  'media-queries-aspect-ratio-number-values'?: subPluginOptions<AspectRatioNumberOptions>;
353
  
354
  /** prefers-color-scheme media query */
355
  'prefers-color-scheme-query'?: subPluginOptions<PrefersColorSchemeOptions>;
356
}
357
```
358

359
### Legacy and Compatibility Features
360

361
Features for handling legacy properties and browser compatibility.
362

363
```typescript { .api }
364
interface CompatibilityFeatures {
365
  /** all property */
366
  'all-property'?: subPluginOptions<AllPropertyOptions>;
367
  
368
  /** unset value */
369
  'unset-value'?: subPluginOptions<UnsetValueOptions>;
370
  
371
  /** initial value */
372
  'initial'?: subPluginOptions<InitialOptions>;
373
  
374
  /** Break properties (page-break-* to break-*) */
375
  'break-properties'?: subPluginOptions<BreakPropertiesOptions>;
376
  
377
  /** Opacity percentage values */
378
  'opacity-percentage'?: subPluginOptions<OpacityPercentageOptions>;
379
}
380
```
381

382
## Complete Features Interface
383

384
```typescript { .api }
385
interface pluginsOptions extends 
386
  ColorFeatures,
387
  LogicalPropertiesFeatures,
388
  SelectorFeatures,
389
  CustomSyntaxFeatures,
390
  LayoutFeatures,
391
  TypographyFeatures,
392
  MathFunctions,
393
  MediaQueryFeatures,
394
  CompatibilityFeatures {
395
  // All feature IDs can be configured with subPluginOptions
396
}
397
```