PostCSS Initial

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

import postcssInitial from 'postcss-initial';

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);

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

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;
}

/**
 * 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);

/** 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 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
 */

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;
// }

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

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

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

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

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...

// 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);