Project Wallace
CSS analyzers that check your complexity, specificity, performance, Design Tokens, custom properties and much more. By @veneman.dev
- ✌️ 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
- shipping off-by-1 errors
- Do you use CSS Multicol Layout? Show me? developer.mozilla.org/en-US/docs/W...
- [Not loaded yet]
- I’ve been playing around with extracting colors from favicon images as a shorthand for the theme colors of a website — can y’all think of a better or easier way? Something to do with using a site’s CSS directly?
- [Not loaded yet]
- Maybe @projectwallace.com then
- Are there any CSS linting / auditing tools that can identify redundant or duplicate declarations, examples of things I’m want to identify include: - Multiple MQs that all set the same property to the same value - MQs that can never be true e.g. max-width < min-width Seen them in real life code
- 'Fraid not. If 10% of the effort the JS-crowd put into tooling went on CSS tooling, what a difference it'd be! I'm continually surprised by "combined and minified" CSS with duplicate rules that aren't merged and simplified.
- [Not loaded yet]
- [Not loaded yet]
- 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
- check out all these sweet @projectwallace.com updates www.projectwallace.com/blog/january... - css coverage explorer - css ast explorer - updated features - design tokens (css variables) analyser neato work! 🙏🖤 #FrontEnd #CSS #WebDev #CSSPerformance #CSSAnalysis
- 📢 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
-
View full threadEven 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.
- I would've thought svelte as part of the compilation step together with tailwind interpreters are able to sort out close to 90% of the unused CSS. I take it your algorithm to check for unused CSS must be very interesting for tailwind and other libraries as it seems much more detailed. Great work!
- @projectwallace.com I enjoyed your article about CSS @import and wrote something similar fullystacked.net/css-import/
- [Not loaded yet]
- [Not loaded yet]
- [Not loaded yet]
- [Not loaded yet]
