3 ms·

Using playwright you can get coverage for your used CSS on each page. It’s straightforward to build into E2E tests. Chrome will also tell you which rules were u

Using playwright you can get coverage for your used CSS on each page. It’s straightforward to build into E2E tests. Chrome will also tell you which rules were used on any given page. That in turn could give guidance for how you could pattern match rules even further

simlevesque 3y ago
That's really not as simple as you make it sound. Chrome and Playwright record the rules that were used, but if you don't trigger every media query, a lot of useful CSS will be flagged as useless. Also your playwright test needs to hover every element which has a :hover rule and print css will be discarded. You also have to keep in mind that Chrome isn't the only browser, some browser specific css will be ignored. Another example is if you have rules like :nth-child() on a list of results and the html you test it with doesn't have that element right now but an api call might return more result later. These css rule won't get counted. Also there are some false positives, for example if you set a variable twice and only read it later, then both variable declaration are marked as used while the first one was never read and is therefore useless. There's to my knowledge no tool that automates this process. I wish there was one. The only one I found is doei [1] but it's not finished and it just tries on a couple of hardcoded media queries. It's far from a simple problem but I'm sure someone can do it. [1] https://github.com/JamieMason/doei https://github.com/JamieMason/doei
teaearlgraycold 3y ago
Tailwind does this through analysis of the source. Not sure why you'd need to do dynamic analysis. You want to spin up a Chrome browser on each build to occasionally shave off a few bytes from a gzip stream?
- no_wizard 3y ago
  My genuine thought was using it to establish some approximation of how you could with further accuracy compress / merge styles tighter for greater re-use

simlevesque 3y ago

That's really not as simple as you make it sound. Chrome and Playwright record the rules that were used, but if you don't trigger every media query, a lot of useful CSS will be flagged as useless. Also your playwright test needs to hover every element which has a :hover rule and print css will be discarded. You also have to keep in mind that Chrome isn't the only browser, some browser specific css will be ignored. Another example is if you have rules like :nth-child() on a list of results and the html you test it with doesn't have that element right now but an api call might return more result later. These css rule won't get counted. Also there are some false positives, for example if you set a variable twice and only read it later, then both variable declaration are marked as used while the first one was never read and is therefore useless. There's to my knowledge no tool that automates this process. I wish there was one. The only one I found is doei [1] but it's not finished and it just tries on a couple of hardcoded media queries. It's far from a simple problem but I'm sure someone can do it. [1] https://github.com/JamieMason/doei https://github.com/JamieMason/doei

teaearlgraycold 3y ago

Tailwind does this through analysis of the source. Not sure why you'd need to do dynamic analysis. You want to spin up a Chrome browser on each build to occasionally shave off a few bytes from a gzip stream?

no_wizard 3y ago
My genuine thought was using it to establish some approximation of how you could with further accuracy compress / merge styles tighter for greater re-use