Skip to main content

PostCSS

PostCSS is a tool for transforming CSS with JavaScript plugins. It provides a framework that allows you to parse CSS and use plugins to transform the AST, enabling tasks like autoprefixing, linting, and using future CSS features.

In LiveCodes, PostCSS serves as the underlying engine for many CSS processors including Autoprefixer, Tailwind CSS, UnoCSS, and more. These processors are PostCSS plugins that are applied to CSS output when enabled from the style editor menu.

Usage​

PostCSS plugins can be enabled individually from the style editor menu, or configured via the processors property of the configuration object. They are applied in the order they appear in the menu.

Custom Settings​

Custom settings can be used to configure each plugin's options individually.

For example, to configure Autoprefixer:

Custom Settings
{
  "autoprefixer": {
    "cascade": true
  }
}

Demo​

The following demo enables Autoprefixer and cssnano, and shows the compiled output:

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>PostCSS Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the transformed CSS output.</p>\n  <div class=\"box\">Autoprefixed and processed</div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".box {\n  width: 200px;\n  padding: 1em;\n  background: #4a90d9;\n  color: white;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.box:hover {\n  transform: scale(1.1);\n}\n"
    },
    "processors": [
      "autoprefixer",
      "cssnano"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

Processor Info​

Name​

postcss

Editor​

style

Processor​

PostCSS

Version​

postcss: v8.5.6

Sponsors