0
# Type Definitions
1

2
Core type definitions used throughout PostCSS Preset Env, including enums for logical directions, configuration interfaces, and feature-specific option types.
3

4
## Capabilities
5

6
### Direction Flow Enum
7

8
Enumeration for logical direction flow values used in logical properties configuration.
9

10
```typescript { .api }
11
/**
12
 * Logical direction flow values for writing-mode independent layouts
13
 */
14
enum DirectionFlow {
15
  /** Top to bottom block flow */
16
  TopToBottom = 'top-to-bottom',
17
  /** Bottom to top block flow */
18
  BottomToTop = 'bottom-to-top',
19
  /** Right to left inline flow */
20
  RightToLeft = 'right-to-left',
21
  /** Left to right inline flow */
22
  LeftToRight = 'left-to-right'
23
}
24
```
25

26
**Usage Examples:**
27

28
```typescript
29
import { DirectionFlow } from 'postcss-preset-env';
30

31
// Configure RTL layout
32
const options = {
33
  logical: {
34
    inlineDirection: DirectionFlow.RightToLeft,
35
    blockDirection: DirectionFlow.TopToBottom
36
  }
37
};
38

39
// Using string values directly
40
const options2 = {
41
  logical: {
42
    inlineDirection: 'right-to-left',
43
    blockDirection: 'top-to-bottom'
44
  }
45
};
46
```
47

48
### Sub-Plugin Options Type
49

50
Generic type for configuring individual CSS feature plugins.
51

52
```typescript { .api }
53
/**
54
 * Configuration options for individual CSS feature plugins
55
 * @template T - Plugin-specific option type
56
 */
57
type subPluginOptions<T> = ['auto' | boolean, T] | T | boolean;
58
```
59

60
**Usage Examples:**
61

62
```typescript
63
// Boolean: simple enable/disable
64
const features: pluginsOptions = {
65
  'nesting-rules': true,
66
  'custom-properties': false
67
};
68

69
// Object: enable with configuration
70
const features2: pluginsOptions = {
71
  'custom-properties': { preserve: true },
72
  'clamp': { precalculate: true }
73
};
74

75
// Tuple: [enable/disable, configuration]
76
const features3: pluginsOptions = {
77
  'custom-properties': [true, { preserve: true }],
78
  'autoprefixer': ['auto', { grid: 'autoplace' }]
79
};
80
```
81

82
### Feature-Specific Option Types
83

84
Type definitions for commonly configured CSS features with specific options.
85

86
```typescript { .api }
87
/** postcss-clamp plugin options */
88
interface postcssClampOptions {
89
  /** Preserve the original notation (default: false) */
90
  preserve?: boolean;
91
  /** Precalculate values with the same unit (default: false) */
92
  precalculate?: boolean;
93
}
94

95
/** postcss-opacity-percentage plugin options */
96
interface postcssOpacityPercentageOptions {
97
  /** Preserve the original notation (default: false) */
98
  preserve?: boolean;
99
}
100

101
/** postcss-replace-overflow-wrap plugin options */
102
interface postcssReplaceOverflowWrapOptions {
103
  /** Preserve the original notation (default: false) */
104
  preserve?: boolean;
105
}
106

107
/** postcss-page-break plugin options */
108
interface postcssPageBreakOptions {
109
  // No configuration options
110
}
111

112
/** postcss-font-variant plugin options */
113
interface postcssFontVariantOptions {
114
  // No configuration options
115
}
116

117
/** postcss-system-ui-font-family plugin options */
118
interface postcssFontFamilySystemUIOptions {
119
  // No configuration options
120
}
121
```
122

123
**Usage Examples:**
124

125
```typescript
126
// Configure clamp function behavior
127
const features: pluginsOptions = {
128
  'clamp': {
129
    preserve: true,
130
    precalculate: false
131
  },
132
  'opacity-percentage': {
133
    preserve: true
134
  }
135
};
136
```
137

138
### Logical Properties Configuration
139

140
Type definitions for configuring logical properties behavior.
141

142
```typescript { .api }
143
/**
144
 * Configuration for logical properties and writing modes
145
 */
146
interface LogicalOptions {
147
  /** 
148
   * Set the inline flow direction
149
   * Controls how inline-start/inline-end resolve
150
   * @default 'left-to-right'
151
   */
152
  inlineDirection?: DirectionFlow;
153
  
154
  /** 
155
   * Set the block flow direction
156
   * Controls how block-start/block-end resolve
157
   * @default 'top-to-bottom'
158
   */
159
  blockDirection?: DirectionFlow;
160
}
161
```
162

163
**Usage Examples:**
164

165
```typescript
166
// Configure for Arabic/Hebrew text (RTL)
167
const rtlConfig: LogicalOptions = {
168
  inlineDirection: DirectionFlow.RightToLeft,
169
  blockDirection: DirectionFlow.TopToBottom
170
};
171

172
// Configure for vertical Japanese text
173
const verticalConfig: LogicalOptions = {
174
  inlineDirection: DirectionFlow.TopToBottom,
175
  blockDirection: DirectionFlow.RightToLeft
176
};
177
```
178

179
### Main Plugin Options Interface
180

181
Complete type definition for the main plugin configuration.
182

183
```typescript { .api }
184
/**
185
 * Configuration options for PostCSS Preset Env plugin
186
 */
187
interface pluginOptions {
188
  /** CSS feature stage control (0-4, false to disable) */
189
  stage?: number | false;
190
  
191
  /** Minimum vendor implementations required */
192
  minimumVendorImplementations?: number;
193
  
194
  /** Enable client-side polyfills requiring JavaScript */
195
  enableClientSidePolyfills?: boolean;
196
  
197
  /** Browserslist environment name */
198
  env?: string;
199
  
200
  /** Browser targets override */
201
  browsers?: string | Array<string> | null;
202
  
203
  /** Global preserve setting for original CSS */
204
  preserve?: boolean;
205
  
206
  /** Autoprefixer configuration */
207
  autoprefixer?: autoprefixer.Options | false;
208
  
209
  /** Individual feature configuration */
210
  features?: pluginsOptions;
211
  
212
  /** Insert plugins before specific features */
213
  insertBefore?: Record<string, unknown>;
214
  
215
  /** Insert plugins after specific features */
216
  insertAfter?: Record<string, unknown>;
217
  
218
  /** Enable debug output */
219
  debug?: boolean;
220
  
221
  /** Logical properties configuration */
222
  logical?: LogicalOptions;
223
}
224
```
225

226
### Plugin Features Configuration Interface
227

228
Complete type definition for configuring individual CSS features.
229

230
```typescript { .api }
231
/**
232
 * Configuration for all available CSS features
233
 * Each feature can be enabled, disabled, or configured with specific options
234
 */
235
interface pluginsOptions {
236
  /** CSS all property */
237
  'all-property'?: subPluginOptions<postcssInitialOptions>;
238
  
239
  /** CSS alpha() function */
240
  'alpha-function'?: subPluginOptions<postcssAlphaFunctionOptions>;
241
  
242
  /** :any-link pseudo-class */
243
  'any-link-pseudo-class'?: subPluginOptions<postcssPseudoClassAnyLinkOptions>;
244
  
245
  /** :blank pseudo-class */
246
  'blank-pseudo-class'?: subPluginOptions<postcssBlankPseudoOptions>;
247
  
248
  /** CSS break properties */
249
  'break-properties'?: subPluginOptions<postcssPageBreakOptions>;
250
  
251
  /** CSS cascade layers */
252
  'cascade-layers'?: subPluginOptions<postcssCascadeLayersOptions>;
253
  
254
  /** Case-insensitive attribute selectors */
255
  'case-insensitive-attributes'?: subPluginOptions<postcssAttributeCaseInsensitiveOptions>;
256
  
257
  /** CSS clamp() function */
258
  'clamp'?: subPluginOptions<postcssClampOptions>;
259
  
260
  /** CSS color() function */
261
  'color-function'?: subPluginOptions<postcssColorFunctionOptions>;
262
  
263
  /** Display P3 linear color space */
264
  'color-function-display-p3-linear'?: subPluginOptions<postcssColorFunctionDisplayP3LinearOptions>;
265
  
266
  /** Color functional notation */
267
  'color-functional-notation'?: subPluginOptions<postcssColorFunctionalNotationOptions>;
268
  
269
  /** color-mix() function */
270
  'color-mix'?: subPluginOptions<postcssColorMixFunctionOptions>;
271
  
272
  /** Variadic color-mix() arguments */
273
  'color-mix-variadic-function-arguments'?: subPluginOptions<postcssColorMixVariadicFunctionArgumentsOptions>;
274
  
275
  /** Content alt text */
276
  'content-alt-text'?: subPluginOptions<postcssContentAltTextOptions>;
277
  
278
  /** Custom media queries */
279
  'custom-media-queries'?: subPluginOptions<postcssCustomMediaOptions>;
280
  
281
  /** Custom properties (CSS variables) */
282
  'custom-properties'?: subPluginOptions<postcssCustomPropertiesOptions>;
283
  
284
  /** Custom selectors */
285
  'custom-selectors'?: subPluginOptions<postcssCustomSelectorsOptions>;
286
  
287
  /** :dir() pseudo-class */
288
  'dir-pseudo-class'?: subPluginOptions<postcssDirPseudoClassOptions>;
289
  
290
  /** Two-value display syntax */
291
  'display-two-values'?: subPluginOptions<postcssNormalizeDisplayValuesOptions>;
292
  
293
  /** Double-position gradients */
294
  'double-position-gradients'?: subPluginOptions<postcssDoublePositionGradientsOptions>;
295
  
296
  /** Exponential functions */
297
  'exponential-functions'?: subPluginOptions<postcssExponentialFunctionsOptions>;
298
  
299
  /** Logical float and clear values */
300
  'float-clear-logical-values'?: subPluginOptions<postcssLogicalFloatAndClearOptions>;
301
  
302
  /** :focus-visible pseudo-class */
303
  'focus-visible-pseudo-class'?: subPluginOptions<postcssFocusVisibleOptions>;
304
  
305
  /** :focus-within pseudo-class */
306
  'focus-within-pseudo-class'?: subPluginOptions<postcssFocusWithinOptions>;
307
  
308
  /** Font format keywords */
309
  'font-format-keywords'?: subPluginOptions<postcssFontFormatKeywordsOptions>;
310
  
311
  /** font-variant property */
312
  'font-variant-property'?: subPluginOptions<postcssFontVariantOptions>;
313
  
314
  /** Gamut mapping */
315
  'gamut-mapping'?: subPluginOptions<postcssGamutMappingOptions>;
316
  
317
  /** Gap properties */
318
  'gap-properties'?: subPluginOptions<postcssGapPropertiesOptions>;
319
  
320
  /** Gradients interpolation method */
321
  'gradients-interpolation-method'?: subPluginOptions<postcssGradientsInterpolationMethodOptions>;
322
  
323
  /** :has() pseudo-class */
324
  'has-pseudo-class'?: subPluginOptions<postcssHasPseudoOptions>;
325
  
326
  /** Hexadecimal alpha notation */
327
  'hexadecimal-alpha-notation'?: subPluginOptions<postcssColorHexAlphaOptions>;
328
  
329
  /** hwb() function */
330
  'hwb-function'?: subPluginOptions<postcssHWBFunctionOptions>;
331
  
332
  /** ic length unit */
333
  'ic-unit'?: subPluginOptions<postcssICUnitOptions>;
334
  
335
  /** image-set() function */
336
  'image-set-function'?: subPluginOptions<postcssImageSetFunctionOptions>;
337
  
338
  /** :is() pseudo-class */
339
  'is-pseudo-class'?: subPluginOptions<postcssIsPseudoClassOptions>;
340
  
341
  /** lab() function */
342
  'lab-function'?: subPluginOptions<postcssLabFunctionOptions>;
343
  
344
  /** light-dark() function */
345
  'light-dark-function'?: subPluginOptions<postcssLightDarkFunctionOptions>;
346
  
347
  /** Logical overflow */
348
  'logical-overflow'?: subPluginOptions<postcssLogicalOverflowOptions>;
349
  
350
  /** Logical overscroll behavior */
351
  'logical-overscroll-behavior'?: subPluginOptions<postcssLogicalOverscrollBehavorOptions>;
352
  
353
  /** Logical properties and values */
354
  'logical-properties-and-values'?: subPluginOptions<postcssLogicalOptions>;
355
  
356
  /** Logical resize */
357
  'logical-resize'?: subPluginOptions<postcssLogicalResizeOptions>;
358
  
359
  /** Logical viewport units */
360
  'logical-viewport-units'?: subPluginOptions<postcssLogicalViewportUnitsOptions>;
361
  
362
  /** Media query aspect-ratio number values */
363
  'media-queries-aspect-ratio-number-values'?: subPluginOptions<postcssMediaQueriesAspectRatioNumberValuesOptions>;
364
  
365
  /** Media query ranges */
366
  'media-query-ranges'?: subPluginOptions<postcssMediaMinmaxOptions>;
367
  
368
  /** Nested calc() */
369
  'nested-calc'?: subPluginOptions<postcssNestedCalcOptions>;
370
  
371
  /** CSS nesting rules */
372
  'nesting-rules'?: subPluginOptions<postcssNestingOptions>;
373
  
374
  /** :not() pseudo-class */
375
  'not-pseudo-class'?: subPluginOptions<postcssSelectorNotOptions>;
376
  
377
  /** oklab() function */
378
  'oklab-function'?: subPluginOptions<postcssOKLabFunctionOptions>;
379
  
380
  /** Opacity percentage */
381
  'opacity-percentage'?: subPluginOptions<postcssOpacityPercentageOptions>;
382
  
383
  /** Overflow shorthand property */
384
  'overflow-property'?: subPluginOptions<postcssOverflowShorthandOptions>;
385
  
386
  /** overflow-wrap property */
387
  'overflow-wrap-property'?: subPluginOptions<postcssReplaceOverflowWrapOptions>;
388
  
389
  /** Place properties */
390
  'place-properties'?: subPluginOptions<postcssPlaceOptions>;
391
  
392
  /** prefers-color-scheme query */
393
  'prefers-color-scheme-query'?: subPluginOptions<postcssPrefersColorSchemeOptions>;
394
  
395
  /** random() function */
396
  'random-function'?: subPluginOptions<postcssRandomFunctionOptions>;
397
  
398
  /** rebeccapurple color */
399
  'rebeccapurple-color'?: subPluginOptions<postcssColorRebeccapurpleOptions>;
400
  
401
  /** Relative color syntax */
402
  'relative-color-syntax'?: subPluginOptions<postcssRelativeColorSyntaxOptions>;
403
  
404
  /** :scope pseudo-class */
405
  'scope-pseudo-class'?: subPluginOptions<postcssScopePseudoClassOptions>;
406
  
407
  /** Sign functions */
408
  'sign-functions'?: subPluginOptions<postcssSignFunctionsOptions>;
409
  
410
  /** Stepped value functions */
411
  'stepped-value-functions'?: subPluginOptions<postcssSteppedValueFunctionsOptions>;
412
  
413
  /** system-ui font family */
414
  'system-ui-font-family'?: subPluginOptions<postcssFontFamilySystemUIOptions>;
415
  
416
  /** text-decoration shorthand */
417
  'text-decoration-shorthand'?: subPluginOptions<postcssTextDecorationShorthandOptions>;
418
  
419
  /** Trigonometric functions */
420
  'trigonometric-functions'?: subPluginOptions<postcssTrigonometricFunctionsOptions>;
421
  
422
  /** unset value */
423
  'unset-value'?: subPluginOptions<postcssUnsetValueOptions>;
424
}
425
```
426

427
## Type Import Examples
428

429
```typescript
430
// Import specific types
431
import { 
432
  pluginOptions, 
433
  DirectionFlow, 
434
  pluginsOptions,
435
  postcssClampOptions 
436
} from 'postcss-preset-env';
437

438
// Use in configuration
439
const config: pluginOptions = {
440
  stage: 2,
441
  logical: {
442
    inlineDirection: DirectionFlow.RightToLeft
443
  },
444
  features: {
445
    'clamp': {
446
      preserve: true,
447
      precalculate: false
448
    }
449
  }
450
};
451
```