css-analyzer
css-analyzer copied to clipboard
projectwallace
Analytics for CSS
Based on @mirisuzanne's talk on CSS Day 2023: - names need conventions, so you'll probably want to audit which container names are present on your site - container names can...
The analysis currently only provide the unique `@layer` names, not any variations of nesting. ```css @layer default { @layer reset, theme; } ``` Would 'unfold' into these ```js { 'default':...
This would be useful, because highlighting a specific node could be done on a per-file basis. Need to figure out whether to concat all input css as a single string,...
Hey @bartveneman I'm working on a project that makes use of the css-analyzer to determine if the designs on a particular page are in alignment with our design tokens. I...
projectwallace.com/analyze-css is capable of scraping inline styles, which means we're not limited to a 3-number specificity tuple (`[0,0,0]`). We could allow a specific selector name that would be recognised as...
- [ ] At-rule Ruleset count - [ ] At-rule declaration count - [ ] At-rule selector count - [ ] At-rule descriptor count - [ ] At-rule total size...
From github.com: ``` font:400 var(--primer-text-title-size-large, 2rem) -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji" ``` reports `2rem` as a font-family With many more similar examples.
These are some numbers that I found in the wild that may help improve performance by testing how the analyzer behaves on large data sets. | site | LoC |...
CSSTree has [syntax matching](https://twitter.com/csstree/status/1632496974921342976) which is really reliable and saves a lot of code. It might be a bit slower on the runtime, but that's probably worth it. ```js csstree.walk(ast,...