|
| 1 | +--- |
| 2 | +title: Can we have better CSS Coverage ranges, please? |
| 3 | +excerpt: Browers often don't report atrule ranges correctly in the CSS Coverage ranges. |
| 4 | +--- |
| 5 | + |
| 6 | +The last couple of months I've been working hard on improving how we can [inspect](/css-coverage/) what parts of CSS are used by the browser and which parts aren't. There's some stuff I'm doing to [make](https://github.com/projectwallace/css-code-coverage) large coverage reports so you can inspect several pages in one go by combining coverage JSON files into a single one, prettifying all the CSS etc. But there's one thing that is being consistently troublesome for me: |
| 7 | + |
| 8 | +**Browers often don't report atrule ranges correctly.** |
| 9 | + |
| 10 | +'Often' doesn't mean 'always', but more than enough that it has bitten me more than I care to admit. It depends on where in they live and whether neighbouring rules are covered. But take this example that I've created using Playwright's [coverage API](https://playwright.dev/docs/api/class-coverage#coverage-start-css-coverage), but I've observed this in Edge/Chrome as well: |
| 11 | + |
| 12 | +```html |
| 13 | +<!doctype html> |
| 14 | +<html> |
| 15 | + <head> |
| 16 | + <link rel="stylesheet" href="http://localhost/style.css" /> |
| 17 | + </head> |
| 18 | + <body> |
| 19 | + <h1>Hello world</h1> |
| 20 | + <p>Text</p> |
| 21 | + </body> |
| 22 | +</html> |
| 23 | +``` |
| 24 | + |
| 25 | +```css |
| 26 | +/* style.css */ |
| 27 | +@media all { |
| 28 | + h1 { |
| 29 | + color: green; |
| 30 | + } |
| 31 | +} |
| 32 | +@supports (display: grid) { |
| 33 | + h1 { |
| 34 | + font-size: 24px; |
| 35 | + } |
| 36 | +} |
| 37 | +``` |
| 38 | + |
| 39 | +Which parts do you think are marked as covered by the browser? The `@media all {}` rule? Or `@supports (display: grid) {}`. Well yes. No. Both. Neither. Let's look at what the browser/Playwright generates for this: |
| 40 | + |
| 41 | +```js |
| 42 | +let coverage = [ |
| 43 | + { start: 7, end: 11 }, |
| 44 | + { start: 14, end: 37 }, |
| 45 | + { start: 50, end: 66 }, |
| 46 | + { start: 69, end: 95 } |
| 47 | +] |
| 48 | +``` |
| 49 | + |
| 50 | +It doesn't mark the whole stylesheet as covered. Instead there are 4 different ranges. Let's highlight the bits that the browser says are covered, leaving out tabs and newlines for readability: |
| 51 | + |
| 52 | +1. `all ` (Missing `@media ` and opening `{`) |
| 53 | +2. `h1 { color: green; }` |
| 54 | +3. `(display: grid) ` (Missing `@supports ` and opening `{`) |
| 55 | +4. `h1 { font-size: 24px; }` |
| 56 | + |
| 57 | +And both atrule ranges also miss their closing `}`. |
| 58 | + |
| 59 | +## What I want |
| 60 | + |
| 61 | +Can browsers please: |
| 62 | + |
| 63 | +- Include the atrule name in the ranges |
| 64 | +- Include the opening _and_ closing brackets (`{}`) in the ranges |
| 65 | +- Be smart and then mark my example in a _single_ range covering the whole stylesheet |
| 66 | + |
| 67 | +Thanks. |
0 commit comments