SvelteKit CSS stylelint: Lint Vanilla Styles

SvelteKit CSS stylelint

SvelteKit CSS stylelint: Lint Vanilla Styles


πŸ–₯ Linting Vanilla CSS styles in SvelteKit

Today we take 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.

πŸ“Ή SvelteKit CSS stylelint: Video

SvelteKit CSS stylelint

πŸ—³οΈ Poll

Do you use Husky git hooks in your continuous integration workflow?
Voting reveals latest results.

πŸ–₯ SvelteKit CSS stylelint: Code

pnpm i -D postcss-html stylelint stylelint-a11y stylelint-config-recommended stylelint-config-standard svelte-check
2 "extends": "stylelint-config-recommended",
3 "plugins": ["stylelint-a11y"],
4 "rules": {
5 "a11y/media-prefers-reduced-motion": true,
6 "a11y/no-outline-none": true,
7 "a11y/selector-pseudo-class-focus": true,
8 "color-named": "never",
9 "font-family-name-quotes": "always-where-required",
10 "font-weight-notation": "named-where-possible",
11 "function-url-no-scheme-relative": true,
12 "function-url-quotes": "always",
13 "string-quotes": "single",
14 "value-keyword-case": "lower",
15 "unit-disallowed-list": [],
16 "max-empty-lines": 2,
17 "no-descending-specificity": true,
18 "no-duplicate-selectors": true,
19 "font-family-no-missing-generic-family-keyword": null,
20 "property-no-unknown": [
21 true,
22 {
23 "ignoreProperties": ["/^lost-/"]
24 }
25 ],
26 "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["global"] }]
27 },
28 "ignoreFiles": ["node_modules/*", "src/assets/**", "build/**", "src/lib/styles/normalise.css"],
29 "defaultSeverity": "error",
30 "customSyntax": "postcss-html"

package.json Linting Scripts

2 "name": "sveltekit-lint-css",
3 "version": "0.0.1",
4 "scripts": {
5 "dev": "svelte-kit dev --port 3000",
6 "build": "svelte-kit build",
7 "preview": "svelte-kit preview --port 3000",
8 "check": "svelte-check",
9 "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
10 "lint:css": "stylelint "src/**/*.{css,svelte}"",
11 "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
12 "prettier:check": "prettier --check --plugin-search-dir=. ."
13 },

husky Continuous Integration Scripts

2. "$(dirname "$0")/_/"
4pnpm run prettier:check && pnpm run lint:css
2. "$(dirname "$0")/_/"
4pnpx svelte-check --fail-on-warnings

🏁 SvelteKit CSS stylelint: Summary

Why use stylelint?

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

Does stylelint work with vanilla CSS in SvelteKit?

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.

What other tools are there for checking or linting CSS in SvelteKit?

As well as stylelint, you should consider adding svelte-check to you project. It will help you optimise 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.

πŸ™πŸ½ Feedback

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.

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 Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.