Changes for Tailwind 1.0.0

Author: benface

.gitignore

@@ -1 +1 @@
-/node_modules/
+/node_modules/

.release-it.json

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

CHANGELOG.md

@@ -5,6 +5,15 @@ 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.0-beta.1] - 2019-04-04
+
+### Added
+- Tailwind 1.0.0 compatibility
+
+### Changed
+- The plugin doesn’t accept a config object anymore; instead it finds what it needs in the `theme` and `variants` keys of your config (see `README` for more info)
+- Responsive variants are now generated by default
+
 ## [1.1.0] - 2018-11-05
 
 ### Added
@@ -23,6 +32,7 @@ and this project mostly adheres to [Semantic Versioning](https://semver.org/spec
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v1.1.0...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.0-beta.1...HEAD
+[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
-[1.0.1]: https://github.com/benface/tailwindcss-gradients/compare/v1.0.0...v1.0.1
+[1.0.1]: https://github.com/benface/tailwindcss-gradients/compare/v1.0.0...v1.0.1

README.md

@@ -1,4 +1,4 @@
-# Gradients Tailwind CSS Plugin
+# Gradients Plugin for Tailwind CSS
 
 ## Installation
 
@@ -11,44 +11,41 @@ npm install tailwindcss-gradients
 ```js
 // In your Tailwind CSS config
 {
-  plugins: [
-    require('tailwindcss-gradients')({
-      variants: ['responsive'],
+  theme: {
+    gradients: {
       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: {
+      colors: {
         'red': '#f00',
         'red-blue': ['#f00', '#00f'],
         'red-green-blue': ['#f00', '#0f0', '#00f'],
       },
-    }),
+    },
+  },
+  variants: {
+    gradients: ['responsive'],
+  },
+  plugins: [
+    require('tailwindcss-gradients')(),
   ],
 }
 ```
 
 This plugin generates the following utilities:
 
 ```css
-/* 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], [...])
+/* configurable with the "gradients" theme key */
+.bg-gradient-[direction-key]-[color-key] {
+  background-image: linear-gradient([direction-value], [color-value-1], [color-value-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',
-}
-```
+Note: The `directions` key in `theme.gradients` is optional and defaults to the above values. Also, the `gradients` variants key defaults to `['responsive']`.

index.js

@@ -1,36 +1,35 @@
 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(
-    {
-      ...(function() {
-        const utilities = {};
-        _.forEach(gradients, (gradientColors, gradientName) => {
-          if (!_.isArray(gradientColors) || gradientColors.length === 1) {
-            gradientColors = ['transparent', _.isArray(gradientColors) ? gradientColors[0] : gradientColors];
-          }
-          _.forEach(directions, (directionValue, directionName) => {
-            utilities[`.${e(`bg-gradient-${directionName}-${gradientName}`)}`] = {
-              backgroundImage: `linear-gradient(${directionValue}, ${gradientColors.join(', ')})`,
-            };
-          });
+module.exports = function() {
+  return ({ config, e, addUtilities }) => {
+    const defaultDirections = {
+      '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',
+    };
+    const defaultColors = {};
+    const defaultVariants = ['responsive'];
+
+    const gradientUtilities = (function() {
+      let utilities = {};
+      _.forEach(config('theme.gradients.colors', defaultColors), (colors, colorKey) => {
+        if (!_.isArray(colors) || colors.length === 1) {
+          colors = ['transparent', _.isArray(colors) ? colors[0] : colors];
+        }
+        _.forEach(config('theme.gradients.directions', defaultDirections), (direction, directionKey) => {
+          utilities[`.${e(`bg-gradient-${directionKey}-${colorKey}`)}`] = {
+            backgroundImage: `linear-gradient(${direction}, ${colors.join(', ')})`,
+          };
         });
-        return utilities;
-      })(),
-    },
-    variants,
-  );
+      });
+      return utilities;
+    })();
+
+    addUtilities(gradientUtilities, config('variants.gradients', defaultVariants));
+  };
 };