Hasty Treat - Stylelint for Linting CSS

Welcome to Syntax.

In this Monday, hasty treat. We're gonna be talking about StyleLint, which is a really sick linting system for your CSS, And it's going to allow you to have custom rules so that your CSS, well, it can be as good as possible even if you have a 100 people writing it. My name is Scott Pulinski. I'm a full stack developer from Denver, Colorado. And with me, as always, is Wes Boss.

Hey.

I am ready to rock. We're recording this on a Thursday as we're trying to squeak in a couple extra episodes.

Recording on a Thursday,

and I've

have had a lot of coffee. So I'm, about to have a lot of coffee. I have my, my cold brew here sitting ready to go.

We also have a couple sponsors ready to go. Those sponsors are Sanity and Sentry. Now Sentry is the perfect place to see all of your errors and exceptions happen and keep track of them, catalog them, log them, and even get performance metrics Along with a user misery score. Now Sentry is the perfect tool for this type of thing.

They have been battle tested and Proven it has been around for so long, and we've been using it personally for a very long time here and have been absolutely nothing but endlessly satisfied with, Century, their service and the improvement that keep coming down the line. So if you wanna check out Century, head on over to century.io.

Use the coupon code Tasty treat, all lowercase, all one word, and you'll get 2 months for free when signing up. And trust me, you you wanna just toss this on your site, toss this on your Your API tosses on your front end, whatever. Watch the errors come in because let's face it. We all know that, the code you're writing isn't perfect That's who's this, really.

And catalog can get get going with those errors today at century.i0.

We are also sponsored by Sanity.

Sanity's structured content CMS. You've heard me talk about them a 100 times. I'm gonna focus on something different this time, which is you can use Sanity for ecommerce. You can use it for a mobile app. We've talked about using it for websites and apps and stuff like that, but you can also if you're running an ecommerce website, you can use Sanity to do that Because at the end of the day, it's a bunch of APIs where you can push and pull data into Sanity and make a really cool editing experience. So If you go to Sanity dot I o, you can go to their solutions tab and click on ecommerce, and they have, like, a really cool case study That shows how somebody built a pretty wicked ecommerce website using Sanity as a back end. So check it out. Make sure you use Sanity dot I o forward slash syntax when you're building your next little project. That's gonna get you double the free usage tier. Thank You, Sanity, for sponsoring Syntax.

Alright. Let's get into it. We are gonna be talking about StyleLint, And this is not something that I have integrated into a project before. I might have used it just as, like, In some other existing projects, but it definitely is something that has piqued my interest since you've been talking about it. So, what is it? Why do we need it, Scott? Yeah. So StyleLint,

it kinda is exactly like what the name would suggest if you've used any other linting tools. And a linting tool is typically something that lets You know, whatever you're doing is not good or could be better.

And we we often use something called I mean, before it was Was it JSLint and then JSHint, and then now we're on ESLint is the the one that everybody uses for just about everything. And ESLint does a good job of letting us know when our JavaScript isn't up to snuff and we need to adjust it in much more of a way that is not like formatting specifically, but potentially errors or issues.

So style int, really, it kinda fills that same void for CSS.

And it works with all the stuff you know and love like Sass or any of that stuff. I mean, we use it even in line our our, Svelte components CSS, and it works totally fine with no issues. So what is this thing? It's basically a modern, mighty linter for CSS. K? It lets you know if your CSS is following the guidelines or not.

So what do you need to get started with Stylent? Well, it's really easy. You install the darn thing, and then you create a style Lint RC file just like an e s Lint RC file. And the docs I mean, the docs are are pretty clear on this, but you can have it be any number of ways. We just do dot style lintrc, The same way you would do, like, an e s lindrc file.

And that that's it's been pretty fine for us.

Duck a little bit for Versus Code to play. Well, to be honest, we had to install an extension for Versus Code. Then Versus Code was complaining. I had to close it and restart it a whole bunch, and eventually, it started playing nice. So it's not exactly the smoothest

Up and running experience with the Versus Code plug ins, but once you get everything up and running, it's really pretty nice. Oh, I have this installed. Maybe I have been using this. Well, you have to have the RC file or else it doesn't do anything. Oh, really? Okay. No. Yeah. Then then definitely haven't been it's it's It's a tricky thing about Versus Code is that it comes with built in Beautifier for JavaScript and for some of your CSS, And sometimes you gotta turn those off in order to use some other tools.

Yeah. It's, so okay. So by default, this thing exists. Right? For it to do anything, you need an RC file, and you need to give it some presets.

And so, like, the basic way of getting going is to say StyleLint or, I mean, in the RC file, it extends StyleLint config standard. Okay? That gives you the standard rules. And likewise, you could use the SAS guidelines as well to get the standard SAS rules as well. And from there, it works largely like ESLint or any other linting system where you can turn rules on or off or config them via this configuration.

And let me tell you, you will need to configure your rules because, I found that CSS more than JavaScript required quite a bit of, like, alright. This is how we like it, not like this is somebody else's opinion.

Yeah. But in addition, there's a ton of plug ins for this thing, and I think this might be the biggest strength of this. Besides the fact that it's a good linting system, the plug ins Ecosystem is fantastic. So in the show notes here, I linked to awesome style lint, which is a style lint repo. You know, anytime there's a a repo, there's one of these awesome somethings.

And this one gives you a whole bunch of different extensions. Unless, you might wanna paw through this just to see, like, if there's anything in particular that It fits your fancy because it is very, very cool the kind of stuff you can do here. So I thought I would give maybe a little bit of CSF. To some of the stuff that we use and why,

if that's cool with you. Yeah. Well, before you get into that, I wanna just wanna be clear or ask you a question. So this will both give you squiggles when you do something bad, but it it will also try and Format and fix your code. Right? Like, if you have weird indentation or or or extra spaces or a curly bracket on the the wrong line, it will actually Fix it for you, kinda like how ESLint does that a little bit, but Prettier does most of that for me. Yeah. And I haven't been able to get this to auto fix on save. So there's I have to run the command palette,

like, auto fix fixable things Oh. Which I think there's gotta be a way to get that going easily enough, but I have not been able to figure it out. So Anybody listening is using style and and doing that, then please tweet us out, and we will retweet you with how to get that set up because the extension doesn't do it itself, Which is a little unfortunate. There was, like, another extension that all it is is a fork of the main one, but does fix it on the safe. But I found that extension to be out out of date.

I love when people do that. Yeah. And if I love, I mean hate. Right. But Someone's like, alright. I fixed it. Now here's the

fixed version of the the plug in, and you're like, which one do I use? And now what you have is one that's out of date Because they, like, didn't keep their versions up to date, so it's like, I can't use this one anyways.

So that that was my situation with I would be interested to know what other people Managed to get going.

So, some of the cool rules that I've added to this thing is order. And, You can have an order plug in where you can choose in what's the order in which things will be reordered.

And I happen to do mine alphabetically, Which I don't know if everybody's gonna be into, but I do like alphabetical CSS property ordering. And then I have my custom properties at the top.

Other things I have in here that are are pretty interesting.

I mean, I would say that's probably the least interesting one I have. But some of the the ones that are actually interesting would be, for instance, Plug in no low performance animations.

So if somebody is trying to animate, let's say, position left Or something that's not a transform three d, perhaps. They're doing a transform even. It's going to complain at them and saying, hey. This is a low performance animation that you're attempting to do and links them to the docs on what what is a low performance animation and what's not. And I think that's the the biggest strength of this thing is The little hover over pop ups, they do give you very very relevant information as to, like, what the way forward is. If if I'm trying to, animate something and it's not working correctly or it's giving me an error. Like, what do I do instead if I'm not gonna animate this or that? Well, here's what you do instead.

I also have some rules for specifically, it's called a scale unlimited declaration strict value.

And what this one is doing is basically saying the following properties that we have in this array should not be given a Value. They should be given only a CSS variable as a value.

Meaning that if somebody is attempting to define a font size, a color, or a z index currently in our CSS. Oh, that's cool. Yeah. It's going to complain and say, hey. Use the CSS properties because we already have these defined somewhere else essentially.

So that way, it keeps people on you know, keeps everybody In the same road in terms of always utilizing the custom CSS variables that allow us to keep our design system Cohesive.

Yeah. Honestly, that's, like, the the huge benefit to linting for me is that it, like, forces Me into some sort of more rigid system Mhmm. Versus just kinda going willy nilly all over the place. And that's why people like like a lot of these utility frameworks as well because it it does force you into a bit more of a rigid system, And I think the the end product is better. And it forces your team there too. So, I mean, that's what everybody's gonna be using. It enforces, like, a standard where everybody everybody has To fit that same standard.

Some other ones that we have is, like, a max nesting depth for SaaS where you can only nest, 3 layers deep or else it complains.

So I I feel like 3 is a good number for that. I think the default is, like, 1, which I'm we had to turn it off immediately because I was just like, yeah. I'm not gonna undo 1. I'm gonna do At least 3 layers nesting here. You can even set, like, a regex pattern for your variable names, which we have done.

That way, the variable names stay consistent.

I'm just looking at this, and I see that you can write your own rules.

And the one I immediately want is I always use gray and gray, g r e y and g r a y Yeah. Interchangeably.

One of them is the queen's gray. It's the correct way. Yeah. And then the one way is American way. I think I think with an a as the American way. Yeah. That makes sense. It is. Yeah. What I end up doing is just setting double variables for each one, but what I would like it to do is to if I use the wrong version

is for it to yell at me and say, hey. You've used the wrong version of gray here. There's there's a a ton of potentials for this. And if you just look through this awesome style, I think you'll be shocked at just how many cool things there are in here, especially, like, no indistinguishable colors. If 2 color values are Too close to each other, it complains about them being suspiciously too close.

Suspiciously close. No browser hacks. That's a good one too. No browser hacks. There's one for logical properties.

One thing that's it's funny because it's it's complained that if my, property declaration doesn't have a line above it, which is, like, something I do apparently a lot, which is like, oh, that that just makes it a little bit more readable and and keeps everything in line here.

There's a Ally plug in for accessibility stuff.

No unsupported browser features.

Selector BEM pattern if you want to enforce BEM patterns as well. Yeah. The it's just endless the amount of stuff here, and I'm kinda seeing more and more every single time I look at this thing of just different things I wanna try out. It has been a little bit annoying, but once you get it configured and everything like that, you know, as any linter is, you get in the sweet spot of where it's, you know, informing you of the annoying stuff And getting out of the way for the everyday stuff. That's cool. There's a unit disallow. So if you wanna stop somebody from using a specific unit, Like, one example would be instead of using degrees to rotate something, you could only enforce using turn values. You ever heard of turn? Yeah. I do. I just it's it I it's so funny. I was right about to say turn. Out of all the CSS properties that you could have even brought up, I was about to say turn on my own accord Because we just used turn in the latest level of tutorial course just for fun. We were rotating something, and I was like, you know what? We always do degrees. Let's just do a you know, we're gonna use a 0.25 turn to turn this a quarter away. Hey. That actually makes a lot of sense Rather than having to be like, oh, the 90 degree turn. Okay. Sure. But or it's a point. It's a quarter turn, which, honestly, I kinda dig. I I I mean, if there's no performance implications of that or whatever, I kinda dig turn because it's just a Yeah. You know, a quarter value.

Especially if you have, like, You wanna show something that's, like, 82% turned because you're, like, 82 per like, you're doing a progress meter or something like that. Oh, yeah. Then it's So easy to convert a decimal percentage to a turn because they're The same thing. All a 100 based. Yeah. Yeah. Exactly. Instead of having to, like, multiply by 360 Turns? Yeah. I think we need to start talking about turns more because not enough people use them. This is so funny because I just recorded a video, like,

3 days ago, and it was like, hey. Let's use just turns for the sake of it. It's you know, we're using it right now. Let's just go ahead and do it. Oh, that's great. This is this is really cool. I I really like that there are so many possible options on here, and then you can also write

Custom stuff. Because I would imagine that if you have an in house CSS library, not only are the rules about how you should code things, but there probably are also rules in terms of writing your CSS or adding class names because, like, consistently naming Things with a class name, whether you're using dashes or underscore or camel case or something like that, this would Be really good to enforce that type of thing. Yeah. And you could have it be in your,

pipeline for deployment Or PRs to deny a PR if somebody is using an unsupported value or something like that just as a a code cleanliness.

We we often because we're not working in Giant teams. We often have that as a blind spot, but, like, I think this would be you know, I've heard from various managers that this is, like, an essential tool in making sure that their code is all Up to snuff without the, you know, that's like a common thing is like code reviews. Right? Imagine Yeah. If you had your code reviews, It could be, you know, augmented by these tools so you're not having to manually go in there and be like, hey. You know, you use this Color value, you should really use this other one instead and have the tool do it for you. I mean, that's just 1 step into, you know, Freeing up some time as a manager or something like that as well. So check it out. StyleLint, it has a big community behind it. It is very well supported.

This isn't a small little project here. This is a big thing with a lot of people using it, so check it out. And I'll have the the link in the show notes and everything like that to the awesome Styled into repo that you can go check out, get some plug ins. There are some tutorials and stuff there as well. Definitely something I highly recommend after using for a little bit here And have largely found it to make our CSS better. Awesome. Well, thank you so much for tuning in, and we will catch you on Wednesday.

Peace.

Peace.

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.