Add directions option and write tests

Author: benface

.release-it.json

@@ -0,0 +1,5 @@
+{
+  "src": {
+    "tagName": "v%s"
+  }
+}

CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+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).
+
+## [1.0.2] - 2018-11-05
+
+### Added
+- Added `directions` option (defaults to all sides and corners)
+- Added proper tests with Jest
+
+### Changed
+- The classes that are generated by default are now shorter (`bg-gradient-t-[color]` instead of `bg-gradient-to-top-[color]`, etc.) but can be customized with the `directions` option
+
+## [1.0.1] - 2018-08-14
+
+### Fixed
+- Fixed escaping in selectors generated by the plugin
+
+## 1.0.0 - 2018-08-13
+
+Initial release
+
+[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v1.0.2...HEAD
+[1.0.2]: https://github.com/benface/tailwindcss-gradients/compare/v1.0.1...v1.0.2
+[1.0.1]: https://github.com/benface/tailwindcss-gradients/compare/v1.0.0...v1.0.1

README.md

@@ -14,6 +14,12 @@ npm install tailwindcss-gradients
   plugins: [
     require('tailwindcss-gradients')({
       variants: ['responsive'],
+      directions: {
+        't': 'to top',
+        'r': 'to right',
+        'b': 'to bottom',
+        'l': 'to left',
+      },
       gradients: {
         'red': '#f00',
         'red-blue': ['#f00', '#00f'],
@@ -27,17 +33,22 @@ npm install tailwindcss-gradients
 This plugin generates the following utilities:
 
 ```css
-/* configurable with the "gradients" option */
-.bg-gradient-to-top-[name] {
-  background-image: linear-gradient(to top, [color-1], [color-2], [...])
-}
-.bg-gradient-to-right-[name] {
-  background-image: linear-gradient(to right, [color-1], [color-2], [...])
+/* configurable with the "directions" and "gradients" options */
+.bg-gradient-[direction-name]-[gradient-name] {
+  background-image: linear-gradient([direction-value], [gradient-color-1], [gradient-color-2], [...])
 }
-.bg-gradient-to-bottom-[name] {
-  background-image: linear-gradient(to bottom, [color-1], [color-2], [...])
-}
-.bg-gradient-to-left-[name] {
-  background-image: linear-gradient(to left, [color-1], [color-2], [...])
+```
+
+Note: The `directions` option is optional and defaults to:
+```js
+{
+  't': 'to top',
+  'tr': 'to top right',
+  'r': 'to right',
+  'br': 'to bottom right',
+  'b': 'to bottom',
+  'bl': 'to bottom left',
+  'l': 'to left',
+  'tl': 'to top left',
 }
 ```

index.js

@@ -2,24 +2,34 @@ const _ = require('lodash');
 
 module.exports = ({
   variants = {},
+  directions = {
+    't': 'to top',
+    'tr': 'to top right',
+    'r': 'to right',
+    'br': 'to bottom right',
+    'b': 'to bottom',
+    'bl': 'to bottom left',
+    'l': 'to left',
+    'tl': 'to top left',
+  },
   gradients = {},
 } = {}) => ({ e, addUtilities }) => {
   addUtilities(
     {
-      ...Object.assign(
-        {},
-        ..._.map(gradients, (colors, name) => {
-          if (!_.isArray(colors)) {
-            colors = ['transparent', colors];
+      ...(function() {
+        const utilities = {};
+        _.forEach(gradients, (gradientColors, gradientName) => {
+          if (!_.isArray(gradientColors) || gradientColors.length === 1) {
+            gradientColors = ['transparent', _.isArray(gradientColors) ? gradientColors[0] : gradientColors];
           }
-          return {
-            [`.${e(`bg-gradient-to-top-${name}`)}`]: { backgroundImage: `linear-gradient(to top, ${colors.join(', ')})` },
-            [`.${e(`bg-gradient-to-right-${name}`)}`]: { backgroundImage: `linear-gradient(to right, ${colors.join(', ')})` },
-            [`.${e(`bg-gradient-to-bottom-${name}`)}`]: { backgroundImage: `linear-gradient(to bottom, ${colors.join(', ')})` },
-            [`.${e(`bg-gradient-to-left-${name}`)}`]: { backgroundImage: `linear-gradient(to left, ${colors.join(', ')})` },
-          };
-        }),
-      ),
+          _.forEach(directions, (directionValue, directionName) => {
+            utilities[`.${e(`bg-gradient-${directionName}-${gradientName}`)}`] = {
+              backgroundImage: `linear-gradient(${directionValue}, ${gradientColors.join(', ')})`,
+            };
+          });
+        });
+        return utilities;
+      })(),
     },
     variants,
   );