Lightning CSS

some little, discussion on

I guess there there is a thread of, like, should we be using Lightning CSS

Lightning CSS is awesome because this stuff is all built in. It's all awesome because it's all built in until

Vite is awesome because it's all built in.

Yeah. So

on backed area components, First of all, I'm showing I'm excited that this is coming to browsers. It's already in Safari.

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

doesn't doesn't work super well. On your same bit about, like, people 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,

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,

Yeah.

Like, Utilizing check it on out. Oh, yeah. I went I'm actually saw some

Complaining about not being able to use stuff. That was like the premise of my talk at render completely was

was it color color not color mix because that has support for relative color syntax.

in a single browser And then you can define

Was this yeah. He says, does anybody know why support for the type argument and attribute,

is a lack of interest and then he linked to this

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,

to do a deep dive on

abandoned APIs. Yeah. Abandoned APIs.

APIs that didn't make it and then were abandoned, that were like had

of the the value of it or whatever. It's kind of interesting. I'd I'd never even seen that before.

the docs that show never shipped

actual work based on That's a good idea. Like, a whole show on And for your JavaScript as well. I was looking into it the other day and there was a 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 is awesome.

is bundling. I would love

which is pretty cool. But is it just an idea we made up and it's it's not actually all that useful? Yeah,

CSS files and JavaScript files that are needed? Like it would just crawl the entire import tree on the server easily fixed 15 oh, miss. It only hit Safari. Yeah. And yeah. That's what I was saying. That's that's the holdout.

basically the server would parse your JavaScript and CSS and figure out What? I didn't even know this was a thing.

that was trying to vendor prefixes that you don't need, which is kinda interesting because sometimes 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, 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.

server spec 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.

and then send it all in a single request,

what are the other

It's giving you access to future CSS like an e s, or percent Yeah.

Basically, And their tagline is an extremely fast CSS parser,

essentially.

It's replacing

Yeah, you can sort of think of the lightning CSS literally every server language to be able to parse Honestly, though, like,

transforming your CSS. It's giving you

Or any of these things because it's 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

a post CSS type of of deal as well. But it's basically you could think about it as the thing you you while it's great to have this in in lightning CSS,

like, prefetch tags. If you ever use Google Fonts, 6 or 7 times. You can merge multiple rules.

prefetch link 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, 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.

this Lightning CSS will in line those for you because it's nice to use imports just like using In so many cases, you can get away with text decoration I don't think I've used that all that much, but I could imagine if you had a tool that

because the way that they work is the browser downloads

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.

some CSS, and if you have an import in there, So maybe we should say this to people. Stop using border bottom for your underlines.

They give you, like, a little reinstantiate all the CSS. I don't know. Yeah. Well, if it's fast enough, maybe like it says it is 4.16 that that's all that people talk about, which is or preload link that you put in your head. And what that does is it tells the browser as soon as you parse

yeah, I know all of those those words, those typography, layers have been around in Chrome since,

text decoration thickness, text decoration

it for Lightning CSS.

So you can have full control over it. And it's really cool because if you have

When underline. So, yeah, that's that's a good good use case. I think that is thing. You've probably seen BrowserList pop up in your NPM install, and it'll say, and they will ship vendor prefixes.

little ascender or descender. Is it a descender? Ascender the sender. Yeah.

I don't think it's called a monkey tail, but,

what's the word for, like, when in typography where something dips below

underline.

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

Yeah. Right. Alright. Let's talk about color functions real quick. The relative color function where you can take in 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 too. Because that's the weird thing about Vite is that, can I use Dashlight is outdated?

I've learned to let it go because I guess it's good for the algorithm

like, 10 years ago, and they're, like, going through a strike through, the browser knows to stop the uses a lot of the stuff that we use post CSS for.

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.

Nobody uses Opera anymore,

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,

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,

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

this new nesting syntax. So we need to transpile that to the equivalent.

browsers, it uses browser list just like every other

these browsers support these things. We don't need to transpile or compile or polyfill them, but a hex code headless, which he is Devin on CSS and JavaScript, which is a bit odd. So

I guess we'll talk about that real quick is if you are supporting

they don't support

versions of these browsers, 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 whining about browser support in the comments. But just like, come on, folks.

post CSS or something where it says I support the last 2

very vibrant colors. There's these new color spaces that

or provide fallbacks for it. So the big one is the

new CSS color spaces, Lightning CSS sort of just comes batteries included with all of the stuff

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

they can't thickness.

hex codes, RGB, HSL, 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 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 So this will allow you to to do the Yeah. Set the thickness of a 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

but never implemented by any browser,

You don't see that happen very often more. Maybe because they do a lot more

APIs are approved Is significant. So, nice

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 the attribute in the So the attribute function in CSS, there was a a second property which should have been, like, the type Parcel compared to Webpack, if I was gonna be spinning up anything that was non meteor project at that time, 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,

just based on, The caveats really make it, like, unfortunately, pretty useless.

you are essentially

Right? But this thing to be more

to minify Bootstrap, which is 10,000 lines.

in Wasm, couldn't you? Right? most of your post CSS stuff. And I guess the benefit to that is There's kind of a short list of vendor prefixes that you need

milliseconds Other things here is vendor prefixing. It removes 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,

So maybe the solution

in RGB value can be We had Adam Argo to come on to talk about that. So I'm curious if

Okay.

a and everybody is complaining. Everything

and minifier.

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

bundler, 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.

transformer, the like, available as a plug in in Vee. I saw some discussion about, like, VeeT shipping. I saw that,

and immediately be refreshed in the browser, 300 milliseconds versus often using something like Babble or

and you want that to compile

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,

10, 15, 20 milliseconds Amount of people on Safari, that drives me crazy you wanna change something. You know? And what's happening there is that you're It wouldn't do that because that's not approved in the spec just yet.

pretty excited about that. Well, and speed often equates to, you know, lack of,

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

And now he's been building this Lightning CSS, which is Yeah. I guess so. It's kind of interesting.

replaces or

tool that

like,

You are importing some CSS from, like, a library Who's the black sheep here? Oh, it looks like a Safari on Ios.

And I still sometimes see, like,

it's been around, which is like nobody needs opera syntax

prefixes anymore, both because Opera switched to the Chrome engine, 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.

opera prefixes out in the wild, which is 11 years Yeah.

added set of plugins

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 color,

the same selector 6 or 7 times, like some sort of build tool or like a GUI

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

not selector.

All the different color spaces, tech decoration quite honestly, I think this will probably be the 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

all of the future CSS functions that we have nesting, Devin, the lead dev of Parcel.

But tech deck

text

decoration thickness

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

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.

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

is not supported in Safari

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

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

that media query range, 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,

range syntax override other CSS 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.

since version 63

very good support. It's been around in fire Firefox, 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

has, like, Be like, yep. Works.

a Firefox. Oh, man. That was It was released in 2018.

because you can't just you can't just nest the paragraph because of some limitations. However, that is going to change.

You have to say ampersand space p And that's kind of frustrating. There is post CSS preset ENV, but you do have to configure it and whatnot. And

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

a stroke, like an underline, overline, line through.

soft skill, web development, the hastiest, the craziest, the tastiest this web development treats coming in hot. Here is Wes, Barracuda,

Boss, and Scott

Welcome to Syntax.

key.

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflow, breakdancing,

Head on over to syntax.fm Firefox

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.

package. Okay. Cool. Space. Space.

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,

transpile your variables as well. But you kind of want those to be the HTML. Go get this thing because I'm going to at import it at some point. But

you.

Safari since early 2022.

one. They have really good support already. So you

wow, for, 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.

defining,

an order in which things should be layered on top of each other.

Since version 97 in Firefox. So so basically every browser got this,

So

early 2022.

They've been around in Firefox, fully supported since,

They've been around in,

Maybe it converts it to an M, though, because an M would be based off of the purpose built tool. Of course, it's built in Rust, to CSS variables not being probably shows that people don't love

always overrides the thing at the top if it has a higher specificity.

avoiding the cascade.

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 Yeah. I didn't have a place to use it, but

It's a really nice little at layer, the layer name,

and then you can then write your CSS inside of that block whatever you import this CSS file if it supports display grid, That will automatically

Meaning that If you were writing your CSS, you're used to always writing it. The thing that gets loaded at the very bottom

the new CSS stuff that you want to be able to transpile

it does that. I'm pretty sure 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,

And

part preset e and v within post CSS. Right? But then use post CSS for any nonstandard syntax? 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?

then you'd have to reach for that still.

If you're using some post CSS plug in that is like non standard, a post CSS plug in with it as well, which is something they recommend.

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 to work with your CSS to get it production ready and compatible, And because of that, well,

Now the the color stuff, I I posted a link in the show notes for oklch.com, extra features.

lines that are above the standard color space and you get into what's called the p three color space.

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 with layers,

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, 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

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.

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

But Yeah.

There is still a significant the whole spec was scrapped because that would require Chrome now supports them. If you have a monitor, like, I'm sure your iPhone supports it, and I'm sure Scott's the solution totally. Merging multiple rules. So you've got the same selector Yeah. It's actually kind of funny that 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

has had it since 2018.

You got it wrong, but that's okay.

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

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 like, February of 2022. But layers are basically a way of

that approach. It's just too much work. You know what? You know what approach really works

Interesting. There's also conditional imports which allow you to say, hey, only import this thing if it supports using the supports function, supports

meaning that you can quickly and easily keep some of your than just, 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.

callback stuff separate from your, And he was just tweeting out like, hey. Why was this abandoned?

like browser support for things that can be Everything is awesome,

if it can be transpiled, I understand when people are frustrated. Like, I did a TikTok on margin 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, you don't have to go and

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, because

I get kind of frustrated when people talk about, 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

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,

Right. There was a time when I was US.

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 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.

thickness percent.

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 Which is, a very nice headless component, sometimes

for your stack.

Lightning CSS. Like I said, it's meant to replace

live reloading.

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.

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,

It's,

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.

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.

bundling development. So a like a Dell Ultra Sharp a little monkey tail? Oh, gosh.

the actual like 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 So it doesn't matter. Who cares? Like it's it.

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 which a lot of monitors now support Devin. Literally, his name Devin is Devin modules in JavaScript. It's nice to keep stuff in separate files and then 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 syntax

meaning that it is a well, maybe not weird thing, but which is a bit odd.

is to CSS as what Esbuild and it needs a database of the supports, so it'll figure out. All right, well,

is to JavaScript, font size. Yeah, that makes sense. That would probably be better than using a straight up pixel.