unicode-range could be minified

[JRaspass]

In order to correctly serve an emoji font only when an emoji is present on a page and to override whatever glyphs exists in the body font (like that horrid b/w teacup) I use the following css:

@font-face {
    font-family: emoji;
    src: local('Apple Color Emoji'),
         local('Noto Color Emoji'),
         local('Segoe UI Emoji'),
         local('Twemoji Mozilla'),
         url(/twemoji.woff2);
    unicode-range: U+2300-23FF,   /* Miscellaneous Technical */
                   U+2600-26FF,   /* Miscellaneous Symbols */
                   U+2700-27BF,   /* Dingbats */
                   U+2B00-2BFF,   /* Miscellaneous Symbols and Arrows */
                   U+1F1E6-1F1FF, /* Regional Indicator Symbols */
                   U+1F300-1F5FF, /* Miscellaneous Symbols and Pictographs */
                   U+1F600-1F64F, /* Emoticons */
                   U+1F680-1F6FF, /* Transport and Map Symbols */
                   U+1F900-1F9FF; /* Supplemental Symbols and Pictographs */
}

body { font: 16px emoji, font, system-ui, -apple-system, sans-serif }

The last property currently minifies to the following:

unicode-range:U+2300-23FF,U+2600-26FF,U+2700-27BF,U+2B00-2BFF,U+1F1E6-1F1FF,U+1F300-1F5FF,U+1F600-1F64F,U+1F680-1F6FF,U+1F900-1F9FF

Based on reading https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range I think we could be smarter. Adjacent ranges could be collapse, so U+2600-26FF,U+2700-27BF → U+2600-27BF and ranges with common start and end digits could be rewritten to use wildcards, so U+2300-23FF → U+23??

What do you think? I like keeping the source code explicit with the names of each range since "emojs" as a concept are so spread out and keep getting added to, in an ideal world we'd have something like w3c/csswg-drafts#4573 but alas not yet.

[tdewolff]

That sounds like a great idea! Thanks for the suggestion.

Is this something you'd like to give a shot at? Note that you'll need https://github.com/tdewolff/hasher to add a new entry to the Hash list.

[JRaspass]

Awesome, I was worried it might be too specific/niche for a general purpose minifier.

If I get a supply of tuits I might take a crack at this, maybe for Hacktoberfest. Thanks.

[tdewolff]

Great, thanks a lot! Let me know if you need any help. I think this would be a perfect addition to the library.

[tdewolff]

@JRaspass if you'll still looking for Hacktoberfest contributions...you'd be welcome to ;-)

[JRaspass]

Ta for the reminder, I should try and sit down and understand your codebase.

If I'm right I think U+2300-23FF → U+23?? should be the easier transform as it only needs to look at the current term rather than looking at adjacent terms? Assuming you minify on a term by term basis and split terms on comma? Or will I just have the whole value of unicode-range as one term?

Basically I need to sit down and play but I might just do one transformation to start with, whichever is easiest.

[tdewolff]

You'll need to add an entry in minifyProperty. I've already added UnicodeRange as a hashed value for unicode-range. You'll get a list of values that should be alternating U+XXXX and commas. You may not even need to parse the U+XXXX part to an integer, you could just check that if 23FF is the last in some range, whether another range starts with 2400 I guess. Let me know if you need any more help.

[JRaspass]

@tdewolff Thanks for doing this, I tested my use-case and your solutions works perfectly. Sorry I never finished the original PR, other stuff kept getting in the way, though looking at 75cef5c vs #344 I can see the solution was a lot more complex than I realised, so great job 👍

[tdewolff]

No worries! Thanks a lot for the effort, it helped in forming this commit!