PostCSS

PostCSS allows developers to write modern CSS while still maintaining backwards compatibility and improving performance. It parses CSS code and passes it through a series of plugins that can modify, optimize, and extend the CSS before outputting the final result.

Usage

You can add PostCSS to your project by using the following Qwik starter script:

npm run qwik add postcss

This will create a new postcss.config.js file at the root of the project with following dependencies and configuration.

• Autoprefixer
• PostCSS Preset Env

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-preset-env": {
      stage: 3,
      features: {
        "nesting-rules": true,
      },
    },
  },
}

If you wish to add a new plugin like CssNano run the following command and update the postcss.config.js.

npm install cssnano --save-dev

module.exports = {
  plugins: {
    /* previous plugin configuration */
    "cssnano": {
      preset: "default"
    }
  },
}

For further documentation, checkout PostCSS Docs