Bart Veneman

@veneman.dev

663 Followers 137 Following

Webmaster of Project Wallace, the best CSS analyzer out there - https://www.projectwallace.com. I can lift node_modules twice my own weight. He/him. veneman.dev

Lightningcss playground. Two panels: input and output. Input panel shows a single ruleset with one selector and one declaration for `mask-image` with a value of some data-url. The output panel shows one rule with two declarations: two times mask-image, one of them vendor prefixed. Both of the declarations have the full data-url embedded. The output fills the entire picture.
A CSS media query: `@media (min-width: 31.25em) and (max-width: 46.24em) and (min-width: 46.25em)`
3 columns. Column 1 contains several radio buttons for presets (Recommended, Correctness, Performance, Maintainability, Design tokens, Holistic). Maintainability is selected. Column 2 contains a code block with a lot of CSS. Line 309 is highlighted. It contains this CSS: `-webkit-text-decoration-color: var(--netlify);` The property name is highlighted. Column 3 contains a big table of stylelint issues. The top row is selected. It states 'Property "-webkit-text-decoration-color" is vendor-prefixed and is not allowed'.
A woman sitting on a bench, seen from the back. She is wearing a black shirt with a large print. The print is 3 lines of big, bold text saying "chaotic style sheets". On top of that a graffiti-lime text in bright pink is shown, saying "project wallace".
Project Wallace webpage with title "Lint CSS". Shows a form with url input and submit button. alwaystwisted.com is analyzed. Below form is a large panel with 3 columns. Column 1 shows which preset (recommended) is selected. Second column shows the scraped CSS, with highlighted lines for all issues. Third column shows all the stylelint issues found on that URL.
Me, wearing a black shirt with white and pink text
The front and back of a Sony Ericsson W810i
Black shirt with white text: chaotic style sheets. On top of that, green text in graffiti font: project wallace.
A black t-shirt viewed from the back side. It has bit, fat, white text all over the back saying "chaotic style sheets". Over that white text are the words "project wallace" in a slightly comedic font in bright green-ish.
Screenshot of a stylelint rule's readme called no-pseudo-elements-in-is-where.
project wallace's code quality page showing 100 out of 100 points for all metrics
Excerpt of the latest web weekly. One section about CSS shorthands at the top contains a quote "... I'm a big believer in more explicit code ...". The section underneath shows a CSS snippet with exactly two CSS properties, both of which are shorthands.
CodePen test case. two keyframes in CSS, both with quoted name in the at-rule prelude. Test one uses that quoted name in the animation property, test 2 uses the unquoted name. Result shows that both approaches work.
OG image for the stylelint plugin. Title: Project Wallace - Stylelint plugin. Subtext: A stylelint plugin that checks the complexity, design tokens, maintainability and correctness of your CSS.
A black shirt with a print on the chest. The print is a hand-drawn line drawing in white lines. It shows the letters CSS in an almost heart-like shape in a bold distorted font. Two hands are holding the letters. Around it are a space rocket, a bunny think about an ID selector, a robot wondering about projectwallace.com, a coffee mug, etc. etc.
Terminal output of CSS code coverage. The bottom of the report says: Finished in 219ms on 4,018 JSON files containing 53 stylesheets with 6,344 lines of CSS in total. Success: total line coverage is 94.74% Success: all files pass minimum line coverage of 66.00%
Stylelint playground with some gnarly CSS. Stylelint shouts loudly with errors based on projectwallace/stylelint-plugin
A page on project wallace that shows 3 panes. First pane shows 3 radio buttons for Preset option: recommended, performance and none. Second pane shows a CSS input field with some CSS in it. Third pane shows stylelint output with 7 errors, ranging from unreachable media query states and impossible z-index.
Readme of the `no-duplicate-data-urls` stylelint rule readme. It shows the following markdown: # No duplicate data URLs Disallow the same data URL from being used more than once. <!-- prettier-ignore --> ```css thing { -webkit-mask-image: url(data:image/svg+xml,...); mask-image: url(data:image/svg+xml,...); /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ } ``` Repeating a large data URL increases file size unnecessarily. Store the data URL in a custom property once and reuse it with `var()`. ## Options ### `true` The following are considered problems: <!-- prettier-ignore --> ```css thing { -webkit-mask-image: url(data:image/svg+xml,%3Csvg%3E%3C/svg%3E); mask-image: url(data:image/svg+xml,%3Csvg%3E%3C/svg%3E); } ``` The following patterns are _not_ considered problems: <!-- prettier-ignore --> ```css :root { --icon: url(data:image/svg+xml,%3Csvg%3E%3C/svg%3E); } thing { -webkit-mask-image: var(--icon); mask-image: var(--icon); } ```
Project Wallace layer analysis highlighting the base layer where it's only defined in a range of layers, but no lines of usage found.
Partial output of a stylelint CI job. There are dozens of warning for 'custom property X was defined but never used" and 'selector complexity of "X" is 10 which is higher than the allowed maximum of 5'.
Homepage headline screenshot of projectwallace.com. It says: "Your CSS has dirty secrets and Wallace knows them"
Part of a github bug report. Expected output shows a CSS atrule in full. Actual output shows the same atrule but atrule name, opening { and closing } are missing.
Project Wallace homepage. A hero banner says "Your css has dirty secrets and Wallace knows them" against a mostly dark gray background.
9 panels densely packed, but one of the panels has a clear visual clue that it's currently selected/active.
The same data as in the previous screenshot: 10 panels in screen but now every thing is tucked in nicely in a pretty dense view with very little space between them, only the grid gaps.
Partial view of Project Wallace's CSS analysis page. It shows 10 panel-like elements in 2 rows, 5 panels per row. Each panel differs in height, with big differences. Between the first and second row is a lot of 'wasted' whitespace because the very first column is very tall.
A CSS snippet with this code: `textarea { @media print { field-sizing: content; } }`.
Analytics page from project wallace showing chrome versions ranging from 42 to 59 and two top countries being US and Singapore
Code screenshot of this CSS: `.markdown > :is(p, #ID-HACK) {}`
Polypane banner from The CSS Selection
Partial view of a GitHub Pull Request page, with the status checks and "Squash and merge" button visible.
Partial screenshot of a blog post that announces The CSS Selection
the same image as before but the stats at the bottom are larger and use more of the available room within the card
A social media preview image, or card. The title is "The CSS Selection". Subtitled: "The state of real-world CSS usage, 2026 edition". The bottom shows some stats: 100+ metrics, 100,000 websites, 41% use :has(), 9.61% use @container. The design shows a bright grean/teal outline and a dark background with a dark-green to dark-gray gradient from top to bottom. There are two seemingly random rectangular shapes in the top right, probably visual decoration.
President Obama decorating himself with a medal.
Visual representation of the 37 levels of CSS nesting using the actual CSS source code. The code is unreadable because it's zoomed out but the image clearly shows an endless list of deeper and deeper indented block of code, indentation growing with each line.
Excerpt of specificity table. It shows the top ~20 specificites ranging from 14,143,15 to 146,1544,160
A macbook completely covered in small stickers. Each sticker is the word CSS in a grunge typeface repeated 3 times underneath each other. The apple logo is still visible.
Excerpt from an article. It shows analysis about CSS usage. There are graphs about the use of comments and embedded content in CSS.
​Table showing browserhacks in @supports
Table of most used property browserhacks. `*zoom` takes the numer one spot with 9.38% of websites using it.
Common layer names in a bar chart: components, base, legacy, utilities, theme, etc.
CSS color format usage in a bar chart.
A table showing color format usage across 27,181 websites. It shows 6-decimal hex color is used on 96% of websites, with hex3, rgba(), transparent, rgb(), hex8 and named color s following. Shoutout to the folks writing their hexadecimal colors with 14, 16, 19, 21, 18, 30, 28, 15 and 13 decimals. Stay weird, people.
A large data table with 30-ish CSS metrics from 23000 websites.
A table showing min, max, mode, median and several percentiles for a dozen CSS metrics. It shows that 21000 websites were analyzed.
A portion of counterscale analytics. It is filtered to a single url, a blog post about css imports. There are no referrers, all visitors use chrome and they come from Argentina, Brazil, Turkey and Chile.
CSS in an editor. The CSS: @layer what { @container (width > 0) { ul:has(:nth-child(1 of li)) { @media (height > 0) { &:hover { --is: this; } } } } }
A termina l showing 27 lines of CSS. All lines have a line number in red with a fat minus symbol at the start, indicating that these lines are not covered. The lines of CSS are brightly colored against the black background. Selectors are green, properties cyan, values are white, atrule names bright blue and atrule preludes are magenta.
Git diff showing a dynamic import changed from `import('css-tree/package.json', { assert: { type: 'json' }` to `import('css-tree/package.json', { with: { type: 'json' }`
Build warnings from lightningcss, most of which say: "'highlight' is not recognized as a valid pseudo-element. Did you mean ':highlight' (pseudo-class) or is this a typo?"
Project Wallace CSS Coverage CLI tool showing 2 successes: global line coverage is higher than the configured 80% and all files meet the per-file coverage threshold of 62%. Below that is shows an excerpt of a CSS file with markings for the lines that are not covered.
Project Wallace CSS Coverage CLI tool showing 2 failures: global line coverage is lower than the configured 90% and 4 files don't meet the per-file coverage threshold of 70%. Below that is shows an excerpt of a CSS file with markings for the lines that are not covered.
Counterscale website analyitcs. It shows the last 24 hours with only traffic originating form (reportedly) Singapore. The bounce rate shows 100%. 615 visitors, 618 page views.
Web page from Project Wallace. The title is "CSS Code Coverage Inspector". On top of the page, below the main navigation, is a file select area, looking like a sort of thing where you could drag and drop files, but also pick files manually by clicking the "Browse..." button. It currently says "No files selected".
A terminal showing this: Checking 211 files... Analyzed 3309 coverage entries Success: line coverage is 0.89 Failed: Not all files meet the minimum line coverage of 0.7: - https://projectwallacecom-17odovju6-project-wallace.vercel.app/_app/immutable/assets/Meter.lNW2i1FX.css Coverage: 0.63 - https://projectwallacecom-17odovju6-project-wallace.vercel.app/_app/immutable/assets/17.dDN0iyBr.css Coverage: 0.69 - https://projectwallacecom-17odovju6-project-wallace.vercel.app/_app/immutable/assets/11.CYFb5tM-.css Coverage: 0.68
Terminal output showing CSS Coverage data. I starts with checking 211 files, then analyzing 3309 coverage entries. It then shows a success message that the coverage is 0.89. Below that is a report of every not-covered bit of CSS. For each block it shows the uncovered line numbers in red and 3 lines before and after the block for additional context.