diff --git a/packages/postcss-colormin/src/__tests__/minifyColor.js b/packages/postcss-colormin/src/__tests__/minifyColor.js index cf1c00cca..ebc348442 100644 --- a/packages/postcss-colormin/src/__tests__/minifyColor.js +++ b/packages/postcss-colormin/src/__tests__/minifyColor.js @@ -1,6 +1,15 @@ import { test } from 'uvu'; import * as assert from 'uvu/assert'; -import min from '../minifyColor'; +import minifyColor from '../minifyColor'; + +function min(input, options = {}) { + const defaultOptions = { + alphaHex: false, + transparent: true, + name: true, + }; + return minifyColor(input, { ...defaultOptions, ...options }); +} function isEqual(input, output) { return () => assert.is(min(input), output); @@ -148,30 +157,24 @@ test('should pass through if not recognised', () => { }); test('should convert to hex4', () => { - assert.is(min('#aabbcc33', { supportsAlphaHex: true }), '#abc3'); - assert.is(min('transparent', { supportsAlphaHex: true }), '#0000'); - assert.is(min('rgb(119,119,119,0.2)', { supportsAlphaHex: true }), '#7773'); - assert.is(min('hsla(0,0%,100%,.4)', { supportsAlphaHex: true }), '#fff6'); + assert.is(min('#aabbcc33', { alphaHex: true }), '#abc3'); + assert.is(min('transparent', { alphaHex: true }), '#0000'); + assert.is(min('rgb(119,119,119,0.2)', { alphaHex: true }), '#7773'); + assert.is(min('hsla(0,0%,100%,.4)', { alphaHex: true }), '#fff6'); }); test('should convert to hex8', () => { - assert.is( - min('rgba(128, 128, 128, 0.5)', { supportsAlphaHex: true }), - '#80808080' - ); - assert.is( - min('hsla(180, 100%, 50%, 0.5)', { supportsAlphaHex: true }), - '#00ffff80' - ); + assert.is(min('rgba(128, 128, 128, 0.5)', { alphaHex: true }), '#80808080'); + assert.is(min('hsla(180, 100%, 50%, 0.5)', { alphaHex: true }), '#00ffff80'); }); test('should not convert to alpha hex since the conversion is not lossless', () => { assert.is( - min('rgba(0, 0, 0, 0.075)', { supportsAlphaHex: true }), + min('rgba(0, 0, 0, 0.075)', { alphaHex: true }), 'rgba(0,0,0,.075)' ); assert.is( - min('hsla(0, 0%, 50%, 0.515)', { supportsAlphaHex: true }), + min('hsla(0, 0%, 50%, 0.515)', { alphaHex: true }), 'hsla(0,0%,50%,.515)' ); }); diff --git a/packages/postcss-colormin/src/index.js b/packages/postcss-colormin/src/index.js index 77fce5458..6eae48b34 100644 --- a/packages/postcss-colormin/src/index.js +++ b/packages/postcss-colormin/src/index.js @@ -66,24 +66,29 @@ function transform(value, options) { return parsed.toString(); } -function pluginCreator() { +function addPluginDefaults(options, browsers) { + const defaults = { + transparent: browsers.some(hasTransparentBug) === false, // Does the browser support 4 & 8 character hex notation + alphaHex: isSupported('css-rrggbbaa', browsers), // Does the browser support "transparent" value properly + name: true, + }; + return { ...defaults, ...options }; +} + +function pluginCreator(config = {}) { return { postcssPlugin: 'postcss-colormin', prepare(result) { - const resultOpts = result.opts || {}; + const resultOptions = result.opts || {}; const browsers = browserslist(null, { - stats: resultOpts.stats, + stats: resultOptions.stats, path: __dirname, - env: resultOpts.env, + env: resultOptions.env, }); - const options = { - supportsTransparent: browsers.some(hasTransparentBug) === false, - supportsAlphaHex: isSupported('css-rrggbbaa', browsers), - }; - const cache = {}; + const options = addPluginDefaults(config, browsers); return { OnceExit(css) { diff --git a/packages/postcss-colormin/src/minifyColor.js b/packages/postcss-colormin/src/minifyColor.js index 5055762ce..060f08887 100644 --- a/packages/postcss-colormin/src/minifyColor.js +++ b/packages/postcss-colormin/src/minifyColor.js @@ -8,25 +8,14 @@ extend([namesPlugin, minifierPlugin]); * Performs color value minification * * @param {string} input - CSS value - * @param {boolean} options.supportsAlphaHex - Does the browser support 4 & 8 character hex notation - * @param {boolean} options.supportsTransparent – Does the browser support "transparent" value properly + * @param {boolean} options - object with colord.minify() options */ export default function minifyColor(input, options = {}) { - const settings = { - supportsAlphaHex: false, - supportsTransparent: true, - ...options, - }; - const instance = colord(input); if (instance.isValid()) { // 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, - }); + const minified = instance.minify(options); // Fall back to the original input if it's smaller or has equal length return minified.length < input.length ? minified : input.toLowerCase();