How to setup PostCSS nesting in Vite?

The process of setting up PostCSS nesting in Vite can be divided into several steps. Let me walk you through each step:

Step 1: Initialize the Project

First, ensure that Node.js is installed in your environment. Then, you can create a new Vite project using the following command:

bash
npm init vite@latest my-vite-project --template vanilla
cd my-vite-project
npm install

Step 2: Install PostCSS and Related Plugins

In your project, you need to install postcss along with either postcss-nesting or postcss-nested plugins to enable CSS nesting functionality. Both plugins allow you to use nesting syntax, but they handle it slightly differently. postcss-nesting aligns with the CSS nesting proposal, while postcss-nested is more similar to Sass nesting.

bash
npm install -D postcss postcss-nesting

Or, if you prefer postcss-nested:

bash
npm install -D postcss postcss-nested

Step 3: Configure PostCSS

In the project root directory, create a file named postcss.config.js. In this file, you will configure the PostCSS plugins as follows:

javascript
// Using postcss-nesting
module.exports = {
  plugins: [
    require('postcss-nesting')
  ]
};

// Or using postcss-nested
module.exports = {
  plugins: [
    require('postcss-nested')
  ]
};

Step 4: Use PostCSS in Vite Configuration

Typically, Vite automatically detects the postcss.config.js file in your project and applies the corresponding configuration. Therefore, in most cases, you don't need to add additional PostCSS-related configurations in the vite.config.js file.

Step 5: Write Nested CSS

In your project, you can now use CSS nesting syntax. For example, in your .css file:

css
.button {
  color: white;
  background-color: blue;

  &__icon {
    display: inline-block;
  }
}

Step 6: Run and Test

Finally, run your project and verify that the CSS is processed as expected with nesting:

bash
npm run dev

Visit your application and check if everything is working correctly.

Summary

By following these steps, you can successfully configure PostCSS in your Vite project to use CSS nesting functionality, which will help you write clearer and more structured CSS code.