Bart Veneman
@veneman.dev
Creator of Project Wallace, analytics for CSS - https://www.projectwallace.com. I can lift node_modules twice my own weight. He/him.
...and to the surprise of absolutely no-one the error was caused by a mistake on my part. Had to replace an import assertion on a dynamic import from `assert` to `with`, that was it.
All checks are green, might as well ship this to prod. ✅
All checks are green, might as well ship this to prod. ✅
November 10, 2025 at 10:47 PM
...and to the surprise of absolutely no-one the error was caused by a mistake on my part. Had to replace an import assertion on a dynamic import from `assert` to `with`, that was it.
All checks are green, might as well ship this to prod. ✅
All checks are green, might as well ship this to prod. ✅
Gave this a shot for @projectwallace.com:
- 🚂 Svelte kit build time: 9.1s -> 5.3s
- ⚠️ Build warnings: 0 -> lots, because lightningcss doesn't know `::highlight(AtRule)`
- 💾 Page bundle download size: identical
- ❌ 1 page erroring completely, seemingly because of css-tree imports somewhere on my end
- 🚂 Svelte kit build time: 9.1s -> 5.3s
- ⚠️ Build warnings: 0 -> lots, because lightningcss doesn't know `::highlight(AtRule)`
- 💾 Page bundle download size: identical
- ❌ 1 page erroring completely, seemingly because of css-tree imports somewhere on my end
November 10, 2025 at 10:36 PM
Gave this a shot for @projectwallace.com:
- 🚂 Svelte kit build time: 9.1s -> 5.3s
- ⚠️ Build warnings: 0 -> lots, because lightningcss doesn't know `::highlight(AtRule)`
- 💾 Page bundle download size: identical
- ❌ 1 page erroring completely, seemingly because of css-tree imports somewhere on my end
- 🚂 Svelte kit build time: 9.1s -> 5.3s
- ⚠️ Build warnings: 0 -> lots, because lightningcss doesn't know `::highlight(AtRule)`
- 💾 Page bundle download size: identical
- ❌ 1 page erroring completely, seemingly because of css-tree imports somewhere on my end
Yay, took almost half off of the CLI bundle size for css-code-coverage package 🥳
The cli.js now references the core.js in the dist file instead of shipping it's own copy of the core inside cli.js. Surprisingly tricky to fix even though it was basically 2 lines of code change and 1 new line.
The cli.js now references the core.js in the dist file instead of shipping it's own copy of the core inside cli.js. Surprisingly tricky to fix even though it was basically 2 lines of code change and 1 new line.
November 7, 2025 at 9:08 PM
Yay, took almost half off of the CLI bundle size for css-code-coverage package 🥳
The cli.js now references the core.js in the dist file instead of shipping it's own copy of the core inside cli.js. Surprisingly tricky to fix even though it was basically 2 lines of code change and 1 new line.
The cli.js now references the core.js in the dist file instead of shipping it's own copy of the core inside cli.js. Surprisingly tricky to fix even though it was basically 2 lines of code change and 1 new line.
Use your existing Playwright tests to calculate your CSS line coverage www.projectwallace.com/blog/how-to-...
November 3, 2025 at 1:36 PM
Use your existing Playwright tests to calculate your CSS line coverage www.projectwallace.com/blog/how-to-...
October 31, 2025 at 7:49 PM
Some 600+ visitors (bots, I think?) from Singapore are blowing through my Netlify credits real fast. 100% bounce ratio, weird old pages visited.
October 30, 2025 at 3:12 PM
Some 600+ visitors (bots, I think?) from Singapore are blowing through my Netlify credits real fast. 100% bounce ratio, weird old pages visited.
In terms of accessibility, would it be acceptable to replace CMD/CTRL+O on a page where the main starting point requires you to select files?
On this page I'd expect CMD+O to open a file chooser that lets me select files to start the inspector.
On this page I'd expect CMD+O to open a file chooser that lets me select files to start the inspector.
October 26, 2025 at 2:55 PM
In terms of accessibility, would it be acceptable to replace CMD/CTRL+O on a page where the main starting point requires you to select files?
On this page I'd expect CMD+O to open a file chooser that lets me select files to start the inspector.
On this page I'd expect CMD+O to open a file chooser that lets me select files to start the inspector.
What if you can also set a minimum coverage ratio for individual files?
October 7, 2025 at 8:05 PM
What if you can also set a minimum coverage ratio for individual files?
Why not render all the uncovered bits while we're at it?
This is turning into a pretty big project 😂
This is turning into a pretty big project 😂
October 7, 2025 at 7:18 PM
Why not render all the uncovered bits while we're at it?
This is turning into a pretty big project 😂
This is turning into a pretty big project 😂
IT'S WORKING!!! 🎉
🎭 Every @playwright.dev test collects bits of CSS Coverage
💾 Each PW test stores the coverage result in a JSON file and stores as GitHub artifact
🗂️ GitHub Action grabs the artifact and feeds into tiny CLI tool
🥳 CLI accepts `minLineCoverage` arg and passes or fails the job
🤩🤩🤩🤩🤩🤩
🎭 Every @playwright.dev test collects bits of CSS Coverage
💾 Each PW test stores the coverage result in a JSON file and stores as GitHub artifact
🗂️ GitHub Action grabs the artifact and feeds into tiny CLI tool
🥳 CLI accepts `minLineCoverage` arg and passes or fails the job
🤩🤩🤩🤩🤩🤩
October 6, 2025 at 6:40 PM
IT'S WORKING!!! 🎉
🎭 Every @playwright.dev test collects bits of CSS Coverage
💾 Each PW test stores the coverage result in a JSON file and stores as GitHub artifact
🗂️ GitHub Action grabs the artifact and feeds into tiny CLI tool
🥳 CLI accepts `minLineCoverage` arg and passes or fails the job
🤩🤩🤩🤩🤩🤩
🎭 Every @playwright.dev test collects bits of CSS Coverage
💾 Each PW test stores the coverage result in a JSON file and stores as GitHub artifact
🗂️ GitHub Action grabs the artifact and feeds into tiny CLI tool
🥳 CLI accepts `minLineCoverage` arg and passes or fails the job
🤩🤩🤩🤩🤩🤩
I think.... I did it....?
A tiny Playwright fixture that collects CSSCoverage reporting and writes the JSON to disk. Then grab the (apparently) 157 JSON files (7.2MB) and put them in the CSS Coverage analyzer. A bit slow, but it's not even running in a WebWorker yet...
A tiny Playwright fixture that collects CSSCoverage reporting and writes the JSON to disk. Then grab the (apparently) 157 JSON files (7.2MB) and put them in the CSS Coverage analyzer. A bit slow, but it's not even running in a WebWorker yet...
September 28, 2025 at 8:52 PM
I think.... I did it....?
A tiny Playwright fixture that collects CSSCoverage reporting and writes the JSON to disk. Then grab the (apparently) 157 JSON files (7.2MB) and put them in the CSS Coverage analyzer. A bit slow, but it's not even running in a WebWorker yet...
A tiny Playwright fixture that collects CSSCoverage reporting and writes the JSON to disk. Then grab the (apparently) 157 JSON files (7.2MB) and put them in the CSS Coverage analyzer. A bit slow, but it's not even running in a WebWorker yet...
I wish CSS Highlights would let me add borders or outlines. It's a perfect application for highlighting (partial) search results.
September 18, 2025 at 8:02 AM
I wish CSS Highlights would let me add borders or outlines. It's a perfect application for highlighting (partial) search results.
I've been writing CSS analyzers for (... checks notes ...)
13 years
and CSS overflow shit will never not mess me up.
13 years
and CSS overflow shit will never not mess me up.
September 16, 2025 at 5:58 PM
I've been writing CSS analyzers for (... checks notes ...)
13 years
and CSS overflow shit will never not mess me up.
13 years
and CSS overflow shit will never not mess me up.
TIL you can expand the Typescript type hint popup to show what is inside the types by clicking on that tiny `+` in the bottom left.
Previously I'd always option+click on that type to go to definition and lose my tracks.
Previously I'd always option+click on that type to go to definition and lose my tracks.
September 15, 2025 at 9:19 AM
TIL you can expand the Typescript type hint popup to show what is inside the types by clicking on that tiny `+` in the bottom left.
Previously I'd always option+click on that type to go to definition and lose my tracks.
Previously I'd always option+click on that type to go to definition and lose my tracks.
Doing a very similar trick on the CSS Coverage inspector: create an array of start/stop elements to render an entire range instead of a single DOM node per line.
❌ DOM size before: 3145 nodes
✅ DOM size after: 686 nodes
(But gains depend on CSS size & patchiness of coverage of the selected file)
❌ DOM size before: 3145 nodes
✅ DOM size after: 686 nodes
(But gains depend on CSS size & patchiness of coverage of the selected file)
August 31, 2025 at 6:01 PM
Doing a very similar trick on the CSS Coverage inspector: create an array of start/stop elements to render an entire range instead of a single DOM node per line.
❌ DOM size before: 3145 nodes
✅ DOM size after: 686 nodes
(But gains depend on CSS size & patchiness of coverage of the selected file)
❌ DOM size before: 3145 nodes
✅ DOM size after: 686 nodes
(But gains depend on CSS size & patchiness of coverage of the selected file)
is it time to bring back the grunge yet?
August 24, 2025 at 8:35 PM
is it time to bring back the grunge yet?
Would be nice to have a CSS selector to target all or subset of highlights.
Now I have to search for all the custom highlights in one file, paste it in my component styles and try to not forget about about updating it when one of them changes.
gist.github.com/bartveneman/...
Now I have to search for all the custom highlights in one file, paste it in my component styles and try to not forget about about updating it when one of them changes.
gist.github.com/bartveneman/...
August 24, 2025 at 7:21 PM
Would be nice to have a CSS selector to target all or subset of highlights.
Now I have to search for all the custom highlights in one file, paste it in my component styles and try to not forget about about updating it when one of them changes.
gist.github.com/bartveneman/...
Now I have to search for all the custom highlights in one file, paste it in my component styles and try to not forget about about updating it when one of them changes.
gist.github.com/bartveneman/...
WOW! Seeing massive performance gains when using requestIdleCallback() to clean up custom `CSS.Highlight`. Before: 500ms+ After: <1ms
This is great because this cleanup would block the UI before moving on. Now the operation feels instant!
This is great because this cleanup would block the UI before moving on. Now the operation feels instant!
August 22, 2025 at 10:33 AM
WOW! Seeing massive performance gains when using requestIdleCallback() to clean up custom `CSS.Highlight`. Before: 500ms+ After: <1ms
This is great because this cleanup would block the UI before moving on. Now the operation feels instant!
This is great because this cleanup would block the UI before moving on. Now the operation feels instant!
Reducing 10,000+ DOM nodes when rendering large reports on @projectwallace.com
Previously I'd render a `` for *every* line of code that would show up in the inspector panel. Now it's a *single* `div` with all the line numbers as text content with `whites-space: pre`.
Previously I'd render a `
August 16, 2025 at 7:45 PM
Reducing 10,000+ DOM nodes when rendering large reports on @projectwallace.com
Previously I'd render a `` for *every* line of code that would show up in the inspector panel. Now it's a *single* `div` with all the line numbers as text content with `whites-space: pre`.
Previously I'd render a `
I'm stumped! How do I create this layout where the gutter with line numbers and the code scroll vertically together and the code scrolls horizontally with the line numbers still visible? Is it even possible without JS and/or shadow copies of the <pre> block?
August 14, 2025 at 10:24 PM
I'm stumped! How do I create this layout where the gutter with line numbers and the code scroll vertically together and the code scrolls horizontally with the line numbers still visible? Is it even possible without JS and/or shadow copies of the <pre> block?
A tiny little class I keep using across various projects: check if a potentially wEiRdLy cased string is in a set of keywords.
Since most of CSS doesn't care about casing (🤬 NaN) I can yeet any user generated CSS property in here it'll check against my base set.
Since most of CSS doesn't care about casing (🤬 NaN) I can yeet any user generated CSS property in here it'll check against my base set.
August 13, 2025 at 8:34 PM
A tiny little class I keep using across various projects: check if a potentially wEiRdLy cased string is in a set of keywords.
Since most of CSS doesn't care about casing (🤬 NaN) I can yeet any user generated CSS property in here it'll check against my base set.
Since most of CSS doesn't care about casing (🤬 NaN) I can yeet any user generated CSS property in here it'll check against my base set.
I appreciate all 18 of you! +1 rank gained is still a plus in my book.
2025.stateofcss.com/en-US/other-...
2025.stateofcss.com/en-US/other-...
August 11, 2025 at 9:35 AM
I appreciate all 18 of you! +1 rank gained is still a plus in my book.
2025.stateofcss.com/en-US/other-...
2025.stateofcss.com/en-US/other-...
Can't wait for this chart to go to almost zero! I've been using it for a long time now on @projectwallace.com as progressive enhancement and *very* happy with it.
July 2, 2025 at 9:34 AM
Can't wait for this chart to go to almost zero! I've been using it for a long time now on @projectwallace.com as progressive enhancement and *very* happy with it.