Project Wallace

How to create a Naked CSS theme without removing CSS

www.projectwallace.com/blog/how-to-...

🥵

enjoying all the recent (or not so recent) updates to @projectwallace.com's (free) CSS analyser page, including a dedicated 'design tokens' section, like this –

www.projectwallace.com/design-token...

lovely stuff @veneman.dev

🙏 🖤

Scatter plot and a table showing how deeply nested each seletcor, atrule, rule or declaration in a stylesheet is. This example has nesting declarations up to 6 levels deep.

🧛 Anyone up for counting the depth of your CSS nesting?
Could be interesting to spot deeply nested and hard to debug rulesets, declarations, etc.

Project Wallace analysis of CSS spacing resets. A table is shown with some CSS properties like margin, padding, margin-left, etc. The second table row is selected and down on the page is a devtools bar that shows all the related resets for the selected table row.

🆕 Spacing reset analysis

Sparked by @ohhelloana.blog's enthusiasm, this turned out to be a relatively simple feature! 🥳

A few gotchas:
- a gazillion ways to write 0 (scientific notation, floats, signed numbers)
- many spacing-related properties, potentially vendor prefixed (although unlikely)

#CSSDay was a blast and the first act of applying quick wins was improving scrollbar styling after watching @nerdy.dev's talk.

Still recovering from the energy.

Miriam standing on stage before a slide that says "complexity is something to manage"

At #cssday where @miriam.codes is speaking truths

🌟 Release notes April & May

www.projectwallace.com/blog/april-m...

☀️ NEW Light theme
🍑 NEW CSS Naked theme
⚖️ NEW Website Analytics
🛠️ Added new devtools to several pages

Project Wallace's CSS Analysis overview focusing on the atrules section, showing two panels about CSS containers. The first panel shows which container queries were found. The second panel shows which container names were found, both in container queries as well as declarations explicitly setting a `container-name` property (or via the `container` shorthand 🤮).

🆕 Container names.

Because we all sometimes forget to name a thing, or forget that we named it and never used it 😇

Project Wallace's CSS analysis overview, focusing on the Atrules section. It shows several panels, the @media ones being relevant here. A panel on the left says `@media` with 2211 items (165 unique). The panel on the right says `media features` with 2679 items in total, 17 unique.

🆕 See which Media Features are used. Useful if you have many media queries and want a quick view of which features are queried.

Idea taken from @httparchive.org's CSS chapter.

🌟 Release notes April & May

www.projectwallace.com/blog/april-m...

☀️ NEW Light theme
🍑 NEW CSS Naked theme
⚖️ NEW Website Analytics
🛠️ Added new devtools to several pages

Published css-analyzer@7.0.2 and css-code-quality@3.0.1 to reduce their install size with ~50%.

css-analyzer shipped 2 versions of css-tree which is the only dependency but at a 'costly' ~2.03MB. It also ships CommonJS so we *could* even further get the number down.

Contribute to the 2025 Web Almanac · HTTPArchive almanac.httparchive.org · Discussion #4062 Dear all, We are excited to announce the Call for Contributions for the 2025 Web Almanac (6th Edition)! The Web Almanac is an annual report that provides an overview of the state of the web, based ...

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

github.com/HTTPArchive/...

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.

YouTube video by Syntax Modern CSS Theming | Light Mode / Dark Mode and More!

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.

Project Wallace's css analysis page but unlike every other screenshot posted here so far this one is white with black text.

🔆 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 😎

GitHub - projectwallace/css-analyzer: Analytics for CSS Analytics for CSS. Contribute to projectwallace/css-analyzer development by creating an account on GitHub.

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.

🚢🚢🚢

All these new UintArrays keep me on my toes

Project Wallace CSS layers report with a devtools panel showing the layer composition as a JSON object.

Project Wallace's custom property inspector with devtools on the bottom. It shows a new panel that contains all the custom properties as JSON arrays.

✌️ 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

Project Wallace's design tokens analysis webpage showing the color swatches of Netlify. It displays a large list of 144 unique colors shown in 3 columns. The right part of the image shows the browser's devtools open, proving the use of CSS `column-width: 32ch`.

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

🚢 39 releases
🦄 1 new _years-long_ awaited feature
🏳️‍🌈 Moar syntax highlighting

Release notes (Feb 2025) www.projectwallace.com/blog/februar...

Yup, sounds like a job for github.com/projectwalla... which also powers projectwallace.com/design-tokens.

Project Wallace's item usage table showing a dozen rows. Each row contains a blurb of CSS, neatly syntax highlighted. The same CSS is shown on the right panel, in context in it's surrounding CSS.

The item usage panel now also highlights syntax.

A table with two columns: Count and Value. The table has 12 rows containing various CSS pseudo classes.

✨ 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.

YouTube video by Huntabyte Svelte 5's Secret Weapon: Classes + Context

Huge shoutout to Huntabyte for recording this video that sparked the idea and influenced the implementation *big time*

www.youtube.com/watch?v=e1vl...

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 🥳

And you can also resize the width of the table/code view. This makes the page more like an actual editor.