feature: allow options in colormin (#1263)

Co-authored-by: Kuba <kuba.marek@infermedica.com>

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)'
   );
 });

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) {

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();