Build CSS Modules Exercise

[00:00:00]
>> All right, so now your job is to do the same thing for our banner, right, which should be dynamically loaded, right, still in this case. And whatever styles you want, turn the text red, I don't care, right? The point is we wanna make a banner.module.css. And then we wanna see what happens to both the files you'd output as we build it as well as in development when we look at the network tab.

[00:00:24]
And what I would encourage you to do is try it both ways, see what the difference is. Do a little bit of science, right? What happens if I dynamically import banner? What happens if I don't? How does that change how the bundle is built? Because developing a little bit of an intuitive understanding of what different decisions in the way you structure your code.

[00:00:44]
What that does to your build process means you can spend more time about writing code in a way that ends up being performant and less time tweaking little things that you copy and paste it from stack overflow into a certain build tool.config.js. And hoping for the best and then wondering why it doesn't work, right?

[00:01:02]
Basically we follow a certain set of coding standards that are just effectively performant ways to write JavaScript. Vite will handle a lot of it for us, and we'll get it for free. So try to do it with the dynamic import of banner.js, try it without. See what happens if you make it .module.css, see what happens if you don't, right?

[00:01:23]
And we can kind of do a little bit science, like less about what I told you how it works and more about you actually with your hands on seeing how it works, cuz that's really the way it's gonna stick for you. Let's try a few things. We probably wanna make this dynamic again, and a few changes from when I was just talking in live coding.

[00:01:44]
Let me change this back to styles and call this one styles.count. Mostly cuz I have a count variable here, and I don't wanna have to think about how the hoisting rule is going to affect that. So we'll kind of keep those separate for now. And this is, I think, a pretty decent convention.

[00:01:59]
And the other thing is, to see the chunks, we're gonna just make that dynamic again, just like we had the very beginning. So we'll say in this case, if count is less than 0, we'll say import('./banner.js'). Then we've got, what was it, addBanner, yeah. Cool, and then we'll do addBanner('Below zero!').

[00:02:36]
Cool [SOUND]. And that's gotta be in parentheses. Sweet, all right, so we've got that in place, so now it's dynamic again. And then what we're gonna do is we're gonna make banner.module.css. We'll say a bannerText. I normally like kebab case, but I understand that when I go pull this into my JavaScript, it's gonna make me sad, and I'm gonna have to use square brackets and string.

[00:03:18]
So I will break my own rules in this case, and I will make it camel case. We've got that, and then we'll just say, I don't know, font color or just color: red, that seems legit. And so we'll have that in place. And then what we'll do is, just for science, we will import {banner text}, From banner.module.css.

[00:03:50]
We'll add it to the class list Maybe not how I would normally do it, but it'll work in this case. I will call container, and it will say container.classList.add(bannerText) class. And then we will go ahead and we'll put it in there as well. And again, we mostly wanna see this as, cuz the banner itself will be dynamic inside the counter.

[00:04:30]
So we should see all that load as needed, and we should see that reflect in our bundle as well. And so we should have all that in place. And let's go take a look. So I'm gonna go to that Network tab real quick. We'll just clear it in this case, and, We'll go ahead and we'll decrement it.

[00:04:54]
As you can see that, then we load the to dynamically. And if I go to run the build, All that stuff is getting broken out as needed, versus if it was all needed at the same time, you would see it all be bundled together and would all load simultaneously, right?

[00:05:14]
So how you wanna split it is basically on how you write your code and not on how you configure your build tools. Mark.
>> Do you need to add the CSS extension?
>> Where?
>> The .css.
>> I believe so. I mean, I don't like that, I don't ever wanna do that.

[00:05:29]
So we'll find out together. Yes, [LAUGH] and depending on what version of TypeScript you're using and what version of the ES module spec, you don't even need to add .js in some configurations. Not using Vite right now, but you do need to have the .css because I could see it getting confused otherwise as well.

[00:05:54]
And most likely, knowing how the plugins work, it is looking for this file extension exactly to process it. Cuz by definition, the browser and/or node, but more importantly the browser in this case, doesn't know how to import a CSS file to begin with, right? And so we've gotta do something to tell Vite that we want the CSS file and not necessarily the .js file.

[00:06:17]
Cool, so we can see that all gets dynamically loaded.