00:00 To get this global CSS file included onto the page, we're actually already importing it. We're doing what is called a side effect import. What that means is we're not actually using any of the values that are being exported by this particular file. In the case of CSS, CSS doesn't actually export anything.

00:18 Remix is adding some special meaning to these CSS imports. In fact, you can't technically import CSS files anyway. So there's a little bit of magic going on here as well as here. But there's some different magic going on here where Remix will say, oh, okay, you want to have this CSS file applied to the page.

00:36 So I'm going to bundle that for you and I'm going to stick it in this special file and then you can link to that special file the way that you link to everything else. The way that you do that is with this CSS bundle href. So we're going to import CSS bundle href from, and this is Remix run CSS bundle.

00:55 With that, you treat it like a regular href. So we go here, add our href right here. This is not going to be super happy about that. We'll talk about that here in a second. But with that, we hit ''Save'' and now we get that. Oh my gosh. Yes, this is one of my favorite things to do.

01:15 You're welcome. Yes, we just got Rickrolled by Kelly the coworker. Thanks a lot, Kelly. So yes, what's happening here is we dive into this. We've got a background image. That's the URL pointing to the Rickroll on Giphy. So we're not actually going to keep this in our application.

01:33 It was just there to make sure that we got things correct. But yes, and in fact, it's annoying, so I'm going to get rid of it for right now. But yes, that's the basic idea of how you get the side effect imports onto the page.

01:51 This actually also applies to CSS modules and Vanilla Extract as well. If you're not familiar with those tools, I personally don't really actually recommend using them. Most of the time there are use cases for them sometimes, but we're not going to dive into them because you get so much mileage out of Tailwind

02:08 that I don't find myself reaching for those tools. But if you want to, I've got links that you can go read about what Vanilla Extract and CSS modules are. They do have their place in some situations. But you would use this exact same mechanism with the CSS bundle href to get

02:27 the CSS from those tools applied to the page as well. So let's talk about this TypeScript error here really quick before we wrap up. What this is complaining about is it's saying, hey, this links function is supposed to return an array of objects that have these properties.

02:44 One of these has a rel style sheet with an href that is assigned to a string or undefined, but it's actually only supposed to be string. You can't have an undefined href. If we hover over this, we'll see, yes, it is indeed string or undefined. Now, you might think, well, why doesn't Remix run CSS bundle get its act

03:02 together and make it so that this is only ever a string? The reason is because we don't have any CSS imports, so we don't have any CSS to stick in that bundle. So you'll notice right here we have our link rel style sheet and then no href. This is very intentional because we don't

03:20 want to load an empty style sheet, that would be wasteful. Instead, what we should do is just conditionally specify this CSS bundle href link so that there is no link when there is no CSS to bundle. Now, most of the time if you add this, you're probably adding it for something specific,

03:39 and most of the time it will have something bundled. But let's say that you set it up today and then somebody in the future decides, oh, we can get rid of all that stuff, and now you no longer have it. It will be nice to have things set up in here so that it automatically gets rid of that link for us, so we don't have to load anything that's not

03:57 supposed to or that's empty or doesn't exist. So I'm glad that Remix has done it the way that they did. Let's make it so that TypeScript doesn't mad at us about this. I will often say that TypeScript doesn't make your life any worse or bad, it just shows you how bad your life already is. That is the case right here.

04:17 What we're going to do is we'll say CSS bundle href. If that exists, then we can go ahead and provide this. Otherwise, we'll say null. TypeScript is still not happy about this, but our application is. Well, no, just kidding. It's super duper not, but it should

04:34 be because it should just filter this out for us. But we're going to filter it. We'll say filter, we can say link, and then so long as the link is not equal to null. I actually have a special way to do this that TypeScript will understand better, and I personally prefer, and that is to say Boolean.

04:54 We pass it to the Boolean constructor, and if it's truthy, so it actually does exist, then it will return true. Then if it's falsy, like if it's null in this case, then it will return false and be filtered out. So now TypeScript is happy about it, and our application for real this time is happy about this as well. So we can look at our head and we'll see we have

05:14 our favicon, we have our style sheet for our font, and then our style sheet for Tailwind, and we don't have the style sheet for the bundle. But if we now import something, we do this side effect import of CSS, now the CSS bundle href will exist, and we'll get that added to our page.

05:34 So we can add these side effect imports from third-party libraries or whatever, but we can also add CSS modules or vanilla extract as well. Half of me really wants to keep this rick roll, but I think we probably better get rid of it. So that's how you bundle CSS in a Remix application

05:53 as you bring up the CSS bundle href and add that to your page, making sure to take care of the situation where that href is undefined. And then you can import side effects imports of CSS.