keithamus @keithamus@indieweb.social
Public

A rough prototype, but it's working! `csskit@0.0.11` now has a linter language! you can define "rule sheets" with a css-like syntax, then run them against your actual stylesheets and it'll lint your css in a split second!

Run `csskit tree` to see how to select nodes.

`npm i csskit@latest` ;)

An editor window with the contents of a "Csskit Rule Sheet". The code reads: /* check.cks */ :prefixed { level: error; diagnostic: "Avoid prefixed properties"; } compound-selector:has(id) { level: error; diagnostic: "Avoid IDs in css selectors"; } style-value[name=color]:not(:computed) { level: error; diagnostic: "Don't use literals in color style values, only our design tokens"; } compound-selector:has(:nth-child(4)) { level: warning; diagnostic: "Complex selector, consider refactoring"; }A code edit with a CSS file open. The code reads: #a { color: red; -webkit-animation: spin 3s; } div.b.c.d.e { color: var(--red-500); }A terminal window. The user has run the command `csskit check check.cks style.css` and the result is the following output: × Avoid prefixed properties ╭─[test.css:3:2] 2 │ color: red; 3 │ -webkit-animation: spin 3s; · ─────────────┬───────────── · ╰── Avoid prefixed properties 4 │ } ╰──── × Avoid IDs in css selectors ╭─[test.css:1:1] 1 │ #a { · ─┬ · ╰── Avoid IDs in css selectors 2 │ color: red; ╰──── × Don't use literals in color style values, only our design tokens ╭─[test.css:2:2] 1 │ #a { 2 │ color: red; · ─────┬───── · ╰── Don't use literals in color style values, only our design tokens 3 │ -webkit-animation: spin 3s; ╰──── ⚠ Complex selector, consider refactoring ╭─[test.css:6:1] 5 │ 6 │ div.b.c.d.e { · ─────┬───── · ╰── Complex selector, consider refactoring 7 │ color: var(--red-500); ╰──── Error: 1 files failed check! A terminal window. The user has run `csskit tree style.css` and the result is the following output: style-sheet ├─ style-rule:rule │ ├─ selector-list:size(1) │ │ ╰─ compound-selector │ │ ╰─ id │ ├─ style-value[name=color]:longhand │ │ ╰─ style-value │ │ ╰─ color-style-value │ │ ╰─ color │ ╰─ style-value[name=-webkit-animation]:unknown:prefixed │ ╰─ style-value ╰─ style-rule:rule ├─ selector-list:size(1) │ ╰─ compound-selector │ ├─ tag │ │ ╰─ html-tag │ ├─ class │ ├─ class │ ├─ class │ ╰─ class ╰─ style-value[name=color]:computed ╰─ style-value
0
0
0

If you have a fediverse account, you can quote this note from your own instance. Search https://indieweb.social/users/keithamus/statuses/115810235110816881 on your instance and quote it. (Note that quoting is not supported in Mastodon.)