⚠️ NOTE: I stopped using PostCSS and switched back to SASS. There were many bugs I had to fix in order to make PostCSS work. Even if it would work, I would have a watered-down version of SASS. See conclusion below

With post CSS you are able to "create your own sass". You can choose plugins like indenting and variables.

What is PostCSS

TLDR; PostCSS is in some way like a Javascript bundler in the sense that it’s up to you how you use it, it gets an input and give you an output, but in the middle you can hook plugins to transform your data in a multitude of possible way leaving the door open to your preferred CSS writing style, for example: are you a virtuous python-ista? then there is a plugin to handle a no-bracket indent-based syntax, you get the point there are plugins for everything, you can find tons of them on postcss.parts!

Why switching to PostCSS

What always bothered me about SASS was node-sass C++ binding, don’t get me wrong, they did a great job and it has good performance, I used it as a micro-service worker of a multi-tenant application to generate tenant’s styles and it worked great, but I don’t want to compile binding every time I pull a repo or have to deal with sharing my repo and hearing the problems it generates building on different machines, what the heck, it’s the only CSS at the end of the day not some sort of rocket maneuvering software!

When you add a script in your package it's actually an alias. If you type npm start if fires nodemon ./bin/www

"scripts": {
    "start": "nodemon ./bin/www",
    "postcss": "postcss -o public/stylesheets/output/style.css public/stylesheets/style.css -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Setup

• Syntax highlighting for .sss file

Package.json

In this file, you create a script to point to your styling files

-w to watch the files

-o for the output file

    "scripts": {
    		..
        "postcss": "postcss -o public/stylesheets/output/style.css public/stylesheets/style.sss -w",
      },

Config file

.postcssrc - filename

You don't have to link to this file. If you use the CLI.

    {
      "parser": "sugarss",
      "plugins": {
        postcss-easy-import
      }
    }

Emmet in .sss files

Go to your settings.json file and paste this code

    ...
    
    "emmet.includeLanguages": {
        "postcss": "css"
      },
      "emmet.syntaxProfiles": {
        "postcss": "css"
      },
    
    ...

Sources

---

• https://github.com/postcss/postcss-cli
• https://github.com/postcss/sugarss
• https://medium.com/@marzelin/working-with-postcss-in-vscode-9247f2871e37
• https://medium.com/@marzelin/working-with-postcss-in-vscode-9247f2871e37
• https://medium.com/@im.simonecorsi/moving-from-sass-to-postcss-why-what-and-how-f68b1bc760dc
• https://postcss.org/

Conclusion

After 2 days of trying to get PostCSS working as I like, I ended up creating a poor version of SASS. What intrigued me about PostCSS was the opportunity to pick and choose all sorts of plugins. I looked for a while and ended up with only a plugin to compress my CSS besides the sass-like features. I still have problems with my CSS not compiling correctly. For example, this code is compiled as one line instead of 3. Also, emmet isn't working well with the sugarcss plugin, a plugin to have a nested syntax.

.profile-header {
  img{width: 100%};
}

Because of this, I moved back to SASS. It took ~5 minutes to set up and watch the files instead of a couple of hours.