Profile avatar
projectwallace.com
CSS analyzers that check your complexity, specificity, performance, Design Tokens, custom properties and much more. By @veneman.dev
46 posts 72 followers 69 following
Prolific Poster
Active Commenter

The @httparchive.org 's Web Almanac is looking for contributors for this year's edition. github.com/HTTPArchive/...

πŸ”† last night I shipped a light theme There may be bits and bobs still not converted yet so please let me know if anything looks broken. Also, grab some sunglasses 😎

All packages updated to ship ESM only: 🌱 github.com/projectwalla... 🌱 github.com/projectwalla... 🌱 github.com/projectwalla... 🌱 github.com/projectwalla... 🌱 github.com/projectwalla... 🌱 github.com/projectwalla... Published a new major for each of them with ESM being the only change.

✌️ TWO new features released Well, actually 3. Oh who cares anyway. βœ… Copy your CSS @​layers as JSON βœ… Show devtools on the custom property page βœ… Copy all/unused/undefined/undefined-with-fallback properties as JSON

March 2025 release notes πŸ“ www.projectwallace.com/blog/march-2...

Just in time for the March release notes

🚒 39 releases πŸ¦„ 1 new _years-long_ awaited feature πŸ³οΈβ€πŸŒˆ Moar syntax highlighting Release notes (Feb 2025) www.projectwallace.com/blog/februar...

The item usage panel now also highlights syntax.

✨ feature alert: pseudo class analysis www.projectwallace.com/analyze-css

MASSIVE performance improvement released tonight when you open the inspector or networkpane (or any of our devtools panels). Feels really noticable when inspecting larger sites. Yes I tried it on a 5MB CSS file.

Pretty massive new feature: when navigating between pages the site now remembers your URL and CSS so you don't have to submit+download the same CSS every time πŸ₯³

You can now sort the CSS Coverage table by URL, coverage or filesize! www.projectwallace.com/css-coverage

that's twice this week I've found a possible use for my little 'can I use combiner' CSS support tool. I think I should tidy it up a bit and put it somewhere

πŸ“’ CSS Coverage viewer A new page recently arrived and it helps you inspect your CSS coverage generated from Chrome/Edge devtools, or more importantly: coverage reports generated from Playwright/Puppeteer (because they can span multiple page navigations)!! www.projectwallace.com/css-coverage

πŸ“ January release notes *Massive* release notes. www.projectwallace.com/blog/january...

πŸ“ January release notes *Massive* release notes. www.projectwallace.com/blog/january...

πŸ˜… our format-css package was so opinionated that it skipped rendering `!important` Anyway, fixed in 1.5.1 github.com/projectwalla...

@projectwallace.com I enjoyed your article about CSS @import and wrote something similar fullystacked.net/css-import/

Custom Property analyzer now also tells you which custom properties are: - never declared πŸ™„ - but still used in a var() πŸ˜΅β€πŸ’« - but with a fallback value ☺️ This is a little better than just checking for the propery never being declared, because the fallback acts as a safe-guard.

πŸ”Ž search custom properties πŸ” When reviewing large codebases you often want to check for certain names or prefixes. The new search lets you do that, even with negated patterns like `!my-prefix`.

☠️ Reverting this because it seems there's a pretty massive performance that I can't wrap my head around just yet. Sorry! Will figure our a way to get it back though. πŸ˜”

πŸ—£οΈπŸ’¬ Preserving comments Our CSS formatter is updated to keep most of your CSS comments intact instead of stripping them. This can be helpful sometimes when auditing or prettifying your CSS. github.com/projectwalla...

So stoked about the layer tree visualisation that it's now part of the analyzer result page, instead of only listing out which layers were found πŸ₯°

πŸ’« Line numbers! πŸ’« Because Wallace is starting to look more and more like an actual editor and line numbers can be super helpful.

πŸ’« new package alert! πŸ’« css-layer-tree analyzes your CSS layers and creates a single tree of it. πŸ”— github.com/projectwalla...

If you are using CSS @​layer you probably want to check that the order and nesting is correct as well. Our handy little layer visualizer helps with that! πŸ₯ž www.projectwallace.com/css-layers-v...

πŸ“ Improved the website navigation to include all important tools in the header. On smaller screens the overflow wraps into a popover so items can still be accessed. Using it a ton already myself, hope you'll find it useful too!

As winter draws closer I'm seriously considering making these into warm and cozy hoodies. (Image compression not doing me a favor here, the colors and vibrance on these are _unreal_)

πŸŽ‰ CSS Diff viewer πŸŽ‰ πŸ‘‰ See which lines were changed, removed or added πŸ‘‰ Familiar interface, because you already know what diffs should look like πŸ‘‰ Syntax highlighting (if your browser supports it) πŸ‘‰ Diff summary (lines added/removed and total lines changed)

πŸ‘‹ hello world!