3 ms·

Very nice tool. Small request. Can you use your knowledge of AST etc. to write another small 60 line script that just counts the amount of style rules in a CSS

Very nice tool. Small request. Can you use your knowledge of AST etc. to write another small 60 line script that just counts the amount of style rules in a CSS file? I have tried this and not been able to do a good job of it, media queries, CSS variables and other things have thrown me off and I think you are coming from a better starting point for this 'simple task'. Lines of code is not a useful metric with CSS and counting rules is not so simple as parsing is really a browser thing.

leeoniya 8y ago
by 'style rules' do you mean selectors or properties/values?
- Theodores 8y ago
  Yes, just the amount of selectors. Properties/values is another metric worth knowing. I think that getting a number for both these metrics in the stylesheets rather than the page currently viewed is more useful if you are working on a site. As well as the stylesheets that are external the rules in an embedded stylesheet are useful. My ideal tool takes a page and gets those metrics from attached stylesheets as well as the inline stylesheets, with inline styles totalled up too. I have had a go at this using DomDocument PHP but took a guess at the rules based on the total count of '{' - terrible hack, but okay for ballpark figures. I would prefer to be able to do it properly, but I have not got anywhere trying to do it the node way. I didn't even know about CSSTree/AST.
  - leeoniya 8y ago
    the main loop [1] already only visits "Rule" blocks, so you can just stick a counter in there, taking care to split combinator selectors on "," as i do, and add them up. [1] https://github.com/leeoniya/dropcss/blob/master/src/dropcss.js#L23-L24 https://github.com/leeoniya/dropcss/blob/master/src/dropcss....
    - Theodores 8y ago
      Brilliant. Bookmarked. Thanks for that. I am going to have a go with that, I found the main problem I was having and that was a failure to actually obtain some stylesheets. The ones that were without the https://domain https://domain at the front were silently being downloaded blank, parsed as blank and therefore not giving expected results. Garbage in, garbage out rather than anything complicated. Sometimes though you expect the harder bits to be wrong, e.g. only finding 'one match per line' due to not having a convoluted enough regex, or something else complicated. I have to work out how to present data too so I will finish that bit off using my simple 'count the {' approach as that is near enough for a rule count, and fast too. However, I am also interested in qualitative analysis to determine if things such as CSS grid is used or if it is all floats, whether CSS variables are used or not and if selectors are all about classes or if there are more advanced ones. I think I really need to get the backend bit cludged together for now but then pick up on your work to take things on to this next level. Sometimes a cludge that is ballpark is useful, presenting information can only really be done when you have something to work with. Any developer can find out the information they need, presenting it to a non technical audience in a succinct way in order to back up an argument is a very different proposition. Believe it or not 'getting the colours right' is a challenge. So imagine I want to convey to some person that shuns code and only cares about pretty pictures that their plans to use this theme or build a Wix/Shopify/Squarespace site is not what they want to be doing. They aren't going to listen to me describing how these easy solutions are not performant. But, with a few pretty graphs and succinct summaries that becomes easier. I think you have given me the pieces of the puzzle that I need to do this. In my own mind I can imagine the bullet points that summarise the key findings. Best get on with it!!! Many thanks.
  - tln 8y ago
    This would be pretty trivial in the Chrome Inspector. Try loading your site, opening the inspector console and running this.. document.styleSheets[0].cssRules.length ..and then work on aggregating all stylesheet rules according to your needs (per stylesheet etc) Then if you want to automate further, take that code and use puppeteer to run it headless. That'll work with single page apps as well, in a way the OP's tool (nice work btw!) and DomDocument in PHP never will.

leeoniya 8y ago

by 'style rules' do you mean selectors or properties/values?

Theodores 8y ago
Yes, just the amount of selectors. Properties/values is another metric worth knowing. I think that getting a number for both these metrics in the stylesheets rather than the page currently viewed is more useful if you are working on a site. As well as the stylesheets that are external the rules in an embedded stylesheet are useful. My ideal tool takes a page and gets those metrics from attached stylesheets as well as the inline stylesheets, with inline styles totalled up too. I have had a go at this using DomDocument PHP but took a guess at the rules based on the total count of '{' - terrible hack, but okay for ballpark figures. I would prefer to be able to do it properly, but I have not got anywhere trying to do it the node way. I didn't even know about CSSTree/AST.
- leeoniya 8y ago
  the main loop [1] already only visits "Rule" blocks, so you can just stick a counter in there, taking care to split combinator selectors on "," as i do, and add them up. [1] https://github.com/leeoniya/dropcss/blob/master/src/dropcss.js#L23-L24 https://github.com/leeoniya/dropcss/blob/master/src/dropcss....
  - Theodores 8y ago
    Brilliant. Bookmarked. Thanks for that. I am going to have a go with that, I found the main problem I was having and that was a failure to actually obtain some stylesheets. The ones that were without the https://domain https://domain at the front were silently being downloaded blank, parsed as blank and therefore not giving expected results. Garbage in, garbage out rather than anything complicated. Sometimes though you expect the harder bits to be wrong, e.g. only finding 'one match per line' due to not having a convoluted enough regex, or something else complicated. I have to work out how to present data too so I will finish that bit off using my simple 'count the {' approach as that is near enough for a rule count, and fast too. However, I am also interested in qualitative analysis to determine if things such as CSS grid is used or if it is all floats, whether CSS variables are used or not and if selectors are all about classes or if there are more advanced ones. I think I really need to get the backend bit cludged together for now but then pick up on your work to take things on to this next level. Sometimes a cludge that is ballpark is useful, presenting information can only really be done when you have something to work with. Any developer can find out the information they need, presenting it to a non technical audience in a succinct way in order to back up an argument is a very different proposition. Believe it or not 'getting the colours right' is a challenge. So imagine I want to convey to some person that shuns code and only cares about pretty pictures that their plans to use this theme or build a Wix/Shopify/Squarespace site is not what they want to be doing. They aren't going to listen to me describing how these easy solutions are not performant. But, with a few pretty graphs and succinct summaries that becomes easier. I think you have given me the pieces of the puzzle that I need to do this. In my own mind I can imagine the bullet points that summarise the key findings. Best get on with it!!! Many thanks.
- tln 8y ago
  This would be pretty trivial in the Chrome Inspector. Try loading your site, opening the inspector console and running this.. document.styleSheets[0].cssRules.length ..and then work on aggregating all stylesheet rules according to your needs (per stylesheet etc) Then if you want to automate further, take that code and use puppeteer to run it headless. That'll work with single page apps as well, in a way the OP's tool (nice work btw!) and DomDocument in PHP never will.