Hasty Treat - Stylelint for Linting CSS

especially, like, no indistinguishable

No unsupported browser features.

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

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, The same way you would do, like, an e s lindrc

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.

I always use gray and gray, g r e y and g r a y Yeah. Interchangeably.

specifically, well, it can be as good as possible a And it's going to allow you to have custom rules so that your CSS, 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.

So that way, it keeps people on you know, keeps everybody There's a Ally plug in for accessibility stuff.

Yeah. Honestly, that's, like, the the huge benefit to linting for me is that it, like, or

Value. They should be given only a CSS and keep track of them, catalog them, log them, and even get performance metrics So if somebody is trying to animate, that that just makes it a little bit more readable and and keeps everything in line here.

3 layers deep or else it complains.

That way, the variable names stay consistent.

animate something and it's not working correctly should not be given So that that's Recording on a Thursday, 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

it's called a scale unlimited declaration strict value.

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.

I also have some rules for 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, 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.

In the same road in terms of always utilizing the custom CSS variables

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,

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.

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.

Some other ones that we have is, like, a max nesting depth for SaaS where you can only nest, 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,

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 allow us to keep our design system Cohesive.

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.

And what this one is doing is basically saying the following properties that we have in this array

file.

So what do you need to get started with Stylent? 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 So, 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.

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

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

and I've CSS library,

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

Monday. Monday. Monday.

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

Welcome to Syntax.

which is a really sick linting system for your CSS, It could be, you know, augmented by these tools so you're not having to manually 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,

for sponsoring Syntax.

where you can push and pull data

Boss, and Scott El Toro Loco.

We are also sponsored by Sanity.

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

and they have, like, a really cool case study

Tolinski.

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

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.

Hey.

That shows how somebody built

Along with a user misery score. Now Sentry is the perfect tool for this type of thing.

hasty treat. We're gonna be talking via this configuration.

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.

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

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 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 would Be really good to enforce that type of thing. Yeah. And you could have it be in your, 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, rules.

You wanna show something that's, like, 82% 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, And sometimes you gotta turn those off in order to use some other tools.

writing your CSS or adding class names because, like, consistently naming 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

Custom stuff. Because I would imagine that if you have an in house

not only are the rules about how you should code things, but there probably are also rules in terms of

Things with a class name, whether you're using dashes or underscore or camel case or something like that, 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

Especially if you have, like,

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

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

for deployment reordered.

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 for JavaScript and for some of your CSS,

And so, like, the basic way of getting going is to say StyleLint about StyleLint,

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, I'm just looking at this, and I see that you can write your own

and then JSHint, and then now we're on ESLint is the the one that everybody uses for just about everything. And

Alright. Let's get into it. We are gonna be talking about StyleLint, And the one I immediately want is

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.

In some other existing projects, but

modern, mighty linter for CSS. K? It lets you know if your CSS is following the guidelines or not.

integrated into a project before. I might have used it just as, like,

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.

And this is not something that I have

And we we often use something called I mean, before it was Was it JSLint 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 pipeline

even in line our our, 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 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.

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

Svelte components That's who's this, really.

Peace.

Head on over to syntax.fm 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, variable as a value.

go in there and be like, hey. You know, you use this Color value, you should really use this other one instead what is this thing? It's basically a And it works with all the stuff you know and love like Sass or any of that stuff. I mean, we use it 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.

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, In this Monday, Boss.

Peace.

and why, it's been pretty fine for us.

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 let's say, position left

And I happen to do mine alphabetically, Use the coupon code Tasty treat, all lowercase, all

Format and fix your code. Right? Like, if you have weird indentation

some of the cool rules that I've added to this thing is order. And, 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, Yeah. But in addition, there's 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

You can have an order plug in where you can choose in what's the order in which things will be

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

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

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

which is a style lint repo. You know, anytime there's a a repo, there's one of these awesome somethings.

And let me tell you, you will need to configure your rules because, ESLint does a good job of letting us know when our JavaScript

I found that CSS more than JavaScript required quite a bit of, like, CSS, and it works totally fine with no issues. So I can't use this one anyways.

alright. This is how we like it, not like this is somebody else's opinion.