diff --git a/packages/postcss-colormin/package.json b/packages/postcss-colormin/package.json old mode 100644 new mode 100755 index fe7e73e37..a4eea1cea --- a/packages/postcss-colormin/package.json +++ b/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": { diff --git a/packages/postcss-colormin/src/__tests__/index.js b/packages/postcss-colormin/src/__tests__/index.js index 047f6d2d2..ab95b814d 100644 --- a/packages/postcss-colormin/src/__tests__/index.js +++ b/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())); diff --git a/packages/postcss-colormin/src/__tests__/minifyColor.js b/packages/postcss-colormin/src/__tests__/minifyColor.js index 37e411b33..a3c4a572b 100644 --- a/packages/postcss-colormin/src/__tests__/minifyColor.js +++ b/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)' ); }); diff --git a/packages/postcss-colormin/src/lib/color.js b/packages/postcss-colormin/src/lib/color.js deleted file mode 100644 index 984aecb99..000000000 --- a/packages/postcss-colormin/src/lib/color.js +++ /dev/null @@ -1,73 +0,0 @@ -import { colord, extend, getFormat } from 'colord'; -import namesPlugin from 'colord/plugins/names'; -import getShortestString from './getShortestString'; - -let minifierPlugin = (Colord) => { - /** - * Shortens a color to 3 or 4 digit hexadecimal string if it's possible. - * Returns the original (6 or 8 digit) hex if the it can't be shortened. - */ - Colord.prototype.toShortHex = function ({ formatAlpha }) { - let hex = this.toHex(); - let [, r1, r2, g1, g2, b1, b2, a1, a2] = hex.split(''); - - // Check if the string can be shorten - if (r1 === r2 && g1 === g2 && b1 === b2) { - if (this.alpha() === 1) { - // Express as 3 digit hexadecimal string if the color doesn't have an alpha channel - return '#' + r1 + g1 + b1; - } else if (formatAlpha && a1 === a2) { - // Format 4 digit hex - return '#' + r1 + g1 + b1 + a1; - } - } - - return hex; - }; - - /** - * Returns the shortest representation of a color. - */ - Colord.prototype.toShortString = function ({ - supportsTransparent, - supportsAlphaHex, - }) { - let { r, g, b } = this.toRgb(); - let a = this.alpha(); - - // RGB[A] and HSL[A] functional notations - let options = [ - this.toRgbString(), // e.g. "rgb(128, 128, 128)" or "rgba(128, 128, 128, 0.5)" - this.toHslString(), // e.g. "hsl(180, 50%, 50%)" or "hsla(180, 50%, 50%, 0.5)" - ]; - - // Hexadecimal notations - if (supportsAlphaHex && a < 1) { - 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" - } - - // CSS keyword - if (supportsTransparent && r === 0 && g === 0 && b === 0 && a === 0) { - options.push('transparent'); - } else if (a === 1) { - let name = this.toName(); // e.g. "gray" - if (name) { - options.push(name); - } - } - - // Find the shortest option available - return getShortestString(options); - }; -}; - -extend([namesPlugin, minifierPlugin]); - -export { colord as process, getFormat }; diff --git a/packages/postcss-colormin/src/lib/getShortestString.js b/packages/postcss-colormin/src/lib/getShortestString.js deleted file mode 100644 index 819cf8820..000000000 --- a/packages/postcss-colormin/src/lib/getShortestString.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Returns the shortest string in array - */ -const getShortestString = (strings) => { - let shortest = null; - - for (let string of strings) { - if (shortest === null || string.length < shortest.length) { - shortest = string; - } - } - - return shortest; -}; - -export default getShortestString; diff --git a/packages/postcss-colormin/src/minifyColor.js b/packages/postcss-colormin/src/minifyColor.js index 257a7197a..5055762ce 100644 --- a/packages/postcss-colormin/src/minifyColor.js +++ b/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; diff --git a/packages/postcss-minify-gradients/package.json b/packages/postcss-minify-gradients/package.json index 6713419a1..5fbfd340d 100644 --- a/packages/postcss-minify-gradients/package.json +++ b/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": { diff --git a/yarn.lock b/yarn.lock index ef0170595..b7b5e5425 100644 --- a/yarn.lock +++ b/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"