Re: [csswg-drafts] [css-color-5] Allow use of 0 with <percentage> color components (#7338)

Thanks for the guidance @dbaron and @SebastianZ. Here's a revised approach that only looks at params 2 and 3 for `hsl()`, `hsla()`, and `hwb()`. Does this look better to you?

```sql
# Warning: this query consumes 3.83 TB, which costs ~$20.
CREATE TEMP FUNCTION HAS_MIXED_ARGS(value STRING) RETURNS BOOL LANGUAGE js AS r'''
let match = value.match(/(\w+)\(\s*(.*)\s*\)/);
if (!match) {
  return null;
}

let fn = match[1];
let args = match[2].split(/[,\s/]+/).slice(0, 3);
if (args.length < 3) {
  return null;
}

if (!fn.startsWith('rgb')) {
  // The first arg can be numeric and it not be mixed, so ignore.
  args = args.slice(1, 3);
}

return args.some(arg => arg.match(/^[\d.]+$/)) && args.some(arg => arg.match(/^[\d.]+%$/));
''';

CREATE OR REPLACE TABLE `httparchive.scratchspace.css_color_mixed_types` AS
SELECT
  page,
  url,
  color
FROM
  `httparchive.almanac.summary_response_bodies`,
  UNNEST(REGEXP_EXTRACT_ALL(body, r'\b((?:rgba?|hsla?|hwb)\([^\)]+\))')) AS color
WHERE
  date = '2022-06-01' AND
  client = 'mobile' AND
  type = 'css' AND
  HAS_MIXED_ARGS(color)
```

This time only 7,625 pages are detected as having mixed types. The majority of these are subdomains of substack.com.

Color function breakdown:

fn | pages
-- | --
rgb | 3,308
hsla | 3,063
rgba | 1,082
hsl | 194
hwb | 1

Examples:

```css
rgb(101 119 6.7%)
rgb(255 77 3.95%)
rgb(101 119 8.93333333%)
hsla(0,0,80%,.15)
hsla(0,0,100%,.35)
hsla(0, 0, 100%, 0)
rgba(0,0%,0%,10%)
rgba(0,0%,0%,40%)
rgba(0,0%,0%,6%)
hsl(334,29, 76%, 85%)
hsl(var(--theme-button--color,0,0%,100%)
hsl(0deg 0 54%)
hwb(0 0 100%/.2)
```

Top 10 colors:

color | pages
-- | --
rgb(101 119 8.93333333%) | 2,191
rgb(101 119 6.7%) | 2,191
hsla(0,0,100%,.8) | 1,083
rgb(0 0 0%) | 719
rgba(0,0%,0%,10%) | 539
hsla(0,0,100%,.5) | 427
hsla(0,0,100%,.75) | 427
hsla(0,0,100%,.9) | 351
hsla(0,0,100%,.3) | 258
rgba(0,0%,0%,6%) | 257

Top 10 stylesheets:

url | pages
-- | --
https://substackcdn.com/theme/main.css?v=f5b1fe705c81d1960b9f63dd4eac851c | 771
https://substackcdn.com/theme/main.css?v=1cd9b86b3eea08483c07544e4be2bfc8 | 548
https://substackcdn.com/theme/main.css?v=cdf0335dd84f37b2eb1f77675b26822e | 445
https://uiassets.izmocars.com/izmo/4_0/css/forms/formbuilder.css?v=319 | 240
https://substackcdn.com/theme/substack.css?v=9e1dbecd54d5f0e3b4c0356b492ccfdf | 125
https://substackcdn.com/theme/substack.css?v=f8372c55e60eb842bff70d9d4be72b1d | 87
https://static.zdassets.com/classic/assets/zendeskgarden_modals-48f7485d39033cb19f3b25119107c2a9242b166108252e10f0023f1b2b20eb7a.css | 86
https://static.zdassets.com/classic/assets/zendeskgarden_button-f46b8c2020555512d4cff7c4b28c5ad5fdef859a7560162b45aaa5bd7e55dd28.css | 86
https://substackcdn.com/theme/substack.css?v=81b8c8d305de0d09f5a6b485f9bc95b8 | 71
https://substackcdn.com/theme/main.css?v=51254473aa7c4262de2382a4a2809638 | 70

Top 10 stylesheet hosts:

host | pages
-- | --
substackcdn.com | 2,191
uiassets.izmocars.com | 240
irp.cdn-website.com | 141
static.zdassets.com | 86
www.kinoheld.de | 81
cdn.myshoptet.com | 50
resources.kvikymart.space | 48
static.zdravotniregistr.cz | 42
static.modernilekar.cz | 39
static.narodnizdravotniregistr.cz | 38

-- 
GitHub Notification of comment by rviscomi
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7338#issuecomment-1180912730 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 11 July 2022 22:01:54 UTC