or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-postcss-initial

PostCSS plugin to provide fallback functionality for the CSS initial keyword.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/postcss-initial@4.0.x

To install, run

npx @tessl/cli install tessl/npm-postcss-initial@4.0.0

index.mddocs/

PostCSS Initial

PostCSS Initial is a PostCSS plugin that provides fallback functionality for the CSS initial keyword. It transforms CSS rules containing the initial keyword into their explicit fallback values, ensuring cross-browser compatibility for modern CSS cascade features.

Package Information

  • Package Name: postcss-initial
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install postcss-initial

Core Imports

const postcssInitial = require('postcss-initial');

For ES modules:

import postcssInitial from 'postcss-initial';

Basic Usage

const postcss = require('postcss');
const postcssInitial = require('postcss-initial');

// Basic usage with default options
const result = postcss([postcssInitial()])
  .process(cssString);

// With custom options
const result = postcss([
  postcssInitial({
    reset: 'inherited',  // Only reset inherited properties  
    replace: true        // Replace 'initial' instead of adding fallback
  })
]).process(cssString);

Input CSS:

a {
  animation: initial;
  background: initial;
  white-space: initial;
}

Output CSS (default options):

a {
  animation: none 0s ease 0s 1 normal none running;
  animation: initial;
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
  white-space: normal;
  white-space: initial;
}

Capabilities

Plugin Factory Function

Creates a PostCSS plugin instance with the specified configuration options.

/**
 * Creates a PostCSS plugin instance
 * @param {Object} opts - Configuration options (optional)
 * @param {string} opts.reset - Subset of rules for 'all' property. Values: 'all' | 'inherited'. Default: 'all'
 * @param {boolean} opts.replace - Replace 'initial' with fallback instead of adding it. Default: false
 * @returns {Object} PostCSS plugin object
 */
function postcssInitial(opts);

Plugin Object Properties:

/** PostCSS plugin object returned by the factory function */
{
  /** Plugin identifier for PostCSS */
  postcssPlugin: 'postcss-initial',
  /** CSS Declaration processor function */
  Declaration: function(decl) { /* ... */ }
}

/** PostCSS 8+ compatibility flag on the exported function */
postcssInitial.postcss = true;

Configuration Options

/**
 * Configuration options for postcss-initial
 * @typedef {Object} PostCSSInitialOptions
 * @property {string} [reset='all'] - Subset of rules for 'all' property. Values: 'all' | 'inherited'
 * @property {boolean} [replace=false] - Replace 'initial' with fallback instead of adding it
 */

Usage Examples

Standard Fallback (Default Behavior)

const postcss = require('postcss');
const postcssInitial = require('postcss-initial');

const css = `
  .reset {
    color: initial;
    margin: initial;
  }
`;

const result = postcss([postcssInitial()])
  .process(css);

// Result adds fallbacks before the original declarations:
// .reset {
//   color: #000;
//   color: initial;
//   margin: 0;
//   margin: initial;
// }

Inherited Properties Only

const result = postcss([
  postcssInitial({ reset: 'inherited' })
]).process(css);

// When using 'all: initial', only inherited properties are reset

Replace Mode

const result = postcss([
  postcssInitial({ replace: true })
]).process(css);

// Result replaces 'initial' with fallback values:
// .reset {
//   color: #000;
//   margin: 0;
// }

Universal Reset

The plugin's killer feature - universal CSS reset using the all property:

const css = `
  a {
    all: initial;
  }
`;

const result = postcss([postcssInitial()])
  .process(css);

// Expands to 50+ individual property resets covering:
// - Animation properties
// - Background properties  
// - Border properties
// - Font properties
// - Layout properties
// - And many more...

Integration with PostCSS

This plugin follows the standard PostCSS plugin pattern and is compatible with PostCSS 8+:

// As part of a PostCSS plugin chain
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const postcssInitial = require('postcss-initial');

postcss([
  postcssInitial({ reset: 'inherited' }),
  autoprefixer
]).process(css);

Browser Compatibility

The plugin transforms the initial keyword into explicit fallback values for browsers that don't support it. This is particularly useful for:

  • Internet Explorer (which doesn't support initial)
  • Older mobile browsers
  • Legacy browser environments

The fallback values are based on CSS specifications and provide the same reset behavior as the initial keyword.