PostCSS: Shiny CSS PreProcessor written in JavaScript 🚀

Managing CSS is an ongoing struggle. There are many ongoing debates trying to justify one or other way to manage CSS. PostCSS takes PreProcessing CSS to another level.

What is it?

PostCSS will let you process the CSS. That's it. It is that simple.

It is written in JavaScript to fit the need of having a node based toolchain for Front End Workflow.

How does it work?

PostCSS will take CSS styles as input and build an AST Tree. AST is Abstract Syntax Tree; which will let you operate on the CSS code.

Now with AST, possibilities are endless. Why so? It is like having Regular Expressions for String operations like matching, replacing etc.

For a small set, it seems trivial but when the size of set increases, the problem increases exponentially as well. This increase introduces a lot of effort to be just handled manually.

Integrations?

Webpack

const autoprefixer = require('autoprefixer');

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.css?$/,
        use: ['css-loader', 'style-loader', {
          loader: 'postcss-loader',
          options: {
            plugins: () => [
              autoprefixer()
            ]
          }
        }],
      },
      ...
    ],
  }
}
...

Rollup

import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer'

export default {
  input: 'src/index.js',
  output: {
    file: 'public/bundle.js',
    format: 'iife',
    sourcemap: true
  },
  plugins: [
    postcss({
      plugins: [
        autoprefixer()
      ]
    })
  ]
};

Read the full post at time2hack.com/2018/03/postcss-css-preproces..

---

Upvote 👍 and share 🗣 with others if you find it interesting