Add ability to generate radial gradients (fix #2)

Author: benface

CHANGELOG.md

@@ -5,9 +5,13 @@ 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).
 
-## [Unreleased]
+## [2.0.0] - 2019-05-17
+
+### Added since 2.0.0-beta.2
+- Added radial gradient utilities (see `README` for more info)
 
 ### Changed since 2.0.0-beta.2
+- Renamed the `gradients` theme and variants keys to `linearGradients`
 - Added support for global variants thanks to Tailwind’s `variants()` helper function
 
 ### Added since 1.x
@@ -52,7 +56,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-beta.2...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.0...HEAD
+[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
 [1.1.0]: https://github.com/benface/tailwindcss-gradients/compare/v1.0.1...v1.1.0

README.md

@@ -12,7 +12,7 @@ npm install tailwindcss-gradients
 // tailwind.config.js
 {
   theme: {
-    gradients: {
+    linearGradients: {
       directions: { // defaults to these values
         't': 'to top',
         'tr': 'to top right',
@@ -29,9 +29,34 @@ npm install tailwindcss-gradients
         'red-green-blue': ['#f00', '#0f0', '#00f'],
       },
     },
+    radialGradients: {
+      shapes: { // defaults to this value
+        'default': 'ellipse',
+      },
+      sizes: { // defaults to this value
+        'default': 'closest-side',
+      },
+      positions: { // defaults to these values
+        'default': 'center',
+        't': 'top',
+        'tr': 'top right',
+        'r': 'right',
+        'br': 'bottom right',
+        'b': 'bottom',
+        'bl': 'bottom left',
+        'l': 'left',
+        'tl': 'top left',
+      },
+      colors: { // defaults to {}
+        'red': '#f00',
+        'red-blue': ['#f00', '#00f'],
+        'red-green-blue': ['#f00', '#0f0', '#00f'],
+      },
+    },
   },
   variants: {
-    gradients: ['responsive'], // defaults to ['responsive']
+    linearGradients: ['responsive'], // defaults to ['responsive']
+    radialGradients: ['responsive'], // defaults to ['responsive']
   },
   plugins: [
     require('tailwindcss-gradients')(),
@@ -46,10 +71,16 @@ or you can reference your existing theme colors:
       'red': '#f00',
       'blue': '#00f',
     },
-    gradients: theme => ({
+    linearGradients: theme => ({
       // directions: { ... },
       colors: theme('colors'),
     }),
+    radialGradients: theme => ({
+      // shapes: { ... },
+      // sizes: { ... },
+      // positions: { ... },
+      colors: theme('colors'),
+    }),
   },
   plugins: [
     require('tailwindcss-gradients')(),
@@ -60,8 +91,14 @@ or you can reference your existing theme colors:
 This plugin generates the following utilities:
 
 ```css
-/* configurable with the "gradients" theme object */
+/* configurable with the "linearGradients" theme object */
 .bg-gradient-[direction-key]-[color-key] {
   background-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]);
 }
+
+/* configurable with the "radialGradients" theme object */
+/* note that the "default" [shape-key], [size-key], and [position-key] are omitted from the class */
+.bg-radial-[shape-key]-[size-key]-[position-key]-[color-key] {
+  background-image: radial-gradient([shape-value] [size-value] at [position-value], [color-value-1], [color-value-2], [...]);
+}
 ```

index.js

@@ -1,9 +1,19 @@
 const _ = require('lodash');
 const Color = require('color');
 
+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();
+    colors = transparentFirst ? [transparentColor, color] : [color, transparentColor];
+  }
+  return colors.join(', ');
+};
+
 module.exports = function() {
   return ({ theme, variants, e, addUtilities }) => {
-    const defaultGradientDirections = {
+    const defaultLinearGradientDirections = {
       't': 'to top',
       'tr': 'to top right',
       'r': 'to right',
@@ -13,30 +23,66 @@ module.exports = function() {
       'l': 'to left',
       'tl': 'to top left',
     };
-    const defaultGradientColors = {};
-    const defaultGradientVariants = ['responsive'];
+    const defaultLinearGradientColors = {};
+    const defaultLinearGradientVariants = ['responsive'];
+    const defaultRadialGradientShapes = {
+      'default': 'ellipse',
+    };
+    const defaultRadialGradientSizes = {
+      'default': 'closest-side',
+    };
+    const defaultRadialGradientPositions = {
+      'default': 'center',
+      't': 'top',
+      'tr': 'top right',
+      'r': 'right',
+      'br': 'bottom right',
+      'b': 'bottom',
+      'bl': 'bottom left',
+      'l': 'left',
+      'tl': 'top left',
+    };
+    const defaultRadialGradientColors = {};
+    const defaultRadialGradientVariants = ['responsive'];
 
-    const gradientDirections = theme('gradients.directions', defaultGradientDirections);
-    const gradientColors = theme('gradients.colors', defaultGradientColors);
-    const gradientVariants = variants('gradients', defaultGradientVariants);
+    const linearGradientDirections = theme('linearGradients.directions', defaultLinearGradientDirections);
+    const linearGradientColors = theme('linearGradients.colors', defaultLinearGradientColors);
+    const linearGradientVariants = variants('linearGradients', defaultLinearGradientVariants);
+    const radialGradientShapes = theme('radialGradients.shapes', defaultRadialGradientShapes);
+    const radialGradientSizes = theme('radialGradients.sizes', defaultRadialGradientSizes);
+    const radialGradientPositions = theme('radialGradients.positions', defaultRadialGradientPositions);
+    const radialGradientColors = theme('radialGradients.colors', defaultRadialGradientColors);
+    const radialGradientVariants = variants('radialGradients', defaultRadialGradientVariants);
 
-    const gradientUtilities = (function() {
+    const linearGradientUtilities = (function() {
       let utilities = {};
-      _.forEach(gradientColors, (colors, colorKey) => {
-        if (!_.isArray(colors) || colors.length === 1) {
-          let color = _.isArray(colors) ? colors[0] : colors;
-          let parsedColor = Color(color);
-          colors = [parsedColor.alpha(0).rgb().string(), color];
-        }
-        _.forEach(gradientDirections, (direction, directionKey) => {
+      _.forEach(linearGradientColors, (colors, colorKey) => {
+        _.forEach(linearGradientDirections, (direction, directionKey) => {
           utilities[`.${e(`bg-gradient-${directionKey}-${colorKey}`)}`] = {
-            backgroundImage: `linear-gradient(${direction}, ${colors.join(', ')})`,
+            backgroundImage: `linear-gradient(${direction}, ${listColors(colors, true)})`,
           };
         });
       });
       return utilities;
     })();
 
-    addUtilities(gradientUtilities, gradientVariants);
+    const radialGradientUtilities = (function() {
+      let utilities = {};
+      _.forEach(radialGradientColors, (colors, colorKey) => {
+        _.forEach(radialGradientPositions, (position, positionKey) => {
+          _.forEach(radialGradientSizes, (size, sizeKey) => {
+            _.forEach(radialGradientShapes, (shape, shapeKey) => {
+              utilities[`.${e(`bg-radial${shapeKey === 'default' ? '' : `-${shapeKey}`}${sizeKey === 'default' ? '' : `-${sizeKey}`}${positionKey === 'default' ? '' : `-${positionKey}`}-${colorKey}`)}`] = {
+                backgroundImage: `radial-gradient(${shape} ${size} at ${position}, ${listColors(colors, false)})`,
+              };
+            });
+          });
+        });
+      });
+      return utilities;
+    })();
+
+    addUtilities(linearGradientUtilities, linearGradientVariants);
+    addUtilities(radialGradientUtilities, radialGradientVariants);
   };
 };