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:

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

postcss.config.js
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.

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

For further documentation, checkout PostCSS Docs

Contributors

Thanks to all the contributors who have helped make this documentation better!

  • manucorporat
  • manuelsanchezweb
  • manuelsanchez2
  • the-r3aper7
  • mhevery
  • Benny-Nottonson
  • mrhoodz
  • adamdbradley
bun run qwik add postcss
npm run qwik add postcss
pnpm run qwik add postcss
yarn run qwik add postcss
bun install cssnano
npm install cssnano
pnpm install cssnano
yarn add cssnano