Fix an error when using keywords for colors (fix #7)

Author: benface

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.1] - 2019-05-23
+
+### Fixed
+- Fixed an error when using keywords for colors such as `inherit` or `currentColor`
+
 ## [2.0.0] - 2019-05-17
 
 ### Added since 2.0.0-beta.2
@@ -56,7 +61,8 @@ and this project mostly adheres to [Semantic Versioning](https://semver.org/spec
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.0...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.1...HEAD
+[2.0.1]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.0...v2.0.1
 [2.0.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.0-beta.2...v2.0.0
 [2.0.0-beta.2]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.0-beta.1...v2.0.0-beta.2
 [2.0.0-beta.1]: https://github.com/benface/tailwindcss-gradients/compare/v1.1.0...v2.0.0-beta.1

index.js

@@ -1,11 +1,21 @@
 const _ = require('lodash');
 const Color = require('color');
 
+const colorsAreSupported = function(colors) {
+  const unsupportedColorKeywords = ['inherit', 'initial', 'unset', 'revert'];
+  return _.intersection(unsupportedColorKeywords, colors).length === 0;
+};
+
 const listColors = function(colors, transparentFirst = true) {
-  if (!_.isArray(colors) || colors.length === 1) {
-    const color = _.isArray(colors) ? colors[0] : colors;
-    const parsedColor = Color(color);
-    const transparentColor = parsedColor.alpha(0).rgb().string();
+  if (colors.length === 1) {
+    const color = colors[0];
+    let transparentColor = 'transparent';
+    try {
+      const parsedColor = Color(color);
+      transparentColor = parsedColor.alpha(0).rgb().string();
+    }
+    catch (e) {
+    }
     colors = transparentFirst ? [transparentColor, color] : [color, transparentColor];
   }
   return colors.join(', ');
@@ -57,6 +67,10 @@ module.exports = function() {
     const linearGradientUtilities = (function() {
       let utilities = {};
       _.forEach(linearGradientColors, (colors, colorKey) => {
+        colors = _.castArray(colors);
+        if (!colorsAreSupported(colors)) {
+          return; // continue
+        }
         _.forEach(linearGradientDirections, (direction, directionKey) => {
           utilities[`.${e(`bg-gradient-${directionKey}-${colorKey}`)}`] = {
             backgroundImage: `linear-gradient(${direction}, ${listColors(colors, true)})`,
@@ -69,6 +83,10 @@ module.exports = function() {
     const radialGradientUtilities = (function() {
       let utilities = {};
       _.forEach(radialGradientColors, (colors, colorKey) => {
+        colors = _.castArray(colors);
+        if (!colorsAreSupported(colors)) {
+          return; // continue
+        }
         _.forEach(radialGradientPositions, (position, positionKey) => {
           _.forEach(radialGradientSizes, (size, sizeKey) => {
             _.forEach(radialGradientShapes, (shape, shapeKey) => {

test.js

@@ -355,6 +355,101 @@ test('colors can be referenced from the theme with a closure', () => {
   });
 });
 
+test('color keywords are accepted', () => {
+  return generatePluginCss({
+    theme: {
+      colors: {
+        'white': 'white',
+        'black': 'black',
+        'transparent': 'transparent',
+        'current': 'currentColor',
+      },
+      linearGradients: theme => ({
+        directions: {
+          't': 'to top',
+        },
+        colors: theme('colors'),
+      }),
+      radialGradients: theme => ({
+        positions: {
+          't': 'top',
+        },
+        colors: theme('colors'),
+      }),
+    },
+    variants: {
+      linearGradients: [],
+      radialGradients: [],
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .bg-gradient-t-white {
+        background-image: linear-gradient(to top, rgba(255, 255, 255, 0), white)
+      }
+      .bg-gradient-t-black {
+        background-image: linear-gradient(to top, rgba(0, 0, 0, 0), black)
+      }
+      .bg-gradient-t-transparent {
+        background-image: linear-gradient(to top, rgba(0, 0, 0, 0), transparent)
+      }
+      .bg-gradient-t-current {
+        background-image: linear-gradient(to top, transparent, currentColor)
+      }
+      .bg-radial-t-white {
+        background-image: radial-gradient(ellipse closest-side at top, white, rgba(255, 255, 255, 0))
+      }
+      .bg-radial-t-black {
+        background-image: radial-gradient(ellipse closest-side at top, black, rgba(0, 0, 0, 0))
+      }
+      .bg-radial-t-transparent {
+        background-image: radial-gradient(ellipse closest-side at top, transparent, rgba(0, 0, 0, 0))
+      }
+      .bg-radial-t-current {
+        background-image: radial-gradient(ellipse closest-side at top, currentColor, transparent)
+      }
+    `);
+  });
+});
+
+test('some keywords such as inherit are skipped', () => {
+  return generatePluginCss({
+    theme: {
+      colors: {
+        'inherit': 'inherit',
+        'red': '#f00',
+        'initial': 'initial',
+        'unset': 'unset',
+        'revert': 'revert',
+      },
+      linearGradients: theme => ({
+        directions: {
+          't': 'to top',
+        },
+        colors: theme('colors'),
+      }),
+      radialGradients: theme => ({
+        positions: {
+          't': 'top',
+        },
+        colors: theme('colors'),
+      }),
+    },
+    variants: {
+      linearGradients: [],
+      radialGradients: [],
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .bg-gradient-t-red {
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
+      }
+      .bg-radial-t-red {
+        background-image: radial-gradient(ellipse closest-side at top, #f00, rgba(255, 0, 0, 0))
+      }
+    `);
+  });
+});
+
 test('radial gradient shapes and sizes can be customized', () => {
   return generatePluginCss({
     theme: {