Lossless conversion

cssnano · May 28, 2021 · 56a4861 · 56a4861
1 parent f11d60f
commit 56a4861
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/postcss-colormin/src/__tests__/minifyColor.js b/packages/postcss-colormin/src/__tests__/minifyColor.js
@@ -160,3 +160,12 @@ test('should convert to hex8', () => {
     '#00ffff80'
   );
 });
+
+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)'
+  );
+  expect(min('hsla(0, 0%, 50%, 0.515)', { supportsAlphaHex: true })).toBe(
+    'hsla(0, 0%, 50%, 0.515)'
+  );
+});
diff --git a/packages/postcss-colormin/src/lib/color.js b/packages/postcss-colormin/src/lib/color.js
@@ -32,7 +32,8 @@ let minifierPlugin = (Colord) => {
     supportsTransparent,
     supportsAlphaHex,
   }) {
-    let { r, g, b, a } = this.toRgb();
+    let { r, g, b } = this.toRgb();
+    let a = this.alpha();
 
     // RGB[A] and HSL[A] functional notations
     let options = [
@@ -42,7 +43,12 @@ let minifierPlugin = (Colord) => {
 
     // Hexadecimal notations
     if (supportsAlphaHex && a < 1) {
-      options.push(this.toShortHex({ formatAlpha: true })); // e.g. "#7777" or "#80808080"
+      let alphaHex = this.toShortHex({ formatAlpha: true }); // e.g. "#7777" or "#80808080"
+
+      // Output 4 or 8 digit hex only if the color conversion is lossless
+      if (colord(alphaHex).alpha() === a) {
+        options.push(alphaHex);
+      }
     } else if (a === 1) {
       options.push(this.toShortHex({ formatAlpha: false })); // e.g. "#777" or "#808080"
     }