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

Deno Stylelint: Lint Deno Fresh CSS 🛁 # Deno Stylelint: Lint Deno Fresh CSS 🛁 #

blurry low resolution placeholder image Deno Fresh Middleware
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. Deno Deno Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Deno Stylelint: Lint Deno Fresh CSS 🛁 #

Updated 3 weeks ago
4 minute read
Gunning Fog Index: 6.1
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

🛁 Deno Stylelint #

This video on Deno Stylelint looks at how you can set up Stylelint in your Deno or Deno Fresh project. Stylelint is useful tooling for working with CSS, especially in teams. You define custom rules or take a set of provided recommendations. The rules stipulate how you and your team should use CSS in your project. Examples are limiting the use of duplicate selectors, avoiding named colours (accepting hex, hsl etc. only) or forbidding descending specificity. As well as keeping the styles consistent across the team, the rules can help spot errors in your CSS.

In the video, we see how you can create your own Deno script to run Stylelint on your project. We see Deno file APIs on the way, so you will probably find the video useful if you are trying Deno for the first time. I hope it is interesting either way. You can drop a comment below or reach out for a chat on Element  as well as Twitter @mention  if you have suggestions for improvements or questions.

📹 Video #

Please enable JavaScript to watch the video 📼

Deno Stylelint: Lint Deno Fresh CSS

🗳 Poll #

Which colour system are you using on new projects?
Voting reveals latest results.

🖥 Deno Stylelint: Code #

deno.json
json
    
1 {
2 "lock": false,
3 "tasks": {
4 "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
5 "lint:css": "deno run --allow-env --allow-read --allow-sys --allow-write stylelint.ts",
6 "start": "deno run -A --watch=static/,routes/ dev.ts",
7 "build": "deno run -A dev.ts build",
8 "preview": "deno run -A main.ts",
9 "update": "deno run -A -r https://fresh.deno.dev/update ."
10 },
11 "fmt": {
12 "exclude": ["static/*.css"]
13 },
14 "lint": {
15 "rules": {
16 "tags": [
17 "fresh",
18 "recommended"
19 ]
20 }
21 },
22 "exclude": [
23 "**/_fresh/*"
24 ],
25 "imports": {
26 "$fresh/": "https://deno.land/x/[email protected]/",
27 "@/": "./",
28 "@preact/signals": "https://esm.sh/*@preact/[email protected]",
29 "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
30 "@std/dotenv": "jsr:@std/dotenv@^0.225.3",
31 "@std/path": "jsr:@std/path@^1.0.8",
32 "preact": "https://esm.sh/[email protected]",
33 "preact/": "https://esm.sh/[email protected]/",
34 "stylelint": "npm:stylelint@^16.18.0",
35 "stylelint-config-recommended": "npm:stylelint-config-recommended@^16.0.0"
36 },
37 "compilerOptions": {
38 "jsx": "react-jsx",
39 "jsxImportSource": "preact"
40 }
41 }
stylelint.ts — click to expand code.
stylelint.ts
typescript
    
1 import { relative, resolve } from "@std/path";
2 import stylelint from "stylelint";
3 import stylelintConfigRecommended from "stylelint-config-recommended";
4
5 type Severity = "warning" | "error";
6
7 interface Warning {
8 line: number;
9 column: number;
10 endLine?: number;
11 endColumn?: number;
12 rule: string;
13 severity: Severity;
14 text: string;
15 stylelintType?: string;
16 }
17
18 interface LintResult {
19 source?: string;
20 deprecations: {
21 text: string;
22 reference?: string;
23 }[];
24 invalidOptionWarnings: {
25 text: string;
26 }[];
27 parseErrors: { stylelintType: string }[];
28 errored?: boolean;
29 warnings: Warning[];
30 ignored?: boolean;
31 }
32
33 // run
34 const { results }: { results: LintResult[] } = await stylelint.lint({
35 config: {
36 rules: {
37 ...stylelintConfigRecommended.rules,
38 "color-named": "never",
39 "font-family-name-quotes": "always-where-required",
40 "font-weight-notation": "named-where-possible",
41 "function-url-no-scheme-relative": true,
42 "function-url-quotes": "always",
43 "value-keyword-case": ["lower", { ignoreKeywords: ["Raleway"] }],
44 "unit-disallowed-list": [],
45 "no-descending-specificity": true,
46 "no-duplicate-selectors": true,
47 "font-family-no-missing-generic-family-keyword": null,
48 "property-no-unknown": [
49 true,
50 {
51 ignoreProperties: ["/^lost-/"],
52 },
53 ],
54 },
55 },
56 files: "static/**/*.css",
57 });
58
59 // process
60 const issues: string[] = [];
61 const deprecationWarnings = new Set<string>();
62
63 const __dirname = resolve();
64 results.forEach(({ deprecations, errored, source, warnings }) => {
65 if (errored && source) {
66 const outputPath = relative(__dirname, source);
67 issues.push(outputPath);
68
69 warnings.forEach(({ column, line, text }) => {
70 issues.push(` ${line}:${column} * ${text}`);
71 });
72 issues.push("");
73 }
74 deprecations.forEach(({ text }) => {
75 deprecationWarnings.add(text);
76 });
77 });
78
79 // output
80 if (deprecationWarnings.size) {
81 console.log("
82 Deprecation warnings:");
83 deprecationWarnings.forEach((element) => {
84 console.log(` - ${element}`);
85 });
86 console.log("");
87 }
88
89 if (issues.length) {
90 console.log(issues.join("
91 "));
92 Deno.exit(1);
93 }
static/fonts.css
css
    
1 /* stylelint-disable font-weight-notation */
2
3 /* nunito-sans-regular - latin */
4 @font-face {
5 font-family: Nunito Sans;
6 font-style: normal;
7 font-weight: 400;
8 src: local(""),
9 url("/fonts/nunito-sans-v12-latin-regular.woff2") format("woff2"),
10 url("/fonts/nunito-sans-v12-latin-regular.woff") format("woff");
11 }
12
13 /* TRUNCATED... */
14
15 /* stylelint-enable font-weight-notation */

🔗 Links #

  • Deno Fresh PostCSS article
  • Stylelint docs 
  • GitHub repo with full code 
  • Element chat: #Rodney matrix chat 
  • Twitter handle: @askRodney 

🏁 Deno Stylelint: Summary #

Does Stylelint work with Deno? #

There is not currently a specific Deno Stylelint module, though you can use the Stylelint APIs in a Deno script. We saw you can import the Node Stylelint package in Deno using the Deno NPM import syntax (`import stylelint from "npm:stylelint"`). Then the stylelint object exposes a lint method. You can specify your regular Stylelint configuration as an argument to this lint method call. You can even use predefined rule sets like `stylelint-config-recommended`.

Can you disable a Stylelint rule just for a single CSS file? #

Sometimes, you might want to disable a Stylelint rule locally. This is possible using a comment. Add a disable comment ahead of the block which you don’t want the rule to apply to. Then add an enable comment just afterwards. As an example, let’s say we want to disable the `font-weight-notation` rule. In this case, our enable and disable comments will take the shape: `/* stylelint-disable font-weight-notation */` and `/* stylelint-enable font-weight-notation */`.

How do you emit an exit(1) signal from your Deno script? #

You might want to issue an exit(1) signal to let another process know something wasn’t right! We saw this in a Stylelint setting. When one or more of our rules was broken, we issued exit(1). Then, for example, if we were running Stylelint to check styles automatically before a git commit, the hook could abort when there is an error flagged by exit(1). When the script exits normally, it automatically issues exit(0) so we do not have to do anything in that case. Anyway, to emit the exit(1) just call `Deno.exit(1)` from your Deno script.

🙏🏽 Feedback #

Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also, if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, 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, @[email protected]  on Mastodon and also the #rodney  Element Matrix room. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as Deno. 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:
DENO
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

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

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.