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

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

Install with Tessl CLI

npx tessl i tessl/npm-postcss-preset-env
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/postcss-preset-env@10.3.x
Publish Source
CLI
Badge
tessl/npm-postcss-preset-env badge