April + May 2025 release notes
New features
A light theme! For those who prefer a light website or for those standing in bright sunlight.
The idea for this had long been on the todo list but a recent Syntax video opened my eyes and made me bite the bullet. My implementation uses cookies instead of localStorage but most of the heavy lifting is still done by the CSS
light-dark()
function.A ‘naked CSS’ theme! For those celebrating CSS Naked Day.
Fun fact: implementing this was only 8 lines of code!
[data-theme="naked"], [data-theme="naked"] * { all: revert !important; color-scheme: dark light !important; [aria-hidden='true'] { display: none !important; } }
But this is also a darn good way of finding accessibility issues.
The CSS
@layer
visualizer page already had some devtools panels on it and now also includes the JSON output panel from the css-layer-tree library that powers it. This allows for easy copy-pasting so you can use the result somewhere else.The Custom Property Inspector now also has some devtools panels, like a network panel and a panel with the JSON output of all the properties that were inspected. In there you’ll find arrays of All properties, Unused properties, Undefined properties and Underfined with fallback properties.
The selectors you enter on the Specificity Calculator are now synced to the URL for easy sharing.
New website analytics. After saying goodbye to Fathom last fall after many years of using it I found myself needing a new source of analytics. Sentry catches the occassional error but when Sentry stays quiet I get nervous, because how do I know if anyone is still using the website? Luckily Counterscale is a free, performant and privacy-focused solution!
I haven’t looked at my ‘old’ numbers but I have the feeling that there are more page views and visitors than a year ago. Over 4000 visitors and almost 8000 page views seems like a lot! The high number of page views for the CSS Scraper is surprising but according to Google they have been sending more traffic that way so I guess that checks out.
It’ll be fun to an end-of-year summary again although I need to keep track of these numbers myself because they’ll be gone after 90 days.
Updated features
- Removed the resizeable panes from the AST Explorer and Custom Properties Inspector pages. Paneforge is great but for some reason the panes would always collapse on initial page render without a good reason and even worse: no errors logged.
Bug fixes
- Clicking a used property in the custom property inspector sidebar would always scroll and highlight the declared property, not the used one. This is now fixed.
- Guess what? Some of our own custom properties were broken. Using the custom property inspector helped me find and fix them 🙈
- Several unlisted bugs that Sentry caught. Several. Take that from me.
Dependencies
- All of the
@projectwallace
packages are now ESM only for a smaller install size, mostly cutting theirnode_modules
size by 50% - Previously all tests for this website were done by Playwright. Now they’re split into unit tests (Vitest) and end to end tests (Playwright). This makes discovering bugs a little easier because of a better distinction in CI.
- Implemented Stylelint in the repository powering this website. Only a fairly basic config, but helpful nonetheless.
Performance
- Previous release notes mentioned a performance improvement for syntax highlighting blocks of CSS. This is now updated from a arbitrary
setTimeout()
torequestIdleCallback()
if supported by the browser. - The theme switch, navigation popover and CMD+K menu were previously powered by a Melt popover. They’re now fully HTML
popover
elements! Hooray for the web!
There are fewer notes than usual but that’s because the weather here has been very nice and I’ve been doing a ton of gardening and chores around the house. I highly recommend going outside more! After all, this is just a side project. 😉
Popular posts
Making Analyze CSS render 6 times faster
A deep-dive in how the Analyze CSS page renders 6 times faster by applying 2 basic principles.
CSS complexity: it's complicated
There's lots of places in CSS to have complexity, but we tend to focus on selectors most of the time. Let's have a look at other places too.