Lightning CSS

Welcome to Syntax.

On this Monday, hasty treat, we're gonna be talking about lightning CSS which if you haven't heard of it, it's a great new project and it's been around for maybe about a year and a bit, from the creator of Parcel. So So we're gonna be talking all about what lightning CSS is, why you should be paying attention to it, and if you should give it a try. My name is Scott Talinski. I'm a developer from Denver.

And with me, as always, is Wes Bos. Wes, what's up, my man? Hey. Not too much. Pretty stoked to talk about Lightning CSS.

It's, I think, a new tool that a lot of us are going to be using. So we're going to explain all about what it is today and Why you might wanna opt in to using this. So, yeah. Let's get started. The lightning CSS is lightning css.dev

And their tagline is an extremely fast CSS parser, transformer, bundler, and minifier.

Basically, It's replacing a lot of your tool chain around CSS if you have 1. If you're the type of person who's using Sass or maybe post CSS Or any of these things because it's transforming your CSS. It's giving you extra features.

It's giving you access to future CSS like an e s, or a post CSS type of of deal as well. But it's basically you could think about it as the thing to work with your CSS to get it production ready and compatible, essentially.

Yeah, you can sort of think of the lightning CSS is to CSS as what Esbuild is to JavaScript, meaning that it is a purpose built tool. Of course, it's built in Rust, and it's used to, like you said, parse your CSS. We're going to go through all of the sort of benefits of it. So it's built by Devin, the lead dev of Parcel.

And honestly, I don't think he gets enough credit in our space because a lot of, like, the parcel stuff was way ahead of any of the Vite stuff or any of that stuff that sort of came out. I've been a big parcel fan forever.

And now he's been building this Lightning CSS, which is quite honestly, I think this will probably be the tool that replaces or uses a lot of the stuff that we use post CSS for.

So it's pretty excited. I actually have talked to him about coming on the show at some point, so I'm excited to have him on as well. Yeah. That would be that would be sick. Yeah. The parcel was one of those tools for me that because I was using Meteor,

Yeah. I didn't have a place to use it, but Parcel compared to Webpack, if I was gonna be spinning up anything that was non meteor project at that time, Is gonna be Parcel all day, and still even now Parcel is is so fast to get up and running with. Now I'm I'm probably using Vite for stuff, but Parcel is just One of those ones that actually paid attention to the developer experience long before people were talking a lot about developer experience.

Lightning CSS. Like I said, it's meant to replace most of your post CSS stuff. And I guess the benefit to that is you don't have to go and get plugins for absolutely everything. That's always been one of the downsides. We talked about that on the SaaS versus native CSS is that you do have to, like, go and build a little set of plugins for your stack.

And that's kind of frustrating. There is post CSS preset ENV, but you do have to configure it and whatnot. And Lightning CSS sort of just comes batteries included with all of the stuff that you would want, and it sort of just works right out the gate. It's smoking fast, which is kind of what you want when you're doing live reloading.

The speed to me doesn't really matter that much when you're doing, like, build times because who cares if it's 300 milliseconds versus 20 milliseconds. But it does matter when you are doing dev and you hit the save key and you want that to compile and immediately be refreshed in the browser, 300 milliseconds versus 10, 15, 20 milliseconds Is significant. So, pretty excited about that. Well, and speed often equates to, you know, lack of,

Use of your own internal computer resources as well. So you'd have to imagine that if something is faster in this regard, it would probably be more efficient your computer,

right? Absolutely. So let's talk about what are the different pieces of it. I think probably the thing that we're most interested in is all of the future CSS or the new CSS stuff that you want to be able to transpile or provide fallbacks for it. So the big one is the new CSS color spaces, which a lot of monitors now support very vibrant colors. There's these new color spaces that hex codes, RGB, HSL, they can't I guess there's not enough colors, right? So these new color spaces will allow you to have these, like, really vibrant colors that you just couldn't do before, and Chrome now supports them. If you have a monitor, like, I'm sure your iPhone supports it, and I'm sure Scott's nice Apple display supports it. Your MacBook supports as well. Oh, yeah. My MacBook, I'm probably like, I have a like a Dell Ultra Sharp That is, like, really nice. My main monitor is like an LG, and it's it's pretty nice, like, pretty good. But, like, man, when I bring stuff over to the Dell, It's like a 28 inch 4 k. It just looks so good, and I'm I'm kind of ruined. It's the same thing with same thing has happened with audio and video and all of this stuff where, like, I didn't necessarily care about any of this stuff, but as soon as you see something good,

you're ruined for life. It's like it's like when you first went to HD.

Now the the color stuff, I I posted a link in the show notes for oklch.com, which it which will definitely visualize for you just how much better the colors are. And if you drag your cursor to any of the lines that are above the standard color space and you get into what's called the p three color space.

It'll show you what the p three color looks like verse the fallback, And you can see side by side exactly just how much more vivid these colors are. I tried to do this demo during my talk at render, and The projector did not sport support p three. Of course. So I was like, of course. Oh, yeah. I thought why didn't I think about that? The so this is one of those rare features that's not only like a hardware support thing as well as a browser support thing. But a lot of the browsers do support this stuff now, so that's neat. Next up is CSS nesting, which, is such a a feature that, you know, we've had for, I don't know, a long time I've been using since, like, 2011 in in Sass and other CSS preprocessors. You can do it in post CSS, but we're getting it natively in the browser.

And because of that, well, lightning CSS has that available to you here to use the straight up new nesting syntax without having to even think about it. So, I mean, you you drop in lightning into your your workflow and then bingo bango. You can just nest away. Yeah. The the one thing it doesn't say is the,

You know, the weird part we talked about when we talked about nesting, which is if you have an element selector and you're trying to nest it like, let's say you want to select all paragraphs inside of a dot card.

You have to say ampersand space p because you can't just you can't just nest the paragraph because of some limitations. However, that is going to change.

We had Adam Argo to come on to talk about that. So I'm curious if it does that. I'm pretty sure It wouldn't do that because that's not approved in the spec just yet.

And the Lightning CSS just seems like everything that's been approved. And apparently, you can also get I guess you could write a plug in for it, or you could just use a post CSS plug in with it as well, which is something they recommend.

If you're using some post CSS plug in that is like non standard, then you'd have to reach for that still.

Yeah. And that's a good point is that you can use the post CSS on top of this if you're looking for, like, more configurability and stuff. Like, you could use this essentially in place of part preset e and v within post CSS. Right? But then use post CSS for any nonstandard syntax?

Yeah. I guess so. It's kind of interesting.

I guess we'll talk about that real quick is if you are supporting browsers, it uses browser list just like every other thing. You've probably seen BrowserList pop up in your NPM install, and it'll say, can I use Dashlight is outdated? And what's happening there is that you're often using something like Babble or post CSS or something where it says I support the last 2 versions of these browsers, and it needs a database of the supports, so it'll figure out. All right, well, these browsers support these things. We don't need to transpile or compile or polyfill them, but they don't support this new nesting syntax. So we need to transpile that to the equivalent.

Other things here is vendor prefixing. It removes vendor prefixes that you don't need, which is kinda interesting because sometimes You are importing some CSS from, like, a library and they will ship vendor prefixes.

And I still sometimes see, like, opera prefixes out in the wild, which is 11 years it's been around, which is like nobody needs opera syntax prefixes anymore, both because Opera switched to the Chrome engine,

like,

like, 10 years ago, and Nobody uses Opera anymore, so it's not necessary. So it's kind of interesting that it will remove unnecessary vendor prefixes and add the ones in that are necessary.

There's kind of a short list of vendor prefixes that you need

any longer, but there's a few few still there. Yeah. It also does custom media queries, which is something that I really like. You define it at custom hyphen media, then you give your media query a name. It's basically like a CSS variable full for media queries.

These are really great because it you know, I I would imagine on on their end, it's just a string replace or something like that. So, this is a feature I've been using myself with post CSS, but happy to see it it exists in this as well. Yeah. Like, the media query range where you can say It's between. Oh, well, Range is fully supported, but you would be, I guess, coding for a fallback at this point. Yeah. Yeah. You would convert it back to For older browsers. Yeah. But did you know sorry. Before before we move on from media query range, did you know, that media query range, range syntax has, like, very good support. It's been around in fire Firefox, since version 63 a Firefox. Oh, man. That was It was released in 2018.

So range syntax is one of those things you you didn't think about it because it didn't get added to Safari until 16/4, which was 2023.

But Yeah.

Firefox has had it since 2018.

Wow. And So it's at 80% global usage, so probably not something you should you probably still have to transpile it. That's why we use Yeah. Because you just write it this way and then you don't think about it. Yeah. Exactly. It's one of those beautiful features that can be transpiled beautifully. I'm just trying to, like, look. Who's the Who's the black sheep here? Oh, it looks like a Safari on Ios.

There is still a significant Amount of people on Safari, 15 oh, miss. It only hit Safari. Yeah. And yeah. That's what I was saying. That's that's the holdout.

So it doesn't matter. Who cares? Like it's it.

I get kind of frustrated when people talk about, like browser support for things that can be easily fixed because if it can be transpiled, I understand when people are frustrated. Like, I did a TikTok on margin trim. And I very clearly showed the browser the browser support. And I said it's coming to CSS. And I got, like, 500 comments of people being like, this is dishonest. You're misleading people. Why would you ever show this? And it's like, First of all, I'm showing I'm excited that this is coming to browsers. It's already in Safari.

And second of all, I don't even know my second of all. Don't use it. I told you.

Oh my god. Because, like, margin trim, that you can't polyfill that. I understand. Like, you you gotta sit on your hands and wait until it can be in all the browsers, same with CSS has. But for things like the media query syntax,

it can. Yeah. And now there there's a like, I I'm really bummed out because they released a transform for post CSS for, was it color color not color mix because that has support for relative color syntax.

Yeah.

Like, The caveats really make it, like, unfortunately, pretty useless.

It's like, oh, yeah. You can transform this, but if you use a variable Within the the relative color, the whole thing breaks. And I get why because it needs to do it statically. But Yeah. It's like, well, That's kind of the whole point of that syntax is to be able to, you know, write things that change a thing that change a thing. So Yeah. It's a bit of a bummer because, like, the relative I guess you can calculate it at build time, but if you want it to be dynamic, you can't. And lightning CSS, I should say, does the exact same thing. So lightning CSS has that same support For that Mhmm. That same same bit. It just, doesn't doesn't work super well. On your same bit about, like, people Complaining about not being able to use stuff. That was like the premise of my talk at render completely was it was that was how I started off My top is basically saying anytime you post anything new about CSS, everybody just grumps about not being able to use it yet. Yeah. Well, here's the stuff you can use, and here's the stuff you can't use. You know?

And, also, like, everything is amazing. CSS is freaking getting so many amazing things.

Everything is awesome, and everybody is complaining. Everything is awesome.

Honestly, though, like, that drives me crazy that that's all that people talk about, which is I've learned to let it go because I guess it's good for the algorithm where people are just whining about browser support in the comments. But just like, come on, folks.

Yeah. Right. Alright. Let's talk about color functions real quick. The relative color function where you can take in a hex code

and out the other end. That's what I was just talking about too.

It it doesn't work with variables, which is the bummer. Yeah. So you can't necessarily go ham on one just yet. No, unless you were to also

transpile your variables as well. But you kind of want those to be

you.

Yeah. Yeah. Yeah. Well, eventually, we'll we'll get it in there. It does that. Next up, we have CSS modules. I've Never been a big fan of CSS modules. The idea with CSS modules is you write your syntax in a file And then you import that from the CSS file and it gives you like a class name out the other end and then apply that class name to your div.

Never stuff for me. No. And it's it's funny that I think it's very clear that it it's not like, a lot of people like it, but it was the default In both Next. Js and Gatsby.

And it just, like, never it never caught on. And if the fact that something is the default in Next. Js And never got massive adoption probably shows that people don't love

that approach. It's just too much work. You know what? You know what approach really works Is, the single file component style where you just write your CSS in the same file and then it scopes it to that file. Exactly. So you have to write or import anything? Yep. Vue and Svelte got it. I think, single file React components would make me happy. But, next up, we have a bundle and minifying. It will inline your imports. So it's kind of assumed that you shouldn't use imports in your CSS

because the way that they work is the browser downloads some CSS, and if you have an import in there, it has to download it, parse it, and then it goes, oh, shoot, you need something else. So it goes and gets that one.

And then it says, oh, shoot, I need something else. And the way around that is you can put, like, prefetch tags. If you ever use Google Fonts, They give you, like, a little prefetch link or preload link that you put in your head. And what that does is it tells the browser as soon as you parse the HTML. Go get this thing because I'm going to at import it at some point. But this Lightning CSS will in line those for you because it's nice to use imports just like using modules in JavaScript. It's nice to keep stuff in separate files and then

import it as you need it. And it's obnoxious to to deal with the fact that yeah. I I feel like this is one of those features that kinda feels like.

I know there there's an already existing CSS import, which is probably why that it doesn't work the way you'd want it to be. Not not to mention you probably have to Inline it anyways, but yeah. So I don't know. Yeah. This is the exact reason why you'd wanna use a a minification bundler for something like CSS.

And for your JavaScript as well. I was looking into it the other day and there was a server spec that was trying to basically the server would parse your JavaScript and CSS and figure out what are the other CSS files and JavaScript files that are needed? Like it would just crawl the entire import tree on the server and then send it all in a single request, which is pretty cool. But the whole spec was scrapped because that would require literally every server language to be able to parse CSS and JavaScript, which is a bit odd. So the solution

is bundling. I would love to do a deep dive on APIs that didn't make it and then were abandoned, that were like had

actual work based on That's a good idea. Like, a whole show on

abandoned APIs. Yeah. Abandoned APIs.

You know, I just saw another the reason why I even bring that up is because Jonathan Neill posted about some API using an attribute function in CSS, And he was just tweeting out like, hey. Why was this abandoned? Was this yeah. He says, does anybody know why support for the type argument and attribute, never shipped in a single browser is a lack of interest and then he linked to this the docs that show the attribute in the So the attribute function in CSS, there was a a second property which should have been, like, the type of the the value of it or whatever. It's kind of interesting. I'd I'd never even seen that before.

Yeah. It's actually kind of funny that sometimes APIs are approved but never implemented by any browser, which is a bit odd.

You don't see that happen very often more. Maybe because they do a lot more field work. That's why I think Chrome ships stuff behind flags as early as possible, because Then you can actually see our people actually using this type of thing or is it just an idea we made up and it's it's not actually all that useful? Yeah,

Interesting. There's also conditional imports which allow you to say, hey, only import this thing if it supports using the supports function, supports whatever you import this CSS file if it supports display grid, meaning that you can quickly and easily keep some of your callback stuff separate from your,

experimental stuff. Yeah. I I don't think that it conditionally imports it.

But is that I think it probably wraps the code in a media query. It in the ad support. Yeah, exactly. So you don't have to wrap your code. It's pretty cool. I've never seen that syntax before.

Is that because it's standard all statically, you know, at a time? Yeah. I was wondering, like, what about lightning CSS? So it's rust. You could theoretically just run it in a in Wasm, couldn't you? Right? So maybe the solution to CSS variables not being working is you just recompile it whenever variable changes. That's probably a really bad idea, but it maybe could work. Yeah. What is it? The browser will then have to, like, reparts and reinstantiate all the CSS. I don't know. Yeah. Well, if it's fast enough, maybe like it says it is 4.16 milliseconds to minify Bootstrap, which is 10,000 lines.

Okay.

I don't know. There's they're probably not a good idea. There's probably a reason why we didn't we're not doing that. Terrible idea, but it's probably one of those things you could put together a Wow demo on and just have it Yeah. Work in a really small use case.

Be like, yep. Works.

I wanna ask you to explain this one is it also supports CSS layers. You've explained it a few times. Do you wanna give that our shot? Yeah. CSS layers are sweet because,

one. They have really good support already. So you you you while it's great to have this in in lightning CSS, layers have been around in Chrome since, early 2022.

They've been around in, Safari since early 2022.

They've been around in Firefox, fully supported since, wow, for, Since version 97 in Firefox. So so basically every browser got this, like, February of 2022. But layers are basically a way of defining, an order in which things should be layered on top of each other.

So It's a really nice little at layer, the layer name, and then you can then write your CSS inside of that block And then you can define the stacking order of the layers. So I have my base CSS goes first, Then my theme CSS, then my, current theme, and then my overrides in my utilities kind of stuff. And these layers will then sit on top of each other essentially avoiding the cascade.

Meaning that If you were writing your CSS, you're used to always writing it. The thing that gets loaded at the very bottom always overrides the thing at the top if it has a higher specificity.

Right? But with layers, you are essentially putting these CSS into into groups and saying this layer always sits on top of this layer, always sits on top of this layer. Meaning that you can write CSS That will automatically override other CSS just based on, basically taking it out of the context of where you authored it and putting it more into a control. So it doesn't matter as much where you author it if it's in a layer. That's beautiful. That's really nice. You don't have worry about the order. Or I'm assuming, like, if you have, like, a weird

specificity selector, you don't have to sweat about that.

You got it wrong, but that's okay.

Right. There was a time when I was US.

I just can't do it.

My son's going to get there before

you. Your wife told me I might be dyslexic, so I now have a reason for that. Yeah, totally. Merging multiple rules. So you've got the same selector 6 or 7 times. You can merge multiple rules.

I don't think I've used that all that much, but I could imagine if you had a tool that added the same selector 6 or 7 times, like some sort of build tool or like a GUI for a client. You could just merge all of that. It. It unifies colors, which is wild to me. So, like, if it's like, oh, well, this RGB value can be expressed as a 3 digit. Three digit. Yeah. Heck, yes. Go for it. It's going to make your CSS bundle smaller at some point. And then there's like, I just have a huge list here. I'm not going to go through literally everything, but all of the future CSS functions that we have nesting, not selector.

All the different color spaces, tech decoration thickness percent.

I don't even what the Does this thing got Tektex? Is that what you're saying? Tektex decoration

thickness.

What? I didn't even know this was a thing.

So this will allow you to to do the Yeah. Set the thickness of a a stroke, like an underline, overline, line through.

That's sweet. That's neat because we always use border bottom for that, and border bottom has so many problems when you get into multiline anything.

You know what? This actually has so it's funny that the this allows you text decoration.

I didn't realize this, but text decoration thickness has really good support.

But tech deck text decoration thickness percent is not supported in Safari still or Safari Ios. So that's why this exists. So you convert it to pixel? Yeah. Without percent, and it will work fine. But now you, Yeah. Now you can do with percentage and not even think about it. I I guess I I don't know what the benefit of doing a percentage is other than that you don't have to have it. I guess it scales with your text. That way that makes sense.

Yeah.

Maybe it converts it to an M, though, because an M would be based off of the font size. Yeah, that makes sense. That would probably be better than using a straight up pixel.

So maybe we should say this to people. Stop using border bottom for your underlines.

In so many cases, you can get away with text decoration color, text decoration thickness, text decoration underline.

So you can have full control over it. And it's really cool because if you have what's the word for, like, when in typography where something dips below a little monkey tail? Oh, gosh.

Yeah.

I don't think it's called a monkey tail, but, yeah, I know all of those those words, those typography, little ascender or descender. Is it a descender? Ascender the sender. Yeah.

When they're, like, going through a strike through, the browser knows to stop the underline. So, yeah, that's that's a good good use case. I think that is it for Lightning CSS.

Check it out. You can use it with Beat, Parcel, Webpack, whatever your existing stack is.

It might give you a little bit of a perf boost both in terms of your actual end load times. Maybe you get a smaller file at the end of the day, as well as the actual like bundling development. So

check it on out. Oh, yeah. I went I'm actually saw some some little, discussion on Utilizing this thing to be more than just, like, available as a plug in in Vee. I saw some discussion about, like, VeeT shipping. I saw that,

too. Because that's the weird thing about Vite is that, well, maybe not weird thing, but Vite is awesome because it's all built in.

Lightning CSS is awesome because this stuff is all built in. It's all awesome because it's all built in until you wanna change something. You know? Yeah. So I guess there there is a thread of, like, should we be using Lightning CSS in Vite to make it even faster? Maybe. Yeah. Maybe at some point, We'll be sure to let you know. You'll hear it here first. We gotta get Devin on the show, though, ASAP because I'm really interested in picking his brain. Yeah. Last time I asked him, he said he's like, I'm a bit busy right now, but I'd love to come on in a bit. Maybe it was because he was cranking on Lightning CSS. And the show we are recording right after this is on headless, which he is Devin on Devin. Literally, his name Devin is Devin on backed area components, Which is, a very nice headless component,

package. Okay. Cool. Space. Space.

Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.