Today we have a look at SvelteKit CSS Stylelint. This will help you get back on track if you are having issues linting vanilla CSS in your SvelteKit. Stylelint is a tool which lets you automatically scan your CSS code to check it follows accessibility recommendations as well as more general best practice rules. You can use popular rule sets or create your own rules tailored to your personal taste. Using Stylelint helps keep your codebase consistent over time and also when working in a team. The checks are quick to run and also straightforward to set up. We look at using Stylelint with vanilla CSS in this video.
There is also a video on using Stylelint with SCSS in SvelteKit, which you should definitely check out is SCSS is your preferred styling language. There's a link below to that video. For vanilla CSS SvelteKit Stylelint, click play on the video under the next heading.
- using Stylelint with SCSS in SvelteKit
- Scott Tolinski's config file
- stylelint-a11y plugin
- Stylelint docs
- svelte-check docs
- Twitter handle: @askRodney
- stylelint lint is a simple-to-use tool for finding common errors in your CSS code. You can easily add accessibility rules to help make uses with special requirements feel more at home on the sites you build. As well as helping you write accessible CSS, Stylelint helps keep your codebase consistent over time and also across your team.
- Yes! Stylelint works with vanilla CSS in SvelteKit. You need to add a touch of extra configuration. Namely, add the postcss-html package to your project and include it in your Stylelint config file. On top, you will want to add a line to your config so that Stylelint ignore the :global pseudo class.
- As well as Stylelint, you should consider adding svelte-check to your project. It will help you optimize your style by letting you know if there is any unused CSS in your code. This is handy as in a large project, over time, it is easy to end up with extraneous legacy CSS. On top, svelte-check looks for accessibility, TypeScript, and other more general potential issues in your code.
If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.
How you can run accessibility (a11y) checks on your ❤️ Svelte CSS code.— Rodney (@askRodney) November 16, 2021
We run through setting up stylelint for vanilla CSS SvelteKit projects and also take a peek at adding svelte-check to husky
Hope you find it useful!
https://t.co/BnB3THTgY2 @stylelint #askRodney #sveltekit
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.