Configure PostCSS & CSS Preprocessors

[00:00:00]
>> All right, let's talk about various ways to process CSS. Watch me as I set up PostCSS. I'm done, sorry there. We're good, perfect, great talk, but let's actually configure it a little bit. So PostCSS is effectively built in, out of the box, and we get everything in there.

[00:00:26]
Now, granted, a PostCSS configuration with nothing set. It's doing stuff, it's getting us those hashes on the module and a few other things that are built in, but we could theoretically extend that any way we want. And so over on the site, we go to the PostCSS section, I do have a list of all the plugins listed, or on the site there's all the plugins that are listed that they have where you can pick whichever ones you want.

[00:00:56]
There's all sorts of stuff, whether you want polypills for current syntax for older browsers, you wanna play around with future syntax that's kinda still in the working draft phase and have support for it in that sense. There's a bunch of utilities, so on and so forth, right? For the most part, the ones that I use in the app is Tailwind CSS, Nano for just minifying it.

[00:01:18]
And autoprefixer, which will then take anytime I use one of the ones that have a dash F, Webkit, dash whatever, I can just write the regular one in a polypill all the additional classes. That's all in there for free, and so we can just go grab one of them.

[00:01:35]
It doesn't matter, you can pick. If you have a different favorite PostCSS module, that's great or PostCSS plugin, that's great, too. I'm gonna grab this one, cuz it's the one that I always end up grabbing for first of I'm just kinda doing this by hand. And then all we need to do is put a regular old postcss.config.

[00:01:57]
I'm using the type module in my package.json, so I have to do cjs. But if you're set to common.js, you can just do .js as well. It does need to be common.js, cuz PostCSS will blow up, otherwise. But you will know very quickly in this case. The way to tell is if your package.json has type module, you need to do cjs, if it doesn't, you can just do .js.

[00:02:23]
But if I change the file extension, it will blow up. And all I gotta do in this case is do the old fashioned module.exports. And to configure, And I'm gonna see because it's got the dash, I got to do this postcss-nested, and I don't need any configuration. And this is not Vite per se, this is PostCSS.

[00:02:48]
But Vite has PostCSS all wired up, ready to go. So in the same way, we don't even have a Vite config file yet, right? It has a default config. It has a default PostCSS config. It's only if I have special opinions that I need to overwrite anything. We've done zero configuration so far.

[00:03:06]
All we've done really is write some JavaScript with a few nods towards relative paths. And just using modern web technologies, and the rest has happened for us, this is the first piece of configuration we've even had to do so far. And that will load in PostCSS, so now I can do something, I don't know.

[00:03:29]
I'm gonna make just another CSS file real quick. We'll call it postcss.css. This is just a different file, so I can show you. So I can do something like button, and I can do color is rebeccapurple, and then you can do that nested syntax. And then where you can do and then hover.

[00:03:51]
We'll say that, let's do the background color. It'll be easier to see. Background color is rebeccapurple and on hover. Does anyone have a favorite CSS color? Cuz otherwise we're picking blanched almond, all right? This is why I'm an engineer and this is why we had to hire a designer six months after I started, because when I got to make design decisions, they were bad, right?

[00:04:20]
Cool, so we've got that and now really let's go take out our very pretty styles that we had. We've got that one there. I don't even remember, I've moved stuff around so much. I'm trying to remember where I even put the other ones. Let's see what we got.

[00:04:46]
What does it look like right now? We've got no CSS, it's perfect. All right, we've just got our modules from before, so now what we'll do is we'll just pull in this PostCSS file here. And you'll see that I could write syntax that wasn't necessarily valid JavaScript. There is a working spec for that nested syntax.

[00:05:06]
It's somewhat supported in the browsers, but for our purposes. Let's just say it's not. Actually, let's do it in, just to make my point, let's do it in counter. We'll just pull in. Postcss.css, and I could have named that file anything. And you can see that rebeccapurple, and now I hover over them.

[00:05:37]
And if we look at the sources in this case, we find that file, you can see that. In this case, it transpired it but we are getting the hover classes you can kinda see in there as well. It's actually going to just add everything for us. And that syntax is now supported just by having that PostCSS plugin.

[00:05:55]
That's all we had to do is like, really, we didn't even need to configure PostCSS until we wanted to add a plugin, and out of the box, you will get all of that. Generally speaking these days, I don't tend to use SASS or SCSS too much anymore. Most of what I ever wanted out of SASS or SCSS was either that nested syntax and/or CSS variables.

[00:06:23]
I have both, or I at least have one because I have PostCSS built in. And I can get the nested syntax while I wait for the working draft to get into the browsers fully. But let's say hypothetically, you're migrating to Vite, you've got a whole bunch of SASS or SCSS and you just wanna use, right?

[00:06:42]
So let's see what's involved in that. Let's just make another file, we'll say it's sassy.sass. It doesn't even really matter what I write in here. And we'll go ahead and we'll just pull that in somewhere as well, cuz things are gonna blow up for me. sassy.sass, It should be blown up.

[00:07:16]
All right, processor dependency, sass not found. Did you install it? Try npm install -D sass. Because there's literally no concept of SASS in this entire app whatsoever. So I'm like, that seems legit, let's do that. All right, let's see. Let's go back. I think I probably have to kill the server.

[00:07:40]
All right, so my syntax is a little messed up. And I think I've really wanted SCSS in this case, cuz it's been a long time since I've written actual SASS. Cool, now we go back. And so you can see at least loads, right? I didn't really do much styling in this case, I can go ahead and do it if I really wanted to.

[00:08:10]
But all we had to do to support SASS was just simply install SASS in our project. Again, in our kind of talks from before, it's working, it's all in place. All right, I didn't have to configure anything. I didn't have to add a SASS loader. I just needed the idea of SASS at all installed in my app.

[00:08:26]
So if you were migrating an app and you already have SASS, guess what? Again, just like the PostCSS, just like everything else, out of the box, done for you, configured, ready to rock and roll, right? This is kind of like, it's simple and easy to get started and you're not spending a whole bunch of time configuring stuff and you can just kind of pull stuff in and use it out of the box without thinking.

[00:08:47]
I think it's really great for when you're starting a new project. It's always like, I come with a lot of hopes and dreams of what this thing is gonna be, and I spend three days trying to configure a build process so I can actually use anything. And then I lose all steam for whatever I want it to do.

[00:09:02]
Having a lot of this have been easy to kinda get your setup in place. Again, we still have not written a Vite config file at all, whatsoever. We've had to make sure SASS was there, right? If we wanted a particular plugin, we've had to put that in place.

[00:09:15]
But out of the box, we've had a lot of the common table stakes for building applications just built in and ready to go for us.