or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-features.mdindex.mdplugin-configuration.mdtype-definitions.md
tile.json

tessl/npm-postcss-preset-env

Convert modern CSS into something browsers understand with automatic polyfills based on targeted browsers

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/postcss-preset-env@10.3.x

To install, run

npx @tessl/cli install tessl/npm-postcss-preset-env@10.3.0

index.mddocs/

PostCSS Preset Env

PostCSS Preset Env converts modern CSS into something browsers understand, determining the polyfills you need based on your targeted browsers or runtime environments. It combines 60+ CSS feature polyfills with autoprefixer functionality, automatically enabling features based on browser support data from CSSDB.

Package Information

  • Package Name: postcss-preset-env
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install postcss-preset-env

Core Imports

const postcssPresetEnv = require('postcss-preset-env');

ES Modules:

import postcssPresetEnv from 'postcss-preset-env';

Basic Usage

import postcss from 'postcss';
import postcssPresetEnv from 'postcss-preset-env';

const css = `
  :root {
    --mainColor: #12345678;
  }
  
  body {
    color: var(--mainColor);
    font-family: system-ui;
  }
  
  .heading {
    background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);
  }
  
  a:hover {
    color: rebeccapurple;
  }
`;

const result = await postcss([
  postcssPresetEnv({
    stage: 2,
    features: {
      'nesting-rules': true,
      'custom-properties': false
    }
  })
]).process(css, { from: 'src/app.css', to: 'dist/app.css' });

console.log(result.css);

Architecture

PostCSS Preset Env is built around several key components:

  • Plugin Creator Function: Main export that accepts configuration and returns a PostCSS plugin
  • Feature System: 60+ individual CSS feature plugins that can be enabled/disabled
  • Stage-based Control: Features organized by CSS specification stages (0-4)
  • Browser Targeting: Integration with Browserslist for automatic feature detection
  • Autoprefixer Integration: Built-in vendor prefix handling
  • Type Safety: Full TypeScript support with comprehensive type definitions

Capabilities

Core Plugin Configuration

The main plugin creator function with comprehensive configuration options for controlling CSS feature polyfills, browser targeting, and plugin behavior.

declare function postcssPresetEnv(options?: pluginOptions): PostCSS.Plugin;

interface pluginOptions {
  /** CSS feature stage control (0-4, default: 2) */
  stage?: number | false;
  /** Minimum vendor implementations required (default: 0) */
  minimumVendorImplementations?: number;
  /** Enable client-side polyfills (default: false) */
  enableClientSidePolyfills?: boolean;
  /** Browserslist environment name */
  env?: string;
  /** Browser targets override */
  browsers?: string | string[] | null;
  /** Preserve original CSS (default: varies by plugin) */
  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 (default: false) */
  debug?: boolean;
  /** Logical properties configuration */
  logical?: LogicalOptions;
}

Plugin Configuration

CSS Feature Polyfills

Individual CSS feature polyfills that can be enabled, disabled, or configured. Features are organized by CSS specification stages and automatically enabled based on browser support.

interface pluginsOptions {
  /** CSS Color Module Level 4 features */
  'color-function'?: subPluginOptions<ColorFunctionOptions>;
  'color-mix'?: subPluginOptions<ColorMixOptions>;
  'hwb-function'?: subPluginOptions<HWBFunctionOptions>;
  'lab-function'?: subPluginOptions<LabFunctionOptions>;
  'oklab-function'?: subPluginOptions<OklabFunctionOptions>;
  'hexadecimal-alpha-notation'?: subPluginOptions<HexAlphaOptions>;
  'color-functional-notation'?: subPluginOptions<ColorFunctionalNotationOptions>;
  'rebeccapurple-color'?: subPluginOptions<RebeccapurpleOptions>;
  
  /** CSS Logical Properties */
  'logical-properties-and-values'?: subPluginOptions<LogicalPropertiesOptions>;
  'logical-overflow'?: subPluginOptions<LogicalOverflowOptions>;
  'logical-overscroll-behavior'?: subPluginOptions<LogicalOverscrollOptions>;
  'logical-resize'?: subPluginOptions<LogicalResizeOptions>;
  'logical-viewport-units'?: subPluginOptions<LogicalViewportOptions>;
  'float-clear-logical-values'?: subPluginOptions<FloatClearLogicalOptions>;
  
  /** CSS Selectors Level 4 */
  'is-pseudo-class'?: subPluginOptions<IsPseudoOptions>;
  'has-pseudo-class'?: subPluginOptions<HasPseudoOptions>;
  'focus-visible-pseudo-class'?: subPluginOptions<FocusVisibleOptions>;
  'focus-within-pseudo-class'?: subPluginOptions<FocusWithinOptions>;
  'any-link-pseudo-class'?: subPluginOptions<AnyLinkOptions>;
  'dir-pseudo-class'?: subPluginOptions<DirPseudoOptions>;
  'not-pseudo-class'?: subPluginOptions<NotPseudoOptions>;
  
  /** And 40+ additional features... */
}

type subPluginOptions<T> = ['auto' | boolean, T] | T | boolean;

CSS Features

Type Definitions

Core type definitions used throughout the plugin system, including enums for logical directions and configuration interfaces.

enum DirectionFlow {
  TopToBottom = 'top-to-bottom',
  BottomToTop = 'bottom-to-top',
  RightToLeft = 'right-to-left',
  LeftToRight = 'left-to-right'
}

interface LogicalOptions {
  /** Set the inline flow direction (default: left-to-right) */
  inlineDirection?: DirectionFlow;
  /** Set the block flow direction (default: top-to-bottom) */
  blockDirection?: DirectionFlow;
}

Type Definitions