Skip to content

Commit 7f64dad

Browse files
xercxerc
committed
[OPT] legacy/modern colors
1 parent d8551d9 commit 7f64dad

File tree

1 file changed

+35
-46
lines changed

1 file changed

+35
-46
lines changed

‎src/CSS.php‎

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -316,8 +316,8 @@ public function execute($path = null, $parents = array())
316316
$css = $this->replace($css);
317317

318318
$css = $this->stripWhitespace($css);
319-
$css = $this->cleanupNEWColors($css);
320-
$css = $this->shortenRGBColors($css);
319+
$css = $this->convertLegacyColors($css);
320+
$css = $this->cleanupModernColors($css);
321321
$css = $this->shortenHEXColors($css);
322322
$css = $this->shortenZeroes($css);
323323
$css = $this->shortenFontWeights($css);
@@ -483,7 +483,8 @@ protected function move(ConverterInterface $converter, $content)
483483

484484
/**
485485
* Shorthand HEX color codes.
486-
* #FF0000 -> #f00 -> red
486+
* #FF0000FF -> #f00 -> red
487+
* #FF00FF00 -> transparent
487488
*
488489
* @param string $content The CSS content to shorten the HEX color codes for
489490
*
@@ -492,14 +493,14 @@ protected function move(ConverterInterface $converter, $content)
492493
protected function shortenHexColors($content)
493494
{
494495
// shorten repeating patterns within HEX ..
495-
$content = preg_replace('/#([0-9a-f])\\1([0-9a-f])\\2([0-9a-f])\\3(?:([0-9a-f])\\4)?/i', '#$1$2$3$4', $content);
496+
$content = preg_replace('/(?<=[: ])#([0-9a-f])\\1([0-9a-f])\\2([0-9a-f])\\3(?:([0-9a-f])\\4)?(?=[; }])/i', '#$1$2$3$4', $content);
496497

497498
// remove alpha channel if it's pointless ..
498-
$content = preg_replace('/#([0-9a-f]{6})ff/i', '#$1', $content);
499-
$content = preg_replace('/#([0-9a-f]{3})f(?=[^\w])/i', '#$1', $content);
499+
$content = preg_replace('/(?<=[: ])#([0-9a-f]{6})ff(?=[; }])/i', '#$1', $content);
500+
$content = preg_replace('/(?<=[: ])#([0-9a-f]{3})f(?=[; }])/i', '#$1', $content);
500501

501-
#// replace `transparent` with shortcut ..
502-
#$content = preg_replace('/#[0-9a-f]{6}00/i', '#fff0', $content);
502+
// replace `transparent` with shortcut ..
503+
$content = preg_replace('/(?<=[: ])#[0-9a-f]{6}00(?=[; }])/i', '#fff0', $content);
503504

504505
$colors = array(
505506
// make these more readable
@@ -556,7 +557,7 @@ protected function shortenHexColors($content)
556557
);
557558

558559
return preg_replace_callback(
559-
'/('.implode('|', array_keys($colors)).')/i',
560+
'/(?<=[: ])(' . implode('|', array_keys($colors)) . ')(?=[; }])/i',
560561
function ($match) use ($colors) {
561562
return $colors[strtolower($match[0])];
562563
},
@@ -565,29 +566,30 @@ function ($match) use ($colors) {
565566
}
566567

567568
/**
568-
* Shorthand RGB color codes.
569+
* Convert RGB|HSL color codes.
570+
* rgb(255,0,0,.5) -> rgb(255 0 0 / .5).
569571
* rgb(255,0,0) -> #f00.
570572
*
571573
* @param string $content The CSS content to shorten the RGB color codes for
572574
*
573575
* @return string
574576
*/
575-
protected function shortenRGBColors($content)
577+
protected function convertLegacyColors($content)
576578
{
577579
/*
578-
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb()
580+
https://drafts.csswg.org/css-color/#color-syntax-legacy
581+
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
582+
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
579583
*/
580-
// THX @ https://www.regular-expressions.info/numericranges.html
581-
$dec = '([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])';// [000-255]
582-
583-
// remove alpha channel if it's pointless ..
584-
$content = preg_replace('/(rgb)a?\(([^,\s]+)[,\s]([^,\s]+)[,\s]([^,\s]+)\s?[,\/]\s?1(?:[\.\d]*|00%)?\)/i', '$1($2 $3 $4)', $content);
585584

586-
#// replace `transparent` with shortcut ..
587-
#$content = preg_replace('/rgba?\([^,\s]+[,\s][^,\s]+[,\s][^,\s]+\s?[,\/]\s?0(?:[\.0%]*)?\)/i', '#fff0', $content);
585+
// convert legacy color syntax
586+
$content = preg_replace('/(rgb|hsl)a?\(([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^\s\)]+)\)/i', '$1($2 $3 $4 / $5)', $content);
587+
$content = preg_replace('/(rgb|hsl)a?\(([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s]+)\)/i', '$1($2 $3 $4)', $content);
588588

589+
// convert `rgb` to `hex`
590+
$dec = '([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])';// [000-255] THX @ https://www.regular-expressions.info/numericranges.html
589591
return preg_replace_callback(
590-
"/rgb\($dec[,\s]$dec[,\s]$dec\)/i",
592+
"/rgb\($dec $dec $dec\)/i",
591593
function ($match)
592594
{
593595
return sprintf('#%02x%02x%02x', $match[1],$match[2],$match[3]);
@@ -597,44 +599,31 @@ function ($match)
597599
}
598600

599601
/**
600-
* Cleanup HSL|HWB|LCH|LAB
602+
* Cleanup RGB|HSL|HWB|LCH|LAB
603+
* rgb(255 0 0 / 1) -> rgb(255 0 0).
604+
* rgb(255 0 0 / 0) -> transparent.
601605
*
602606
* @param string $content The CSS content to cleanup HSL|HWB|LCH|LAB
603607
*
604608
* @return string
605609
*/
606-
protected function cleanupNEWColors($content)
610+
protected function cleanupModernColors($content)
607611
{
608612
/*
609-
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl()
613+
https://drafts.csswg.org/css-color/#color-syntax-modern
614+
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb
615+
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch
616+
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab
617+
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
618+
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab
610619
*/
611-
$hue = '([-+]?(?:(?:[012]?[0-9]?[0-9]|3[0-5][0-9])(\.[0-9]+)|360(?:\.0+))(?:degs|rads|grads|turn)?)';// -/+ [000.*-360] def
612-
$pct = '((100(?:\.0+)|0?[0-9]?[0-9])(\.[0-9]+)%)';// [000.*-100] %
620+
$tag = '(rgb|hsl|hwb|(?:(?:ok)?(?:lch|lab)))';
613621

614622
// remove alpha channel if it's pointless ..
615-
$content = preg_replace('/(hsl)a?\(([^,\s]+)[,\s]([^,\s]+)[,\s]([^,\s]+)\s?[,\/]\s?1(?:[\.\d]*|00%)?\)/i', '$1($2 $3 $4)', $content);
616-
617-
#// replace `transparent` with shortcut ..
618-
#$content = preg_replace('/hsla?\([^,\s]+[,\s][^,\s]+[,\s][^,\s]+\s?[,\/]\s?0(?:[\.0%]*)?\)/i', '#fff0', $content);
619-
620-
# ToRGB ?: https://github.com/mexitek/phpColors/blob/a74808eaf7cd918681aab0cd30f142025556bc8a/src/Mexitek/PHPColors/Color.php#L124
621-
#"/(hsl)a?\($hue[,\s]$pct[,\s]$pct[,\/]1(?:[\.\d]*|00%)?\)/i"
622-
623-
/*
624-
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb()
625-
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch()
626-
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab()
627-
https://drafts.csswg.org/css-color/#color
628-
*/
629-
630-
// remove alpha channel if it's pointless ..
631-
$content = preg_replace('/(lch|lab|hwba?)\(([^\s]+)\s([^\s]+)\s([^\s]+)\s?\/\s?1(?:[\.\d]*|00%)?\)/i', '$1($2 $3 $4)', $content);
623+
$content = preg_replace('/'.$tag.'\(([^\s]+)\s+([^\s]+)\s+([^\s]+)\s+\/\s+1(?:[\.\d]*|00%)?\)/i', '$1($2 $3 $4)', $content);
632624

633625
// replace `transparent` with shortcut ..
634-
$content = preg_replace('/(lch|lab)\([^\s]+\s[^\s]+\s[^\s]+\s?\/\s?0(?:[\.0%]*)?\)/i', '#fff0', $content);
635-
636-
#"/(hwb)a?\($hue\s$pct\s$pct\s?\/\s?1(?:[\.\d]*|00%)?\)/i"
637-
#"/(lch|lab)\($pct\s$VAR\s$VAR\s?\/\s?1(?:[\.\d]*|00%)?\)/i"
626+
$content = preg_replace('/'.$tag.'\([^\s]+\s+[^\s]+\s+[^\s]+\s+\/\s+0(?:[\.0%]*)?\)/i', '#fff0', $content);
638627

639628
return $content;
640629
}

0 commit comments

Comments
 (0)