Meet Manoj, a passionate Backend developer.
I am reachable at:
<SocialShare platforms={{linkedin: 'manoj-r-6a6975a2'}} />

Meet Srikanth, a passionate frontend developer. Loves to work on optimizing the frontend build pipeline and various other optimizations to improve the web vitals of the pages. Big believer of reverse engineering popular libraries to learn from the experts in the field.

With 8 years of experience in the industry, Srikanth has honed his skills in HTML, CSS, and JavaScript to create responsive & accessible, mobile-friendly websites and web applications. Ability to understand and implement design concepts, coupled with attention to detail, has resulted in the development of high-quality, visually appealing websites that are easy to navigate.

Recent interests include understanding the Qwik library and its philosophy behind, spliting CSS using PostCSS plugins to improvise caching and reduce unused CSS in the page.

I am reachable at:
<SocialShare platforms={{linkedin: 'itzsrikanth', medium: '@srikanth650', twitter: 'Srikanth650'}} />


# PostCSS

PostCSS is a tool for transforming CSS with JavaScript. It allows developers to use JavaScript to manipulate their CSS code in a variety of ways, such as adding vendor prefixes, linting, or optimizing their code. Similar to `Webpack`, it has a big ecosystem of plugins which help to abstract the logics inside them. They are modules that can be added to a PostCSS setup to extend its functionality. Each of them can focus and tackle on specific goal. One of the key features of PostCSS is the ability to chain multiple plugins together, allowing you to apply multiple transformations to your CSS in a single pass.

## PostCSS API

The PostCSS API is the set of functions and methods provided by PostCSS that can be used to manipulate CSS code. It is a Node.js API, and can be used in JavaScript projects to parse and transform CSS code.

Some of the key features of the PostCSS API include:

- **Parsing**: The PostCSS API can parse CSS code and convert it into a JavaScript object, called a "Root" object, that can be manipulated using JavaScript.
- **Transforming**: The PostCSS API provides a set of methods that can be used to manipulate the Root object, such as adding, removing or modifying CSS nodes.
- **Plugins**: The PostCSS API can be extended using plugins, which are modules that add additional functionality to PostCSS, such as linting, optimizing, or adding vendor prefixes.
- **Source Maps**: PostCSS API can generate and consume source maps. A source map is a file that maps the generated CSS code back to the original source files.
- **Lazy Loading**: PostCSS API allows you to process only the styles that are used in the page, this can improve the performance of the website.
- **Concurrent Processing**: The PostCSS API can process multiple CSS files concurrently, which can improve the performance of the build process.
- **File System Watcher**: PostCSS API can watch the file system and automatically re-process the files when they are changed.

To use the PostCSS API, you will need to have Node.js and npm (Node Package Manager) installed on your system. You can then install the PostCSS package using npm and use it in your JavaScript project to parse and transform CSS code.

```javascript
const postcss = require('postcss');
const fs = require('fs');

fs.readFile('input.css', (err, css) => {
    postcss([ require('autoprefixer') ])
        .process(css, { from: 'input.css', to: 'output.css' })
        .then(result => {
            fs.writeFile('output.css', result.css);
            if (result.map) fs.writeFile('output.css.map', result.map);
        });
});
```

## Plugin chaining

To chain multiple plugins together in PostCSS, you will first need to import the plugins you want to use. Then, you can create an instance of the PostCSS processor and use the use method to add the plugins to the processor's pipeline. When using multiple plugins in PostCSS, it's important to understand how they are processed and in what order. This is known as "plugin chaining." By default, PostCSS runs plugins in the order in which they are defined in the configuration. For example, if you have two plugins, A and B, and you configure them in the following order:

```js
postcss([ pluginA(), pluginB() ]);
```

Plugin A will be applied first, followed by plugin B. It's also possible to specify the order in which plugins are processed by chaining them together. For example, if you want to apply plugin A before plugin B:

```js
postcss([ pluginA().use(pluginB()) ]);
```
This will ensure that plugin A is applied first, and then plugin B is applied to the output of plugin A. Additionally, you can also use before and after options in the plugin config to specify the order of the plugins. It's also worth noting that some plugins may depend on other plugins in order to work correctly. So, it's important to check the documentation for each plugin to see if there are any recommended or required plugin dependencies.

In summary, plugin chaining in PostCSS is the order in which the plugins are applied to the CSS code, it's important to understand the order of the plugins and their dependencies to make sure that the desired output is achieved.


Introduction to the PostCSS and explanation on its API and Plugins ecosystem

PostCSS Plugins - A brief introduction

Statistics - A brief introduction