Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

stylelint for SvelteKit: Keep your SCSS Code Consistent # stylelint for SvelteKit: Keep your SCSS Code Consistent #

blurry low resolution placeholder image stylelint for SvelteKit
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. SvelteKit SvelteKit Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

stylelint for SvelteKit: Keep your SCSS Code Consistent #

Updated 3 years ago
4 minute read
Gunning Fog Index: 7.1
7 comments
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

💄 stylelint SvelteKit: Keeping it Clean #

stylelint is a rather lovely little tool for keeping your code consistent. It is a must-have if you want to impress future employers skimming through your open source code on GitHub. Equally, it is indispensable for any team that wants to keep their code base consistent. In this short video, we see how you can use stylelint for SvelteKit. We start from square one, installing all the necessary packages, the VS Code extension. Additionally, we even look at how to integrate stylelint for SvelteKit into your Continuous Integration (CI) process.

Although we don't look at it in the video, there is a link for the a11y accessibility stylelint plugin lower down. If you are using vanilla CSS in SvelteKit check out the more specific post on that.

📹 stylelint for SvelteKit: Video #

Please enable JavaScript to watch the video 📼

SvelteKit Favicon

🖥 Code #

Packages #

    
pnpm add -D postcss postcss-html stylelint stylelint-config-standard stylelint-config-recommended-scss stylelint-scss
Install stylelint base and SCSS packages.

Configuration File #

.stylelintrc.json
json
    
1 {
2 "extends": "stylelint-config-recommended-scss",
3 "rules": {
4 "color-named": "never",
5 "font-family-name-quotes": "always-where-required",
6 "font-weight-notation": "named-where-possible",
7 "function-url-no-scheme-relative": true,
8 "function-url-quotes": "always",
9 "value-keyword-case": "lower",
10 "unit-disallowed-list": [],
11 "no-descending-specificity": true,
12 "no-duplicate-selectors": true,
13 "font-family-no-missing-generic-family-keyword": null,
14 "property-no-unknown": [
15 true,
16 {
17 "ignoreProperties": ["/^lost-/"]
18 }
19 ]
20 },
21 "ignoreFiles": ["node_modules/*", "src/assets/**", "build/**", "src/lib/styles/normalise.css"],
22 "defaultSeverity": "error",
23 "customSyntax": "postcss-html"
24 }
stylelint configuration example.

stylelint SvelteKit CLI Command #

    
npx stylelint "**/*.{css,scss,svelte}"
stylelint CLI command.

stylelint SvelteKit package.json Customizations #

package.json
json
    
1 "scripts": {
2 "lint:scss": "stylelint "src/**/*.{css,scss,svelte}"",
3 },
4 "husky": {
5 "hooks": {
6 "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
7 "pre-commit": "pnpm run prettier:check && pnpm run lint:scss"
8 }
9 },
stylelint package.json customisations.

🗳 Poll #

Why do you use a linting tool?
Voting reveals latest results.

🔗 Links #

  • Demo code for setting up Stylelint with SCSS in SvelteKit ,
  • Scott Tolinksi's config file 
  • stylelint-a11y plugin 
  • vscode-stylelint 
  • stylelint Docs 
  • Twitter handle: @askRodney 

🙏🏽 stylelint SvelteKit: 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 Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
SVELTEKITCSS

Related Posts

blurry low resolution placeholder image Using Lightning CSS with Deno: Bundle & Transform ⚡️

Using Lightning CSS with Deno: Bundle & Transform ⚡️

deno
css
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Comments

  • Jake

    I get Unknown word CssSyntaxError for every single .svelte file. I have a feeling that it doesn't understand that it needs to only parse what is in the <style> tags and is trying to parse everything.</style>

    4 years ago
    • Rodney

      Hi Jake, sorry it's not working. It might be the config needs updating. I have just updated the imports to include postcss and postcss-html (see Packages code block above). On top, I added an extra line of config, including postcss-html in the .stylelint.json code block above. Hopefully this fixes it... please let me know if it doesn't and I wll take a closer look.
      4 years ago
    • Jake

      The postcss-html appears to have fixed the CssSyntaxError, but now I notice that all of my styles defined in .svelte files seem to be ignored. For example the "max-empty-lines": 2 but I purposely added lots of empty lines (3, 4, etc or more lines between) and I get zero linting errors. Other rules like "color-named": never appear to be ignored. Everything ignored. No errors. The files are not being ignored. The stylelint config is valid. Not sure what I'm missing here. It works fine on the separate .scss files.
      4 years ago
    • Rodney

      Hi Jake, thanks for the update. Could you check you have svelte-preprocess (needed for Sass) installed? I have created a demo repo on GitHub. This includes global styles and some in a style tag too and seems to be working, so you might want to check config there against what you have. Let me know either way!
      4 years ago
    • Jake

      I think I got it working. I believe my package-lock.json was forcing old versions of certain modules to be installed. After deleting package-lock.json and node_modules and reinstalling everything seems to be working as expected. Thanks!
      4 years ago
    • Jake

      I think I got it working. I believe my package-lock.json was forcing old versions of certain modules to be installed. After deleting package-lock.json and node_modules and reinstalling everything seems to be working as expected. Thanks!
      4 years ago
    • Rodney

      Awesome! You know I thought that was what was needed, but it might have sounded a bit lame as a solution, especially if it didn’t work 😅 Glad you got it going!
      4 years ago

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.