Project Wallace
CSS analyzers that check your complexity, specificity, performance, Design Tokens, custom properties and much more. By @veneman.dev
- 🔆 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 😎
- The idea had been long on my issue list but this video from @syntax.fm convinced me to start it www.youtube.com/watch?v=F1s8... Mine uses cookies + SSR instead of localStorage though.
- The header needs some design tweaks with this additional item. I'm aware that alignment is a bit whack and the whole thing is cramped on small screens. Updates coming later this week.
- 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
- [Not loaded yet]
- 🚢🚢🚢 All these new UintArrays keep me on my toes
- [Not loaded yet]
- Using it to display the unique colors found in CSS. Using column layout allows for nice visual grouping of the colors that's harder to do with grid or flex. www.projectwallace.com/design-token...
- March 2025 release notes 📝 www.projectwallace.com/blog/march-2...
- Just in time for the March release notes
- As of yesterday projectwallace.com no longer uses TailwindCSS. Not because I don't like it but I want to dive deeper into 'native' CSS, do more theming, setup a layer architecture, learn more about modern CSS. I mean, it's a friggin CSS website, the least I could do is write actual CSS.
- 🚢 39 releases 🦄 1 new _years-long_ awaited feature 🏳️🌈 Moar syntax highlighting Release notes (Feb 2025) www.projectwallace.com/blog/februar...
- [Not loaded yet]
- [Not loaded yet]
- Yup, sounds like a job for github.com/projectwalla... which also powers projectwallace.com/design-tokens.
- 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 🥳
- Huge shoutout to Huntabyte for recording this video that sparked the idea and influenced the implementation *big time* www.youtube.com/watch?v=e1vl...
- You can now sort the CSS Coverage table by URL, coverage or filesize! www.projectwallace.com/css-coverage
- And you can also resize the width of the table/code view. This makes the page more like an actual editor.
- [Not loaded yet]
- I've been working on a StyleLint plugin package a while back, this would be an excellent use case. Evaluating is tricky so we'd have to restrict testing against non-calc() values. Sounds like a doable thing.
- Created an issue so I don't forget github.com/projectwalla...
- [Not loaded yet]
- [Not loaded yet]
- Sounds like an excellent tool to have. Have run into this *a lot* as well so I'm tempted to implement something for this.
- 😅 our format-css package was so opinionated that it skipped rendering `!important` Anyway, fixed in 1.5.1 github.com/projectwalla...
-
View full threadAnother one: if you were writing very old-skool CSS with some insane browserhack like `!ie` instead of `!important` we would actually still print !important. Now you can have your `!ie`. But I'm bvery disappointed if you actually do. github.com/projectwalla...
- Also very disappointed in my typing skills.
- 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
- This is *very* nice
- [Not loaded yet]
- position for chief marketing officer is still open, sir
- 📢 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
- [Not loaded yet]
- They actually can, most of the uncovered CSS is because I didn'tclick enough of the UI that these parts got covered. It's more of an indication that Wallace's UI is broad and complex than that it's Tailwind's or Svelte's fault 😅
- [Not loaded yet]
- Even then it's helpful! The example shows coverage testing for projectwallace.com itself which uses both Tailwind and Svelte styling. There's some gaps in my ability to fully cover all website scenarios, but still there's also some CSS that I found that shouldn't be there at all.
- Some highlights of the features: 🔸 Prettifies all CSS, even if it's part of a `<style>` element inside HTML 🔹 Inspect coverage per origin 🔸 Show which lines are not covered according to the report 🔹 The first page where there's a "load an example" button because these JSON's aren't easy to generate
- 📝 January release notes *Massive* release notes. www.projectwallace.com/blog/january...
- Another fix: `::highlight(MyCustomName)` would not render the custom name, but now it does! github.com/projectwalla...
- @projectwallace.com I enjoyed your article about CSS @import and wrote something similar fullystacked.net/css-import/
- 🥳
- 🔎 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`.
- Search results now get an outline around the matched part, this makes it easier to spot why a certain property ends up in the search results 🥳
- 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.
- ☠️ 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!
