Sorry this took over a month to get done, but csskit@0.0.30 now has a JS API.
No docs yet 😳 (maybe an adventurous developer would like to contribute some 😉) but it's hopefully intuitive. Parsing only, minification/formatting will come later.
Keith Cirkel
@keithamus.social
2.3K followers 1.2K following 622 posts
Software Cyber Shepherd. Web platform engineer. Participant: WHATWG, CSSWG, ARIAWG, OpenUICG, WebComponents CG Website: keithcirkel.co.uk GitHub: github.com/keithamus Mastodon: indieweb.social/@keithamus
![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";
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:olwfcyixafqp6n4zbe2pskdj/bafkreiguoitftryfpkh2z7tzjn6okqretbe2splsnoccjl5evttetqejna)
![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!](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:olwfcyixafqp6n4zbe2pskdj/bafkreihrksmkq7c52rx2fw7wi32akyh6ytrq7frzfjnz6lqcak7fsphwp4)
![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](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:olwfcyixafqp6n4zbe2pskdj/bafkreibxugtiuxqv6houicitlsndenuhysh3g5vg26juencofurm4tsyey)
