diff --git a/packages/postcss-colormin/src/__tests__/minifyColor.js b/packages/postcss-colormin/src/__tests__/minifyColor.js index 49f2895e8..37e411b33 100644 --- 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 index d2d6ae786..984aecb99 100644 --- 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" }