fix(postcss-colormin): Strict color parsing

packages/postcss-colormin/package.json

@@ -31,7 +31,7 @@
   "repository": "cssnano/cssnano",
   "dependencies": {
     "browserslist": "^4.16.0",
-    "colord": "^1.7.2",
+    "colord": "^2.0.0",
     "postcss-value-parser": "^4.1.0"
   },
   "bugs": {

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

@@ -127,6 +127,8 @@ test(
   isEqual('rgb(50%,23,54)', 'rgb(50%,23,54)')
 );
 
+test('should pass on non prefixed hexadecimal value', isEqual('999', '999'));
+
 test('should convert darkgray to a hex', isEqual('darkgray', '#a9a9a9'));
 
 test('should convert 8 character hex codes', isEqual('#000000FF', '#000'));

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

@@ -308,3 +308,18 @@ test(
   'should not mangle colours in the content property',
   passthroughCSS('h2:before{content:"black"}')
 );
+
+test(
+  'should not attempt to convert z-index',
+  passthroughCSS('h1{z-index:999}')
+);
+
+test(
+  'should not attempt to convert variables',
+  passthroughCSS(':root{--some-color: 200 255 0}')
+);
+
+test(
+  'should respect CSS variables',
+  passthroughCSS('div{background-color:rgba(51,153,255,var(--tw-bg-opacity))}')
+);

packages/postcss-colormin/src/colours.js

@@ -1,28 +1,15 @@
-import { colord, extend, getFormat } from 'colord';
+import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import toShorthand from './lib/toShorthand';
 
 extend([namesPlugin]);
 
 export default (colour, isLegacy = false) => {
-  if (getFormat(colour) === 'rgb') {
-    /* check that it is a valid CSS value
-     https://www.w3.org/TR/css-color-4/#rgb-functions */
-    let percentCount = 0;
-    for (const c of colour) {
-      if (c === '%') {
-        percentCount++;
-      }
-    }
-    // rgb values should either be all percentages or all numbers
-    if (percentCount !== 3 && percentCount !== 0) {
-      return colour;
-    }
-  }
+  const parsed = colord(colour);
 
-  const parsed = colord(colour.toLowerCase());
   if (parsed.isValid()) {
     const alpha = parsed.alpha();
+
     if (alpha === 1) {
       const toHex = toShorthand(parsed.toHex());
       const toName = parsed.toName();

packages/postcss-colormin/yarn.lock

@@ -18,10 +18,10 @@ caniuse-lite@^1.0.30001165:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz#0088bfecc6a14694969e391cc29d7eb6362ca6a7"
   integrity sha512-Dd4d/+0tsK0UNLrZs3CvNukqalnVTRrxb5mcQm8rHL49t7V5ZaTygwXkrq+FB+dVDf++4ri8eJnFEJAB8332PA==
 
-colord@^1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/colord/-/colord-1.7.2.tgz#474f0e46333cb5c7a191dbd571edeee19a5f97b6"
-  integrity sha512-/sQCxy6PEhZbrAn1+NVRRefy3k4jkWQGxk7mo2o0CoNA24jq4ujDc2jXzJ5uXphm/TwfdGOP0w8U+H+9ys4Peg==
+colord@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.0.0.tgz#f8c19f2526b7dc5b22d6e57ef102f03a2a43a3d8"
+  integrity sha512-WMDFJfoY3wqPZNpKUFdse3HhD5BHCbE9JCdxRzoVH+ywRITGOeWAHNkGEmyxLlErEpN9OLMWgdM9dWQtDk5dog==
 
 colorette@^1.2.1, colorette@^1.2.2:
   version "1.2.2"