- From: Rick Viscomi via GitHub <sysbot+gh@w3.org>
- Date: Mon, 11 Jul 2022 16:23:30 +0000
- To: public-css-archive@w3.org
Thanks @SebastianZ that was helpful.
Here's the query I came up with:
```sql
# Warning: this query consumes 3.83 TB, which costs ~$20.
CREATE TEMP FUNCTION HAS_MIXED_ARGS(fn STRING) RETURNS BOOL LANGUAGE js AS r'''
let args = fn.match(/\(\s*(.*)\s*\)/);
if (!args) {
return null;
}
args = args[1].split(/[,\s/]+/).slice(0, 3);
if (args.length < 3) {
return null;
}
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)
```
_(I'd appreciate if someone double checked my regular expressions. I know these types are a lot more complex, but I went with a simpler definition since I assume it will account for most usage. Also note that this approach doesn't evaluate custom properties.)_
2,390,213 pages (30% of all pages in the dataset) include a color function that mixes `<number>` and `<percentage>` types. This appears to be primarily driven by stylesheets included with WordPress plugins, which tend to mix types in the `hsla` function, eg [`background:hsla(0,0%,100%,.3);`](https://c0.wp.com/c/6.0/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css). Other CMSs like Squarespace and Shopify use this pattern as well.
Color function breakdown:
fn | pages
-- | --
hsla | 2,352,227
hsl | 82,635
rgb | 3,308
rgba | 1,083
hwb | 11
Examples:
```css
hsla(0,0%,62%,.7)
hsla(0,0%,66%,.5)
hsla(0, 0%, 100%, var(--tor-border-opacity, 1)
hsl(40, 95%, 76%)
hsl(211, 100%, 85%)
hsl(170.8, 100%, 70%)
rgb(255 255 51%)
rgb(255 47 11.25%)
rgb(232 181 3.42307692%)
rgba(0,0%,0%,6%)
rgba(0,103%,143%,35%)
rgba(120,100%,75%,.3)
hwb(240 15% 83%)
hwb(0 100% 0%)
hwb(204 94% 0%)
```
Top 10 colors:
color | pages
-- | --
hsla(0,0%,100%,.5) | 1,199,422
hsla(0,0%,100%,.3) | 1,164,973
hsla(0,0%,100%,.4) | 1,052,097
hsla(0,0%,100%,.8) | 800,744
hsla(0,0%,100%,.9) | 740,812
hsla(0,0%,100%,.6) | 625,127
hsla(0,0%,100%,.1) | 466,094
hsla(0,0%,100%,.2) | 451,834
hsla(0,0%,8%,.5) | 451,003
hsla(0,0%,93.3%,.9) | 414,776
Top 10 stylesheets:
url | pages
-- | --
https://c0.wp.com/c/6.0/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css | 54,866
https://onesignal.com/sdks/OneSignalSDKStyles.css?v=2 | 41,817
https://c0.wp.com/p/jetpack/11.0/css/jetpack.css | 39,467
https://static.parastorage.com/services/chat-widget/1.2290.0/chat-widget.min.css | 31,153
https://static.parastorage.com/services/chat-widget/1.2290.0/expanded-widget.chunk.min.css | 30,437
https://assets.squarespace.com/universal/styles-compressed/commerce-712187450e7fc15b937be-min.en-US.css | 25,287
https://code.jivosite.com/css/9cb05c5/widget.css | 25,085
https://code.jivo.ru/css/9cb05c5/widget.css | 22,637
https://c0.wp.com/c/5.9.3/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css | 21,792
https://static.parastorage.com/services/pro-gallery-santa-wrapper/1.2629.0/staticCss.min.css | 20,305
Top 10 stylesheet hosts:
host | pages
-- | --
c0.wp.com | 97,929
s0.wp.com | 72,357
static.parastorage.com | 63,244
onesignal.com | 41,855
assets.squarespace.com | 31,137
cdn.shopify.com | 29,540
code.jivosite.com | 27,960
code.jivo.ru | 24,225
static.xx.fbcdn.net | 19,840
static.tacdn.com | 18,344
I saved the results to the `httparchive.scratchspace.css_color_mixed_types` table. It's 6.8 GB so much faster and cheaper to query, if anyone else wanted to dig in.
--
GitHub Notification of comment by rviscomi
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7338#issuecomment-1180614318 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 16:23:32 UTC