Allow gradient colors to use nested object notation

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.3.1] - 2019-09-01
+
+### Fixed
+- Fixed an issue when using nested object notation for gradient colors
+
 ## [2.3.0] - 2019-07-08
 
 ### Added
@@ -79,7 +84,8 @@ and this project mostly adheres to [Semantic Versioning](https://semver.org/spec
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v2.3.0...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v2.3.1...HEAD
+[2.3.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.3.0...v2.3.1
 [2.3.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.2.0...v2.3.0
 [2.2.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.1.0...v2.2.0
 [2.1.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.1...v2.1.0

index.js

@@ -1,6 +1,21 @@
 const _ = require('lodash');
 const Color = require('color');
 
+const flattenColorPalette = function(colors) {
+  return _(colors)
+    .flatMap((color, name) => {
+      if (!_.isPlainObject(color)) {
+        return [[name, color]];
+      }
+      return _.map(color, (value, key) => {
+        const suffix = key === 'default' ? '' : `-${key}`;
+        return [`${name}${suffix}`, value];
+      });
+    })
+    .fromPairs()
+    .value();
+};
+
 const normalizeColors = function(colors, transparentFirst = true) {
   colors = _.castArray(colors);
   const unsupportedColorKeywords = ['inherit', 'initial', 'unset', 'revert'];
@@ -173,7 +188,7 @@ module.exports = function() {
 
     const linearGradientUtilities = (function() {
       const utilities = {};
-      _.forEach(linearGradientColors, (colors, colorKey) => {
+      _.forEach(flattenColorPalette(linearGradientColors), (colors, colorKey) => {
         colors = normalizeColors(colors, true);
         if (!colors) {
           return; // continue
@@ -189,7 +204,7 @@ module.exports = function() {
 
     const radialGradientUtilities = (function() {
       const utilities = {};
-      _.forEach(radialGradientColors, (colors, colorKey) => {
+      _.forEach(flattenColorPalette(radialGradientColors), (colors, colorKey) => {
         colors = normalizeColors(colors, false);
         if (!colors) {
           return; // continue
@@ -209,7 +224,7 @@ module.exports = function() {
 
     const conicGradientUtilities = (function() {
       const utilities = {};
-      _.forEach(conicGradientColors, (colors, colorKey) => {
+      _.forEach(flattenColorPalette(conicGradientColors), (colors, colorKey) => {
         colors = normalizeColors(colors, false);
         if (!colors) {
           return; // continue
@@ -228,7 +243,7 @@ module.exports = function() {
     const repeatingLinearGradientUtilities = (function() {
       const utilities = {};
       _.forEach(repeatingLinearGradientLengths, (length, lengthKey) => {
-        _.forEach(repeatingLinearGradientColors, (colors, colorKey) => {
+        _.forEach(flattenColorPalette(repeatingLinearGradientColors), (colors, colorKey) => {
           colors = normalizeColors(colors, true);
           if (!colors) {
             return; // continue
@@ -246,7 +261,7 @@ module.exports = function() {
     const repeatingRadialGradientUtilities = (function() {
       const utilities = {};
       _.forEach(repeatingRadialGradientLengths, (length, lengthKey) => {
-        _.forEach(repeatingRadialGradientColors, (colors, colorKey) => {
+        _.forEach(flattenColorPalette(repeatingRadialGradientColors), (colors, colorKey) => {
           colors = normalizeColors(colors, false);
           if (!colors) {
             return; // continue
@@ -268,7 +283,7 @@ module.exports = function() {
     const repeatingConicGradientUtilities = (function() {
       const utilities = {};
       _.forEach(repeatingConicGradientLengths, (length, lengthKey) => {
-        _.forEach(repeatingConicGradientColors, (colors, colorKey) => {
+        _.forEach(flattenColorPalette(repeatingConicGradientColors), (colors, colorKey) => {
           colors = normalizeColors(colors, false);
           if (!colors) {
             return; // continue