css-analyzer
css-analyzer copied to clipboard
projectwallace
Analytics for CSS
From cssday.nl ```css body { font: 100% Source Code Pro, Inconsolata, Menlo, monospace; } ``` Expected: - `font-size: 100%` - `font-family: Source Code Pro, Inconsolata, Menlo, monospace` Actual: - `font-size:...
The web almanac uses custom property depth to calculate its complexity https://almanac.httparchive.org/en/2022/css#complexity ```css :root { --base-hue: 335; /* depth = 0 */ --base-color: hsl(var(--base-hue) 90% 50%); /* depth = 1...
- Colors https://github.com/projectwallace/css-analyzer/blob/master/src/values/colors.js#L3-L200 - CSS Value keywords https://github.com/projectwallace/css-analyzer/blob/master/src/values/values.js#L4-L12
```css box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); ``` is reported as 2x `0 0 #0000`
Refs #357 Some bugs could/can be prevented if we implement type checking and verifying that we're always passing around nodes.
- [ ] Wait for CSSTree to release their next version & update package.json - [ ] Figure out why some Smoke tests suddenly have extra Selectors
See https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport.html Some of the smoke tests use it, so probably useful to report them. ```css // cnn @-ms-viewport{width:extend-to-zoom;zoom:1} // gazelle @-ms-viewport{width:device-width} // trello @-ms-viewport { width: device-width } //...
Now that [CSS-Tree supports nesting](https://github.com/csstree/csstree/releases/tag/v2.3.0) we can support the following metrics: - [x] ~Atrules metrics for `@nest`~ - [ ] Selector complexity + specificity for ~`@nest` and~ `& .selector` -...
From [Adam Argyle's CodePen](https://cdpn.io/pen/debug/OJoYwgx): ```css @import "https://unpkg.com/open-props" layer(base); @import "https://unpkg.com/open-props/normalize.min.css" layer(base); @import "https://unpkg.com/open-props/oklch-hues.min.css" layer(base); @import "https://unpkg.com/open-props/gray-oklch.min.css" layer(base); ``` I'd expect `base` to be a layer name, but currently no layers...