5 ms·

I think it'd be a lot more interesting if you could feed it information about how often each rule is used. For example, add some code to your live site that pe

I think it'd be a lot more interesting if you could feed it information about how often each rule is used. For example, add some code to your live site that periodically samples the DOM from a random subset of real user - for every element that's actually visible on the page, see what style rules apply to it. Count those up and get a big histogram. Then let that feed into the compression. The least-used style rules on obscure pages should be the most compressed. Find a way to have those "reuse" other style rules that are close enough. Your most important content would be the least degraded.

nathell 3y ago
Author here – thanks! This is an interesting avenue of exploration that I hadn’t thought about. Exactly the kind of feedback I hoped for. I’ll try and give it a shot.
muzamil-ali 3y ago
[flagged]
- wtallis 3y ago
  Are you a bot that just rewrites the comments you're replying to?
  - codetrotter 3y ago
    Probably someone using OpenAI with a prompt that says to respond as a Hacker News user
  - muzamil-ali 3y ago
    Sorry, I replied to the wrong comment
    - wtallis 3y ago
      Still failing the Turing test.
no_wizard 3y ago
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
dclowd9901 3y ago
I’ve had this same thought for creating better chunking. There needs to be some sort of measuring component.

nathell 3y ago

Author here – thanks! This is an interesting avenue of exploration that I hadn’t thought about. Exactly the kind of feedback I hoped for. I’ll try and give it a shot.

muzamil-ali 3y ago

[flagged]

wtallis 3y ago
Are you a bot that just rewrites the comments you're replying to?
- codetrotter 3y ago
  Probably someone using OpenAI with a prompt that says to respond as a Hacker News user
- muzamil-ali 3y ago
  Sorry, I replied to the wrong comment
  - wtallis 3y ago
    Still failing the Turing test.

no_wizard 3y ago

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

dclowd9901 3y ago

I’ve had this same thought for creating better chunking. There needs to be some sort of measuring component.