tessl/npm-postcss-preset-env
Convert modern CSS into something browsers understand with automatic polyfills based on targeted browsers
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
type-definitions.mddocs/
Type Definitions
Core type definitions used throughout PostCSS Preset Env, including enums for logical directions, configuration interfaces, and feature-specific option types.
Capabilities
Direction Flow Enum
Enumeration for logical direction flow values used in logical properties configuration.
/**
* Logical direction flow values for writing-mode independent layouts
*/
enum DirectionFlow {
/** Top to bottom block flow */
TopToBottom = 'top-to-bottom',
/** Bottom to top block flow */
BottomToTop = 'bottom-to-top',
/** Right to left inline flow */
RightToLeft = 'right-to-left',
/** Left to right inline flow */
LeftToRight = 'left-to-right'
}Usage Examples:
import { DirectionFlow } from 'postcss-preset-env';
// Configure RTL layout
const options = {
logical: {
inlineDirection: DirectionFlow.RightToLeft,
blockDirection: DirectionFlow.TopToBottom
}
};
// Using string values directly
const options2 = {
logical: {
inlineDirection: 'right-to-left',
blockDirection: 'top-to-bottom'
}
};Sub-Plugin Options Type
Generic type for configuring individual CSS feature plugins.
/**
* Configuration options for individual CSS feature plugins
* @template T - Plugin-specific option type
*/
type subPluginOptions<T> = ['auto' | boolean, T] | T | boolean;Usage Examples:
// Boolean: simple enable/disable
const features: pluginsOptions = {
'nesting-rules': true,
'custom-properties': false
};
// Object: enable with configuration
const features2: pluginsOptions = {
'custom-properties': { preserve: true },
'clamp': { precalculate: true }
};
// Tuple: [enable/disable, configuration]
const features3: pluginsOptions = {
'custom-properties': [true, { preserve: true }],
'autoprefixer': ['auto', { grid: 'autoplace' }]
};Feature-Specific Option Types
Type definitions for commonly configured CSS features with specific options.
/** postcss-clamp plugin options */
interface postcssClampOptions {
/** Preserve the original notation (default: false) */
preserve?: boolean;
/** Precalculate values with the same unit (default: false) */
precalculate?: boolean;
}
/** postcss-opacity-percentage plugin options */
interface postcssOpacityPercentageOptions {
/** Preserve the original notation (default: false) */
preserve?: boolean;
}
/** postcss-replace-overflow-wrap plugin options */
interface postcssReplaceOverflowWrapOptions {
/** Preserve the original notation (default: false) */
preserve?: boolean;
}
/** postcss-page-break plugin options */
interface postcssPageBreakOptions {
// No configuration options
}
/** postcss-font-variant plugin options */
interface postcssFontVariantOptions {
// No configuration options
}
/** postcss-system-ui-font-family plugin options */
interface postcssFontFamilySystemUIOptions {
// No configuration options
}Usage Examples:
// Configure clamp function behavior
const features: pluginsOptions = {
'clamp': {
preserve: true,
precalculate: false
},
'opacity-percentage': {
preserve: true
}
};Logical Properties Configuration
Type definitions for configuring logical properties behavior.
/**
* Configuration for logical properties and writing modes
*/
interface LogicalOptions {
/**
* Set the inline flow direction
* Controls how inline-start/inline-end resolve
* @default 'left-to-right'
*/
inlineDirection?: DirectionFlow;
/**
* Set the block flow direction
* Controls how block-start/block-end resolve
* @default 'top-to-bottom'
*/
blockDirection?: DirectionFlow;
}Usage Examples:
// Configure for Arabic/Hebrew text (RTL)
const rtlConfig: LogicalOptions = {
inlineDirection: DirectionFlow.RightToLeft,
blockDirection: DirectionFlow.TopToBottom
};
// Configure for vertical Japanese text
const verticalConfig: LogicalOptions = {
inlineDirection: DirectionFlow.TopToBottom,
blockDirection: DirectionFlow.RightToLeft
};Main Plugin Options Interface
Complete type definition for the main plugin configuration.
/**
* Configuration options for PostCSS Preset Env plugin
*/
interface pluginOptions {
/** CSS feature stage control (0-4, false to disable) */
stage?: number | false;
/** Minimum vendor implementations required */
minimumVendorImplementations?: number;
/** Enable client-side polyfills requiring JavaScript */
enableClientSidePolyfills?: boolean;
/** Browserslist environment name */
env?: string;
/** Browser targets override */
browsers?: string | Array<string> | null;
/** Global preserve setting for original CSS */
preserve?: boolean;
/** Autoprefixer configuration */
autoprefixer?: autoprefixer.Options | false;
/** Individual feature configuration */
features?: pluginsOptions;
/** Insert plugins before specific features */
insertBefore?: Record<string, unknown>;
/** Insert plugins after specific features */
insertAfter?: Record<string, unknown>;
/** Enable debug output */
debug?: boolean;
/** Logical properties configuration */
logical?: LogicalOptions;
}Plugin Features Configuration Interface
Complete type definition for configuring individual CSS features.
/**
* Configuration for all available CSS features
* Each feature can be enabled, disabled, or configured with specific options
*/
interface pluginsOptions {
/** CSS all property */
'all-property'?: subPluginOptions<postcssInitialOptions>;
/** CSS alpha() function */
'alpha-function'?: subPluginOptions<postcssAlphaFunctionOptions>;
/** :any-link pseudo-class */
'any-link-pseudo-class'?: subPluginOptions<postcssPseudoClassAnyLinkOptions>;
/** :blank pseudo-class */
'blank-pseudo-class'?: subPluginOptions<postcssBlankPseudoOptions>;
/** CSS break properties */
'break-properties'?: subPluginOptions<postcssPageBreakOptions>;
/** CSS cascade layers */
'cascade-layers'?: subPluginOptions<postcssCascadeLayersOptions>;
/** Case-insensitive attribute selectors */
'case-insensitive-attributes'?: subPluginOptions<postcssAttributeCaseInsensitiveOptions>;
/** CSS clamp() function */
'clamp'?: subPluginOptions<postcssClampOptions>;
/** CSS color() function */
'color-function'?: subPluginOptions<postcssColorFunctionOptions>;
/** Display P3 linear color space */
'color-function-display-p3-linear'?: subPluginOptions<postcssColorFunctionDisplayP3LinearOptions>;
/** Color functional notation */
'color-functional-notation'?: subPluginOptions<postcssColorFunctionalNotationOptions>;
/** color-mix() function */
'color-mix'?: subPluginOptions<postcssColorMixFunctionOptions>;
/** Variadic color-mix() arguments */
'color-mix-variadic-function-arguments'?: subPluginOptions<postcssColorMixVariadicFunctionArgumentsOptions>;
/** Content alt text */
'content-alt-text'?: subPluginOptions<postcssContentAltTextOptions>;
/** Custom media queries */
'custom-media-queries'?: subPluginOptions<postcssCustomMediaOptions>;
/** Custom properties (CSS variables) */
'custom-properties'?: subPluginOptions<postcssCustomPropertiesOptions>;
/** Custom selectors */
'custom-selectors'?: subPluginOptions<postcssCustomSelectorsOptions>;
/** :dir() pseudo-class */
'dir-pseudo-class'?: subPluginOptions<postcssDirPseudoClassOptions>;
/** Two-value display syntax */
'display-two-values'?: subPluginOptions<postcssNormalizeDisplayValuesOptions>;
/** Double-position gradients */
'double-position-gradients'?: subPluginOptions<postcssDoublePositionGradientsOptions>;
/** Exponential functions */
'exponential-functions'?: subPluginOptions<postcssExponentialFunctionsOptions>;
/** Logical float and clear values */
'float-clear-logical-values'?: subPluginOptions<postcssLogicalFloatAndClearOptions>;
/** :focus-visible pseudo-class */
'focus-visible-pseudo-class'?: subPluginOptions<postcssFocusVisibleOptions>;
/** :focus-within pseudo-class */
'focus-within-pseudo-class'?: subPluginOptions<postcssFocusWithinOptions>;
/** Font format keywords */
'font-format-keywords'?: subPluginOptions<postcssFontFormatKeywordsOptions>;
/** font-variant property */
'font-variant-property'?: subPluginOptions<postcssFontVariantOptions>;
/** Gamut mapping */
'gamut-mapping'?: subPluginOptions<postcssGamutMappingOptions>;
/** Gap properties */
'gap-properties'?: subPluginOptions<postcssGapPropertiesOptions>;
/** Gradients interpolation method */
'gradients-interpolation-method'?: subPluginOptions<postcssGradientsInterpolationMethodOptions>;
/** :has() pseudo-class */
'has-pseudo-class'?: subPluginOptions<postcssHasPseudoOptions>;
/** Hexadecimal alpha notation */
'hexadecimal-alpha-notation'?: subPluginOptions<postcssColorHexAlphaOptions>;
/** hwb() function */
'hwb-function'?: subPluginOptions<postcssHWBFunctionOptions>;
/** ic length unit */
'ic-unit'?: subPluginOptions<postcssICUnitOptions>;
/** image-set() function */
'image-set-function'?: subPluginOptions<postcssImageSetFunctionOptions>;
/** :is() pseudo-class */
'is-pseudo-class'?: subPluginOptions<postcssIsPseudoClassOptions>;
/** lab() function */
'lab-function'?: subPluginOptions<postcssLabFunctionOptions>;
/** light-dark() function */
'light-dark-function'?: subPluginOptions<postcssLightDarkFunctionOptions>;
/** Logical overflow */
'logical-overflow'?: subPluginOptions<postcssLogicalOverflowOptions>;
/** Logical overscroll behavior */
'logical-overscroll-behavior'?: subPluginOptions<postcssLogicalOverscrollBehavorOptions>;
/** Logical properties and values */
'logical-properties-and-values'?: subPluginOptions<postcssLogicalOptions>;
/** Logical resize */
'logical-resize'?: subPluginOptions<postcssLogicalResizeOptions>;
/** Logical viewport units */
'logical-viewport-units'?: subPluginOptions<postcssLogicalViewportUnitsOptions>;
/** Media query aspect-ratio number values */
'media-queries-aspect-ratio-number-values'?: subPluginOptions<postcssMediaQueriesAspectRatioNumberValuesOptions>;
/** Media query ranges */
'media-query-ranges'?: subPluginOptions<postcssMediaMinmaxOptions>;
/** Nested calc() */
'nested-calc'?: subPluginOptions<postcssNestedCalcOptions>;
/** CSS nesting rules */
'nesting-rules'?: subPluginOptions<postcssNestingOptions>;
/** :not() pseudo-class */
'not-pseudo-class'?: subPluginOptions<postcssSelectorNotOptions>;
/** oklab() function */
'oklab-function'?: subPluginOptions<postcssOKLabFunctionOptions>;
/** Opacity percentage */
'opacity-percentage'?: subPluginOptions<postcssOpacityPercentageOptions>;
/** Overflow shorthand property */
'overflow-property'?: subPluginOptions<postcssOverflowShorthandOptions>;
/** overflow-wrap property */
'overflow-wrap-property'?: subPluginOptions<postcssReplaceOverflowWrapOptions>;
/** Place properties */
'place-properties'?: subPluginOptions<postcssPlaceOptions>;
/** prefers-color-scheme query */
'prefers-color-scheme-query'?: subPluginOptions<postcssPrefersColorSchemeOptions>;
/** random() function */
'random-function'?: subPluginOptions<postcssRandomFunctionOptions>;
/** rebeccapurple color */
'rebeccapurple-color'?: subPluginOptions<postcssColorRebeccapurpleOptions>;
/** Relative color syntax */
'relative-color-syntax'?: subPluginOptions<postcssRelativeColorSyntaxOptions>;
/** :scope pseudo-class */
'scope-pseudo-class'?: subPluginOptions<postcssScopePseudoClassOptions>;
/** Sign functions */
'sign-functions'?: subPluginOptions<postcssSignFunctionsOptions>;
/** Stepped value functions */
'stepped-value-functions'?: subPluginOptions<postcssSteppedValueFunctionsOptions>;
/** system-ui font family */
'system-ui-font-family'?: subPluginOptions<postcssFontFamilySystemUIOptions>;
/** text-decoration shorthand */
'text-decoration-shorthand'?: subPluginOptions<postcssTextDecorationShorthandOptions>;
/** Trigonometric functions */
'trigonometric-functions'?: subPluginOptions<postcssTrigonometricFunctionsOptions>;
/** unset value */
'unset-value'?: subPluginOptions<postcssUnsetValueOptions>;
}Type Import Examples
// Import specific types
import {
pluginOptions,
DirectionFlow,
pluginsOptions,
postcssClampOptions
} from 'postcss-preset-env';
// Use in configuration
const config: pluginOptions = {
stage: 2,
logical: {
inlineDirection: DirectionFlow.RightToLeft
},
features: {
'clamp': {
preserve: true,
precalculate: false
}
}
};Install with Tessl CLI
npx tessl i tessl/npm-postcss-preset-env