Simplify postcss-colormin (#1207)

* Simplify `postcss-colormin`

* Update postcss-colormin tests

* Upgrade colord and fix postcss-colormin specs

* Lowercase original input

packages/postcss-colormin/package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "browserslist": "^4.16.6",
     "caniuse-api": "^3.0.0",
-    "colord": "^2.0.1",
+    "colord": "^2.9.1",
     "postcss-value-parser": "^4.1.0"
   },
   "bugs": {

packages/postcss-colormin/src/__tests__/index.js

@@ -113,7 +113,7 @@ test(
   'should minify color values in background gradients (2)',
   processCSS(
     'h1{background:linear-gradient(yellow, orange), linear-gradient(black, rgba(255, 255, 255, 0))}',
-    'h1{background:linear-gradient(#ff0, orange), linear-gradient(#000, hsla(0, 0%, 100%, 0))}'
+    'h1{background:linear-gradient(#ff0, orange), linear-gradient(#000, hsla(0,0%,100%,0))}'
   )
 );
 
@@ -205,7 +205,7 @@ test(
   'should not mangle percentage based rgba values',
   processCSS(
     'h1{color:rgba(50%, 50%, 50%, 0.5)}',
-    'h1{color:hsla(0, 0%, 50%, 0.5)}'
+    'h1{color:hsla(0,0%,50%,.5)}'
   )
 );
 
@@ -297,7 +297,7 @@ test('should passthrough broken syntax', passthroughCSS('h1{color:}'));
 
 test(
   'should not convert this specific rgba value to "transparent" (old IE)',
-  passthroughCSS('h1{color:rgba(0, 0, 0, 0)}', { env: 'ie8' })
+  passthroughCSS('h1{color:rgba(0,0,0,0)}', { env: 'ie8' })
 );
 
 test('should use the postcss plugin api', usePostCSSPlugin(plugin()));

packages/postcss-colormin/src/__tests__/minifyColor.js

@@ -26,7 +26,7 @@ test(
 
 test(
   'should convert translucent hsla to rgba',
-  isEqual('hsla(0, 100%, 50%, .5)', 'rgba(255, 0, 0, 0.5)')
+  isEqual('hsla(0, 100%, 50%, .5)', 'rgba(255,0,0,.5)')
 );
 
 test(
@@ -52,7 +52,7 @@ test(
 
 test(
   'should convert rgba to hsla when shorter',
-  isEqual('rgba(221, 221, 221, 0.5)', 'hsla(0, 0%, 87%, 0.5)')
+  isEqual('rgba(221, 221, 221, 0.5)', 'hsla(0,0%,87%,.5)')
 );
 
 test(
@@ -89,12 +89,12 @@ test(
 
 test(
   'should convert signed numbers',
-  isEqual('rgba(-100,0,-100,.5)', 'rgba(0, 0, 0, 0.5)')
+  isEqual('rgba(-100,0,-100,.5)', 'rgba(0,0,0,.5)')
 );
 
 test(
   'should convert signed numbers (2)',
-  isEqual('hsla(-400, 50%, 10%, 0.5)', 'rgba(38, 13, 30, 0.5)')
+  isEqual('hsla(-400, 50%, 10%, 0.5)', 'rgba(38,13,30,.5)')
 );
 
 test(
@@ -104,7 +104,7 @@ test(
 
 test(
   'should convert percentage based rgba values (2)',
-  isEqual('rgba(50%, 50%, 50%, 0.5)', 'hsla(0, 0%, 50%, 0.5)')
+  isEqual('rgba(50%, 50%, 50%, 0.5)', 'hsla(0,0%,50%,.5)')
 );
 
 test(
@@ -114,12 +114,12 @@ test(
 
 test(
   'should convert percentage based rgba values (4)',
-  isEqual('rgba(100%,100%,100%,0.5)', 'hsla(0, 0%, 100%, 0.5)')
+  isEqual('rgba(100%,100%,100%,0.5)', 'hsla(0,0%,100%,.5)')
 );
 
 test(
   'should convert percentage based rgba values (5)',
-  isEqual('rgba(100%, 64.7%, 0%, .5)', 'rgba(255, 165, 0, 0.5)')
+  isEqual('rgba(100%, 64.7%, 0%, .5)', 'rgba(255,165,0,.5)')
 );
 
 test(
@@ -163,9 +163,9 @@ test('should convert to hex8', () => {
 
 test('should not convert to alpha hex since the conversion is not lossless', () => {
   expect(min('rgba(0, 0, 0, 0.075)', { supportsAlphaHex: true })).toBe(
-    'rgba(0, 0, 0, 0.075)'
+    'rgba(0,0,0,.075)'
   );
   expect(min('hsla(0, 0%, 50%, 0.515)', { supportsAlphaHex: true })).toBe(
-    'hsla(0, 0%, 50%, 0.515)'
+    'hsla(0,0%,50%,.515)'
   );
 });

packages/postcss-colormin/src/minifyColor.js

@@ -1,5 +1,8 @@
-import { process } from './lib/color';
-import getShortestString from './lib/getShortestString';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import minifierPlugin from 'colord/plugins/minify';
+
+extend([namesPlugin, minifierPlugin]);
 
 /**
  * Performs color value minification
@@ -15,15 +18,18 @@ export default function minifyColor(input, options = {}) {
     ...options,
   };
 
-  const instance = process(input);
+  const instance = colord(input);
 
   if (instance.isValid()) {
-    // Try to shorten the string if it is a valid CSS color value.
-    // Fall back to the original input if it's smaller or has equal length/
-    return getShortestString([
-      input.toLowerCase(),
-      instance.toShortString(settings),
-    ]);
+    // Try to shorten the string if it is a valid CSS color value
+    const minified = instance.minify({
+      alphaHex: settings.supportsAlphaHex,
+      transparent: settings.supportsTransparent,
+      name: true,
+    });
+
+    // Fall back to the original input if it's smaller or has equal length
+    return minified.length < input.length ? minified : input.toLowerCase();
   } else {
     // Possibly malformed, so pass through
     return input;

packages/postcss-minify-gradients/package.json

@@ -26,8 +26,8 @@
   },
   "repository": "cssnano/cssnano",
   "dependencies": {
+    "colord": "^2.9.1",
     "cssnano-utils": "^2.0.1",
-    "colord": "^2.6",
     "postcss-value-parser": "^4.1.0"
   },
   "bugs": {

yarn.lock

@@ -3026,10 +3026,10 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-colord@^2.0.1, colord@^2.6:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/colord/-/colord-2.7.0.tgz#706ea36fe0cd651b585eb142fe64b6480185270e"
-  integrity sha512-pZJBqsHz+pYyw3zpX6ZRXWoCHM1/cvFikY9TV8G3zcejCaKE0lhankoj8iScyrrePA8C7yJ5FStfA9zbcOnw7Q==
+colord@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.1.tgz#c961ea0efeb57c9f0f4834458f26cb9cc4a3f90e"
+  integrity sha512-4LBMSt09vR0uLnPVkOUBnmxgoaeN4ewRbx801wY/bXcltXfpR/G46OdWn96XpYmCWuYvO46aBZP4NgX8HpNAcw==
 
 colorette@^1.2.1, colorette@^1.2.2, colorette@^1.3.0:
   version "1.4.0"