DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Abhishek Prasad
Abhishek Prasad

Posted on

Setup CSS modules in POSTCSS

So I was trying to include the modular way of styling sass in my project. Just cuz I feel that it's a convenience for me, no leakage of styles. No strong opinions about it. Initially, I was under the impression that the tech stack that the framework that I was using allowed it i.e. ParcelJS.

Bear with me as I don't have much idea and I just put stuff in place. Now ParcelJS use PostCSS.

More information about PostCSS

Upon researching a bit more I realized that there is a command that I can call from the npm start script.

"start": parcel --no-hmr src/index.html

Alt Text

Which makes no sense to me.

So hmr is Hot module Reloading huh... Looking at this image it seems like the next process to where I am at. As it is, the documentation (https://parceljs.org/hmr.html) states that when you build the app and use it in production, there is no hmr(Hot Module Reload), but it's just for the convenience of the engineer that it's there.

Alt Text

So I went up the page and saw that I need to make a file named postcss.config.js and set

{
  "modules": true
}

Did that, didn't work. * Sigh *

Check this out for more info

I can only assume that Parcel people(what I refer to the maintainers), want to keep as much payload away from the dist as possible. So they don't wanna include an out of box solution. Maybe, just an assumption.

But anyway, how it did work was that I had to make a .postcssrc file at the root folder and add the above content to it.

Don't forget to restart the server though. I got stuck at this step for a minute.

It works!

Alt Text

The extra characters are just hashes, I'd assume.

Hopefully, this was helpful and helps those in need of setting up modular design pattern in ParcelJS.

By the way, check out my org where you can help make some open-source awesomeness and help other devs in the process too.

Also, do check out Fave, we are hiring.

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!