Bart Veneman

@veneman

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

137 Folgt676 Follower1.032 Posts

Bluesky

Ist das dein Profil?Übernimm es — dann gehört dir veneman.dirty.social.Profil übernehmen

Bart Veneman@veneman· 5h

Mixing web-features with wallace's CSS analysis and you get... a new tool for CSS archeologists! h/t @patrickbrosset.com for pointing me to github.com/web-platform...

A bar chart titles "Widely available, by year". There are 12 columns for the years 2018 through 2026 and "not yet widely", "not baseline" and "untracked". The bars for these last three are grayed out.

Values per item:

2018: 3560
2019: 1818
2020: 107
2021: 9
2022: 182
2023: 222
2024: 120
2025: 58
2026: 10
not yet widely: 8
not baseline: 49
untracked: 671

Bart Veneman@veneman· 16h

Trying out a new typeface. I think it works really well for headings. It's too wide for buttons, so I'll have find a solution for that.

Wallace's Analyze CSS form. The title is in a very pretty pixelated font.

Bart Veneman@veneman· 3d

Ahwyeeaaah :sexy-dance.gif:

Project Wallace stylelint overview. There are three errors. 1 is for an `if()` that contains only an `else` branch. 2 is for an `if()` without an `else`. 3 is for an `else` that isn't the last condition in the `if()`.

Bart Veneman@veneman· 3d

But, the good part: I'll be able to add a new stylelint rule to disallow using `else` anywhere but the end of a rule!

MDN example code, showing `else` as the first condition in a css if:

```css
div {
background-image: if(
else: none;
style(--scheme: ice): linear-gradient(#caf0f8, white, #caf0f8);
style(--scheme: fire): linear-gradient(#ffc971, white, #ffc971)
);
}
```

Bart Veneman@veneman· 8d

Had to look up my own usage of pseudos, but found a good one! Was just in time to be #99!

Project Wallace CSS analysis output showing two panels side by side. The first one contains a list of 20 unique pseudo-classes, he second panel contains a list of 15 pseudo-elements.

Bart Veneman@veneman· 13d

And I need this in my room for good vibes.

An LED neon-like light in the shape of a small hairy cow sitting down.

Bart Veneman@veneman· 17d

Also, look at these stats: bounce rates nearing 100%, lots of agents visiting, but no human interaction or feedback. Everything lacks joy.

A 90 day website stats chart. A slight upward trend visible for visitors, page views and bounce rate.

Bart Veneman@veneman· Jul 20

Wouldn't it be cool if CSS minifiers would create a custom property for the data-url and then reuse that instead of inline the big data-url in the result twice? lightningcss.dev/playground/i...

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.

Bart Veneman@veneman· Jun 28

You're not going to believe this, but I just found out that this is a real-world problem. At least for one of the major 🇳🇱 NL newspapers.

A CSS media query: `@media (min-width: 31.25em) and (max-width: 46.24em) and (min-width: 46.25em)`

Bart Veneman@veneman· Jun 24

Dogfooding the stylelint plugin* and webpage, and coming across a `text-decoration-color` property that's vendor prefixed 3 times by Lightningcss... * I _will_ ship some day!

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

Bart Veneman@veneman· Jun 18

A couple of months ago @ohhelloana.blog was complaining about the lack of choice in women's wear in developer clothing. I agree. Made this. My wife wears it now and it's *really* nice.

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

Bart Veneman@veneman· Jun 15

Stu, you'll love this upcoming page on project wallace. Makes digging a lot quicker.

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.

Bart Veneman@veneman· Jun 10

🔥

Me, wearing a black shirt with white and pink text

Me wearing a black shirt with white and green print. Also wearing a cap with the same print

Bart Veneman@veneman· Jun 9

How is this not the best phone you've ever seen

The front and back of a Sony Ericsson W810i

Bart Veneman@veneman· Jun 7

Was inspired by someone's shirt at the lunch restaurant this morning but now I'm hoping these will arrive in time before CSS Day. Even ordered some extra for my kids who absolutely love them!

Black shirt with white text: chaotic style sheets. On top of that, green text in graffiti font: project wallace.

Black shirt with white text: chaotic style sheets. On top of that, bright pink text in graffiti font: project wallace.

Bart Veneman@veneman· Jun 7

Gonna walk around in this and call my self the Prince of Chaotic Style Sheets.

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.

Bart Veneman@veneman· Jun 2

It has been 0 days since I tried `:is(::before, ::after)` So I made it a lint rule, because that's my thing now.

Screenshot of a stylelint rule's readme called no-pseudo-elements-in-is-where.

Bart Veneman@veneman· Jun 1

project wallace approves of this

project wallace's code quality page showing 100 out of 100 points for all metrics

Bart Veneman@veneman· May 26

Stefan, I'm so, so, so, so deeply sorry about this. Oh, the irony 😂

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.

Bart Veneman@veneman· May 22

TIL you can quote your `@keyframes` 🤨

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.

Bart Veneman@veneman· May 20

Stealing as many good ideas from Daniel Yuschik's defensive-css stylelint plugin as I can.

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.

Bart Veneman@veneman· Apr 14

Man, drawing is hard. But this is the sort of vibe I want to go for. Going to tap into my network to find a local designer person to make this work.

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.

Bart Veneman@veneman· Apr 6

Added a metadata message to the css coverage reporter to get a feel for performance and it's cool and I saw the OXC folks do it. Had no idea that my own playwright suite would generate 4000+ JSON files. Well. It doesn't. There a bug somewhere, there were 'only' 247 (=== # of tests). Still cool!

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%

Bart Veneman@veneman· Mar 28

Stylelint's playground is nice for some toying around. Still tweaking code and error messages.

Stylelint playground with some gnarly CSS. Stylelint shouts loudly with errors based on projectwallace/stylelint-plugin

Bart Veneman@veneman· Mar 25

Progress! Really enjoying this but also keep finding new issues, error messages to polish.

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.

Bart Veneman@veneman· Mar 25

Stumbled across this issue while auditing a website earlier this week. Immediately made it a new rule for my upcoming stylelint-plugin. That thing is going to be *packed* with goodies.

$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.  ```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:  ```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:  ```css :root { --icon: url(data:image/svg+xml,%3Csvg%3E%3C/svg%3E); } thing { -webkit-mask-image: var(--icon); mask-image: var(--icon); } ```$

Bart Veneman@veneman· Mar 23

Nice post! Just a heads up, your `base` layer seems only defined and never used and there are some unintended custom properties. 🤫 But it looks so nice, it's been a while since I had last visited!

Project Wallace layer analysis highlighting the base layer where it's only defined in a range of layers, but no lines of usage found.

CSS from the speakers list of the website, but the font-size property tries to use a custom property called `14px` which doesn't exist.

Project Wallace's custom propety inspector showing there is a property called --_sidebar-color and later on a var tires to use the non-existent --sdiebar-color

Bart Veneman@veneman· Mar 21

OH BOY!! (I also *really* need to step up my custom property naming conventions)

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

Bart Veneman@veneman· Mar 18

Homepage headline screenshot of projectwallace.com. It says: "Your CSS has dirty secrets and Wallace knows them"

Bart Veneman@veneman· Mar 9

Finally mustered up the energy to make a repro for Playwright for its strange CSS coverage issues: github.com/microsoft/pl... Blogged back in October www.projectwallace.com/blog/better-...