fix(postcss-colormin): prevent interpreting all numbers as hex colors.

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

@@ -5,9 +5,12 @@ import toShorthand from './lib/toShorthand';
 extend([namesPlugin]);
 
 export default (colour, isLegacy = false) => {
-  if (getFormat(colour) === 'rgb') {
-    /* check that it is a valid CSS value
+  if (colour.includes('var(')) {
+    return colour;
+  }
+  /* check that it is a valid CSS value
      https://www.w3.org/TR/css-color-4/#rgb-functions */
+  if (getFormat(colour) === 'rgb') {
     let percentCount = 0;
     for (const c of colour) {
       if (c === '%') {
@@ -20,6 +23,11 @@ export default (colour, isLegacy = false) => {
     }
   }
 
+  if (getFormat(colour) === 'hex') {
+    if (colour.charAt(0) !== '#') {
+      return colour;
+    }
+  }
   const parsed = colord(colour.toLowerCase());
   if (parsed.isValid()) {
     const alpha = parsed.alpha();