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.

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

SvelteKit CSS Stylelint: Lint Vanilla Styles # SvelteKit CSS Stylelint: Lint Vanilla Styles #

SvelteKit CSS Stylelint: Lint Vanilla Styles #

Updated 2 years ago

4 minute read

Gunning Fog Index: 6.9

Content by Rodney

💄 Linting Vanilla CSS styles in SvelteKit #

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.

🖥 SvelteKit CSS Stylelint: Video #

Please enable JavaScript to watch the video 📼

SvelteKit CSS Stylelint

🗳 Poll #

Do you use Husky git hooks in your continuous integration workflow?

🖥 SvelteKit CSS Stylelint: Code #

    pnpm add -D postcss-html stylelint stylelint-a11y stylelint-config-recommended stylelint-config-standard svelte-check

.stylelintrc.json

json

    1 {
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     "value-keyword-case": "lower",
14     "unit-disallowed-list": [],
15     "no-descending-specificity": true,
16     "no-duplicate-selectors": true,
17     "font-family-no-missing-generic-family-keyword": null,
18     "property-no-unknown": [
19       true,
20       {
21         "ignoreProperties": ["/^lost-/"]
22       }
23     ],
24     "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["global"] }]
25   },
26   "ignoreFiles": ["node_modules/*", "src/assets/**", "build/**", "src/lib/styles/normalise.css"],
27   "defaultSeverity": "error",
28   "customSyntax": "postcss-html"
29 }

package.json Linting Scripts #

package.json

json

    1 {
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=prettier-plugin-svelte . && eslint --ignore-path .gitignore .",
10     "lint:css": "stylelint "src/**/*.{css,svelte}"",
11     "format": "prettier --ignore-path .gitignore --write --plugin=prettier-plugin-svelte .",
12     "prettier:check": "prettier --check --plugin=prettier-plugin-svelte ."
13   },
14   // TRUNCATED...
15 }

husky Continuous Integration Scripts #

husky/pre-commit

shell

    1 #!/bin/sh
2 . "$(dirname "$0")/_/husky.sh"
3 
4 pnpm prettier:check && pnpm lint:css

husky/pre-push

shell

    1 #!/bin/sh
2 . "$(dirname "$0")/_/husky.sh"
3 
4 pnpm exec svelte-check --fail-on-warnings

🔗 SvelteKit CSS Stylelint: Links #

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

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

How you can run accessibility (a11y) checks on your ❤️ Svelte CSS code.

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
— Rodney (@askRodney) November 16, 2021

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.