PostCSS: A tool for transforming CSS with JavaScript

But why?

• Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you.
• PostCSS Preset Env, lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments, using cssdb.
• CSS Modules means you never need to worry about your names being too generic, just use whatever makes the most sense.
• Enforce consistent conventions and avoid errors in your stylesheets with stylelint, a modern CSS linter. It supports the latest CSS syntax, as well as CSS-like syntaxes, such as SCSS.

To install on Astro

npm i -D postcss autoprefixer open-props postcss-jit-props postcss-nested

include any other plugin you want to add.

Then add postcss.config.js file in folder root with these settings

const postcssjitprops = require("postcss-jit-props");
const OpenProps = require("open-props");


module.exports = {
  plugins: [
    postcssjitprops(OpenProps),
    require('postcss-nested'),
    require('autoprefixer'),
  ]
};

Add these line to package.json for autoprefixer

"browserslist": [
     "defaults"
 ]

To install on Nextjs

As of now postcss-jit-props doesn’t work on Nextjs

npm i -D open-props

Install any other plugin you want to use through npm

import indivisual package in global css file as required

@import "open-props/sizes";
@import "open-props/colors";
@import "open-props/fonts";
@import "open-props/gradients";

Check Open-props website for more

Tip: Use sass with open-props

To install on Vite

npm i -D open-props postcss-jit-props

Include any other plugin you want to add.

Then add postcss.config.js file in folder root with these settings

const postcssJitProps = require('postcss-jit-props');
const OpenProps = require('open-props');

module.exports = {
  plugins: [postcssJitProps(OpenProps)],
};