postcss-plugins

Overview

PostCSS is a CSS transformation tool with a rich plugin ecosystem. Autoprefixer adds vendor prefixes, cssnano minifies, nesting enables CSS nesting, and custom plugins can transform CSS in any way.

Capabilities

• Autoprefixer for vendor prefix management
• cssnano for CSS minification and optimization
• CSS nesting support (native and polyfill)
• Custom PostCSS plugin development
• Preset-env for modern CSS features
• Source map support and watch mode

When to Use

Trigger phrases:

• "postcss plugins"

• "PostCSS plugin ecosystem — Autoprefixer, cssnano, nesting, custom plugins, prese"

• Need vendor prefix automation

• Want CSS minification as part of build pipeline

• Using CSS nesting before browser support is universal

• Building custom CSS transformation tools

• Using modern CSS features with fallbacks

When NOT to Use

• Task is about content strategy, not creation (use strategy skills)
• Task is about content distribution (use distribution skills)
• You need to analyze content performance (use analytics skills)
• Task is about content moderation (use moderation tools)
• You don't have content guidelines
• Task requires domain expertise (consult experts)

Pseudo Code

The postcss-plugins workflow follows a standard pipeline pattern.

Core flow:

# postcss-plugins primary flow
input = prepare(raw_data)
result = process(input, config={autoprefixer, configuration, cssnano, custom, ecosystem})
validate(result)
deliver(result)

Error handling:

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Core Workflow

# postcss-plugins primary flow
input = prepare(raw_data)
result = process(input, config={autoprefixer, configuration, cssnano, custom, ecosystem})
validate(result)
deliver(result)

Error Handling

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Configuration

// postcss.config.js
module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-nesting": {},
    "postcss-preset-env": {
      stage: 2,
      features: {
        "nesting-rules": false, // using postcss-nesting instead
      },
    },
    autoprefixer: {},
    cssnano: process.env.NODE_ENV === "production" ? {} : false,
  },
}