CtrlK
BlogDocsLog inGet started
Tessl Logo

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

Overview
Eval results
Files

css-features.mddocs/

CSS Features

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.

Capabilities

Feature Configuration System

Control individual CSS features through the features configuration object.

interface pluginsOptions {
  [featureId: string]: subPluginOptions<any>;
}

/**
 * Plugin option configuration types
 * - boolean: Enable (true) or disable (false) the feature
 * - object: Enable with specific configuration
 * - ['auto'|boolean, object]: Tuple with enable/disable and configuration
 */
type subPluginOptions<T> = ['auto' | boolean, T] | T | boolean;

Usage Examples:

postcssPresetEnv({
  features: {
    // Enable feature with default options
    'nesting-rules': true,
    
    // Disable feature
    'custom-properties': false,
    
    // Configure feature options
    'custom-properties': { preserve: true },
    
    // Tuple format: [enable, options]
    'autoprefixer': [true, { grid: 'autoplace' }]
  }
});

Color Module Features

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

interface ColorFeatures {
  /** color() function for wide-gamut colors */
  'color-function'?: subPluginOptions<ColorFunctionOptions>;
  
  /** color-mix() function for color blending */
  'color-mix'?: subPluginOptions<ColorMixOptions>;
  
  /** Variadic color-mix() function arguments */
  'color-mix-variadic-function-arguments'?: subPluginOptions<ColorMixVariadicOptions>;
  
  /** hwb() function (hue, whiteness, blackness) */
  'hwb-function'?: subPluginOptions<HWBFunctionOptions>;
  
  /** lab() function for Lab color space */
  'lab-function'?: subPluginOptions<LabFunctionOptions>;
  
  /** oklab() function for OKLab color space */
  'oklab-function'?: subPluginOptions<OklabFunctionOptions>;
  
  /** alpha() function for alpha channel manipulation */
  'alpha-function'?: subPluginOptions<AlphaFunctionOptions>;
  
  /** 8-digit hexadecimal alpha notation (#rrggbbaa) */
  'hexadecimal-alpha-notation'?: subPluginOptions<HexAlphaOptions>;
  
  /** Modern color functional notation (space-separated syntax) */
  'color-functional-notation'?: subPluginOptions<ColorFunctionalNotationOptions>;
  
  /** rebeccapurple color keyword */
  'rebeccapurple-color'?: subPluginOptions<RebeccapurpleOptions>;
  
  /** Relative color syntax (from keyword) */
  'relative-color-syntax'?: subPluginOptions<RelativeColorSyntaxOptions>;
  
  /** light-dark() function for theme-aware colors */
  'light-dark-function'?: subPluginOptions<LightDarkFunctionOptions>;
  
  /** Gamut mapping for out-of-gamut colors */
  'gamut-mapping'?: subPluginOptions<GamutMappingOptions>;
  
  /** Display P3 linear color space support */
  'color-function-display-p3-linear'?: subPluginOptions<DisplayP3LinearOptions>;
  
  /** Gradients interpolation method */
  'gradients-interpolation-method'?: subPluginOptions<GradientsInterpolationOptions>;
}

Usage Examples:

// Enable modern color functions
postcssPresetEnv({
  features: {
    'color-mix': true,
    'lab-function': { preserve: true },
    'hwb-function': true,
    'hexadecimal-alpha-notation': true
  }
});

Logical Properties Features

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

interface LogicalPropertiesFeatures {
  /** Logical properties and values (margin-inline, padding-block, etc.) */
  'logical-properties-and-values'?: subPluginOptions<LogicalPropertiesOptions>;
  
  /** Logical overflow properties */
  'logical-overflow'?: subPluginOptions<LogicalOverflowOptions>;
  
  /** Logical overscroll-behavior properties */
  'logical-overscroll-behavior'?: subPluginOptions<LogicalOverscrollOptions>;
  
  /** Logical resize property values */
  'logical-resize'?: subPluginOptions<LogicalResizeOptions>;
  
  /** Logical viewport units (vi, vb, etc.) */
  'logical-viewport-units'?: subPluginOptions<LogicalViewportOptions>;
  
  /** Logical values in float and clear properties */
  'float-clear-logical-values'?: subPluginOptions<FloatClearLogicalOptions>;
}

Usage Examples:

// Enable logical properties for RTL/LTR support
postcssPresetEnv({
  features: {
    'logical-properties-and-values': {
      preserve: true
    },
    'logical-overflow': true,
    'logical-viewport-units': true
  },
  logical: {
    inlineDirection: 'right-to-left'
  }
});

Selector Features

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

interface SelectorFeatures {
  /** :is() matches-any pseudo-class */
  'is-pseudo-class'?: subPluginOptions<IsPseudoOptions>;
  
  /** :has() relational pseudo-class */
  'has-pseudo-class'?: subPluginOptions<HasPseudoOptions>;
  
  /** :focus-visible focus-indicated pseudo-class */
  'focus-visible-pseudo-class'?: subPluginOptions<FocusVisibleOptions>;
  
  /** :focus-within focus container pseudo-class */
  'focus-within-pseudo-class'?: subPluginOptions<FocusWithinOptions>;
  
  /** :any-link hyperlink pseudo-class */
  'any-link-pseudo-class'?: subPluginOptions<AnyLinkOptions>;
  
  /** :dir() directionality pseudo-class */
  'dir-pseudo-class'?: subPluginOptions<DirPseudoOptions>;
  
  /** :not() enhanced negation pseudo-class */
  'not-pseudo-class'?: subPluginOptions<NotPseudoOptions>;
  
  /** :blank empty-value pseudo-class */
  'blank-pseudo-class'?: subPluginOptions<BlankPseudoOptions>;
  
  /** :scope scope pseudo-class */
  'scope-pseudo-class'?: subPluginOptions<ScopePseudoOptions>;
  
  /** Case-insensitive attribute selectors */
  'case-insensitive-attributes'?: subPluginOptions<CaseInsensitiveOptions>;
}

Usage Examples:

// Enable modern pseudo-classes
postcssPresetEnv({
  features: {
    'focus-visible-pseudo-class': true,
    'has-pseudo-class': { preserve: true },
    'is-pseudo-class': true,
    'case-insensitive-attributes': true
  }
});

Custom Syntax Features

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

interface CustomSyntaxFeatures {
  /** Custom properties (CSS variables) */
  'custom-properties'?: subPluginOptions<CustomPropertiesOptions>;
  
  /** Custom media queries */
  'custom-media-queries'?: subPluginOptions<CustomMediaOptions>;
  
  /** Custom selectors */
  'custom-selectors'?: subPluginOptions<CustomSelectorsOptions>;
  
  /** Cascade layers (@layer) */
  'cascade-layers'?: subPluginOptions<CascadeLayersOptions>;
  
  /** CSS nesting rules */
  'nesting-rules'?: subPluginOptions<NestingOptions>;
}

Usage Examples:

// Enable custom syntax features
postcssPresetEnv({
  features: {
    'custom-properties': { preserve: false },
    'custom-media-queries': true,
    'nesting-rules': { noIsPseudoSelector: false },
    'cascade-layers': true
  }
});

Layout and Positioning Features

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

interface LayoutFeatures {
  /** Gap properties for flexbox and grid */
  'gap-properties'?: subPluginOptions<GapPropertiesOptions>;
  
  /** Place properties shorthand */
  'place-properties'?: subPluginOptions<PlacePropertiesOptions>;
  
  /** Double-position gradients */
  'double-position-gradients'?: subPluginOptions<DoublePositionGradientsOptions>;
  
  /** image-set() function */
  'image-set-function'?: subPluginOptions<ImageSetFunctionOptions>;
  
  /** Two-value display property syntax */
  'display-two-values'?: subPluginOptions<DisplayTwoValuesOptions>;
  
  /** Overflow shorthand property */
  'overflow-property'?: subPluginOptions<OverflowPropertyOptions>;
  
  /** overflow-wrap property replacement */
  'overflow-wrap-property'?: subPluginOptions<OverflowWrapOptions>;
}

Usage Examples:

// Enable modern layout features
postcssPresetEnv({
  features: {
    'gap-properties': true,
    'place-properties': true,
    'image-set-function': { preserve: true },
    'overflow-property': true
  }
});

Typography and Text Features

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

interface TypographyFeatures {
  /** font-variant property */
  'font-variant-property'?: subPluginOptions<FontVariantOptions>;
  
  /** system-ui font family */
  'system-ui-font-family'?: subPluginOptions<SystemUIFontOptions>;
  
  /** Font format() keywords */
  'font-format-keywords'?: subPluginOptions<FontFormatOptions>;
  
  /** text-decoration shorthand */
  'text-decoration-shorthand'?: subPluginOptions<TextDecorationOptions>;
  
  /** Content alt text */
  'content-alt-text'?: subPluginOptions<ContentAltTextOptions>;
  
  /** ic length unit */
  'ic-unit'?: subPluginOptions<ICUnitOptions>;
}

Mathematical Functions

Mathematical functions for calculations and value transformations.

interface MathFunctions {
  /** clamp() function */
  'clamp'?: subPluginOptions<ClampOptions>;
  
  /** Trigonometric functions (sin, cos, tan, etc.) */
  'trigonometric-functions'?: subPluginOptions<TrigonometricOptions>;
  
  /** Exponential functions (pow, sqrt, log, etc.) */
  'exponential-functions'?: subPluginOptions<ExponentialOptions>;
  
  /** Sign functions (abs, sign) */
  'sign-functions'?: subPluginOptions<SignFunctionsOptions>;
  
  /** Stepped value functions (round, mod, rem) */
  'stepped-value-functions'?: subPluginOptions<SteppedValueOptions>;
  
  /** random() function */
  'random-function'?: subPluginOptions<RandomFunctionOptions>;
  
  /** Nested calc() expressions */
  'nested-calc'?: subPluginOptions<NestedCalcOptions>;
}

Media Query Features

Enhanced media query syntax and features.

interface MediaQueryFeatures {
  /** Media query ranges (width >= 320px) */
  'media-query-ranges'?: subPluginOptions<MediaQueryRangesOptions>;
  
  /** Aspect-ratio number values */
  'media-queries-aspect-ratio-number-values'?: subPluginOptions<AspectRatioNumberOptions>;
  
  /** prefers-color-scheme media query */
  'prefers-color-scheme-query'?: subPluginOptions<PrefersColorSchemeOptions>;
}

Legacy and Compatibility Features

Features for handling legacy properties and browser compatibility.

interface CompatibilityFeatures {
  /** all property */
  'all-property'?: subPluginOptions<AllPropertyOptions>;
  
  /** unset value */
  'unset-value'?: subPluginOptions<UnsetValueOptions>;
  
  /** initial value */
  'initial'?: subPluginOptions<InitialOptions>;
  
  /** Break properties (page-break-* to break-*) */
  'break-properties'?: subPluginOptions<BreakPropertiesOptions>;
  
  /** Opacity percentage values */
  'opacity-percentage'?: subPluginOptions<OpacityPercentageOptions>;
}

Complete Features Interface

interface pluginsOptions extends 
  ColorFeatures,
  LogicalPropertiesFeatures,
  SelectorFeatures,
  CustomSyntaxFeatures,
  LayoutFeatures,
  TypographyFeatures,
  MathFunctions,
  MediaQueryFeatures,
  CompatibilityFeatures {
  // All feature IDs can be configured with subPluginOptions
}

Install with Tessl CLI

npx tessl i tessl/npm-postcss-preset-env

docs

css-features.md

index.md

plugin-configuration.md

type-definitions.md

tile.json