Add slice value, remove radial gradients.

cossssmin · May 31, 2019 · 93fd775 · 93fd775
1 parent 0f9f806
commit 93fd775
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 544 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,16 @@ 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-31
+
+### Fixed
+
+- Border image should be visible now (hardcoded `border-image-slice` value to `1`)
+
+### Removed
+
+- Radial border gradients
+
 ## [2.0.0] - 2019-05-30
 
 ### Added

diff --git a/README.md b/README.md
@@ -20,9 +20,6 @@ npm install tailwindcss-border-gradients
     linearBorderGradients: theme => ({
       colors: theme('colors'),
     }),
-    radialBorderGradients: theme => ({
-      colors: theme('colors'),
-    }),
   },
   plugins: [
     require('tailwindcss-border-gradients')(),
@@ -53,31 +50,6 @@ npm install tailwindcss-border-gradients
         'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
       },
     },
-    radialBorderGradients: {
-      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'],
-        'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
-      },
-    },
     repeatingLinearBorderGradients: theme => ({
       directions: theme('linearBorderGradients.directions'), // defaults to the same values as linearBorderGradients’ directions
       colors: theme('linearBorderGradients.colors'), // defaults to {}
@@ -87,27 +59,10 @@ npm install tailwindcss-border-gradients
         'lg': '100px',
       },
     }),
-    repeatingRadialBorderGradients: theme => ({
-      shapes: { // defaults to this value
-        'default': 'ellipse',
-      },
-      sizes: { // defaults to this value
-        'default': 'farthest-corner',
-      },
-      positions: theme('radialBorderGradients.positions'), // defaults to the same values as radialBorderGradients’ positions
-      colors: theme('radialBorderGradients.colors'), // defaults to {}
-      lengths: { // defaults to {}
-        'sm': '25px',
-        'md': '50px',
-        'lg': '100px',
-      },
-    }),
   },
   variants: {
     linearBorderGradients: ['responsive'], // defaults to ['responsive']
-    radialBorderGradients: ['responsive'], // defaults to ['responsive']
     repeatingLinearBorderGradients: ['responsive'], // defaults to ['responsive']
-    repeatingRadialBorderGradients: ['responsive'], // defaults to ['responsive']
   },
   plugins: [
     require('tailwindcss-border-gradients')(),
@@ -120,23 +75,16 @@ The plugin generates the following utilities:
 ```css
 /* configurable with the "linearBorderGradients" theme object */
 .border-gradient-[direction-key]-[color-key] {
-  border-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]);
-}
-
-/* configurable with the "radialBorderGradients" theme object */
-/* note that the "default" [shape-key], [size-key], and [position-key] are omitted from the class */
-.border-radial-[shape-key]-[size-key]-[position-key]-[color-key] {
-  border-image: radial-gradient([shape-value] [size-value] at [position-value], [color-value-1], [color-value-2], [...]);
+  border-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]) 1;
 }
 
 /* configurable with the "repeatingLinearBorderGradients" theme object */
 .border-gradient-[direction-key]-[color-key]-[length-key] {
-  border-image: repeating-linear-gradient([direction-value], [color-value-1], [color-value-2], [...] [length-value]);
+  border-image: repeating-linear-gradient([direction-value], [color-value-1], [color-value-2], [...] [length-value]) 1;
 }
+```
 
-/* configurable with the "repeatingRadialBorderGradients" theme object */
-/* note that the "default" [shape-key], [size-key], and [position-key] are omitted from the class */
-.border-radial-[shape-key]-[size-key]-[position-key]-[color-key]-[length-key] {
-  border-image: repeating-radial-gradient([shape-value] [size-value] at [position-value], [color-value-1], [color-value-2], [...] [length-value]);
-}
-```
+## Roadmap
+
+- [ ] Config option for `border-image-slice`
+- [ ] Config option for `border-image-width`
diff --git a/index.js b/index.js
@@ -35,85 +35,26 @@ module.exports = function() {
     };
     const defaultLinearBorderGradientColors = {};
     const defaultLinearBorderGradientVariants = ['responsive'];
-    const defaultRadialBorderGradientShapes = {
-      'default': 'ellipse',
-    };
-    const defaultRadialBorderGradientSizes = {
-      'default': 'closest-side',
-    };
-    const defaultRadialBorderGradientPositions = {
-      'default': 'center',
-      't': 'top',
-      'tr': 'top right',
-      'r': 'right',
-      'br': 'bottom right',
-      'b': 'bottom',
-      'bl': 'bottom left',
-      'l': 'left',
-      'tl': 'top left',
-    };
-    const defaultRadialBorderGradientColors = {};
-    const defaultRadialBorderGradientVariants = ['responsive'];
     const defaultRepeatingLinearBorderGradientDirections = defaultLinearBorderGradientDirections;
     const defaultRepeatingLinearBorderGradientColors = defaultLinearBorderGradientColors;
     const defaultRepeatingLinearBorderGradientLengths = {};
     const defaultRepeatingLinearBorderGradientVariants = ['responsive'];
-    const defaultRepeatingRadialBorderGradientShapes = defaultRadialBorderGradientShapes;
-    const defaultRepeatingRadialBorderGradientSizes = {
-      'default': 'farthest-corner',
-    };
-    const defaultRepeatingRadialBorderGradientPositions = defaultRadialBorderGradientPositions;
-    const defaultRepeatingRadialBorderGradientColors = defaultRadialBorderGradientColors;
-    const defaultRepeatingRadialBorderGradientLengths = {};
-    const defaultRepeatingRadialBorderGradientVariants = ['responsive'];
 
     const linearBorderGradientDirections = theme('linearBorderGradients.directions', defaultLinearBorderGradientDirections);
     const linearBorderGradientColors = theme('linearBorderGradients.colors', defaultLinearBorderGradientColors);
     const linearBorderGradientVariants = variants('linearBorderGradients', defaultLinearBorderGradientVariants);
-    const radialBorderGradientShapes = theme('radialBorderGradients.shapes', defaultRadialBorderGradientShapes);
-    const radialBorderGradientSizes = theme('radialBorderGradients.sizes', defaultRadialBorderGradientSizes);
-    const radialBorderGradientPositions = theme('radialBorderGradients.positions', defaultRadialBorderGradientPositions);
-    const radialBorderGradientColors = theme('radialBorderGradients.colors', defaultRadialBorderGradientColors);
-    const radialBorderGradientVariants = variants('radialBorderGradients', defaultRadialBorderGradientVariants);
     const repeatingLinearBorderGradientDirections = theme('repeatingLinearBorderGradients.directions', defaultRepeatingLinearBorderGradientDirections);
     const repeatingLinearBorderGradientColors = theme('repeatingLinearBorderGradients.colors', defaultRepeatingLinearBorderGradientColors);
     const repeatingLinearBorderGradientLengths = theme('repeatingLinearBorderGradients.lengths', defaultRepeatingLinearBorderGradientLengths);
     const repeatingLinearBorderGradientVariants = variants('repeatingLinearBorderGradients', defaultRepeatingLinearBorderGradientVariants);
-    const repeatingRadialBorderGradientShapes = theme('repeatingRadialBorderGradients.shapes', defaultRepeatingRadialBorderGradientShapes);
-    const repeatingRadialBorderGradientSizes = theme('repeatingRadialBorderGradients.sizes', defaultRepeatingRadialBorderGradientSizes);
-    const repeatingRadialBorderGradientPositions = theme('repeatingRadialBorderGradients.positions', defaultRepeatingRadialBorderGradientPositions);
-    const repeatingRadialBorderGradientColors = theme('repeatingRadialBorderGradients.colors', defaultRepeatingRadialBorderGradientColors);
-    const repeatingRadialBorderGradientLengths = theme('repeatingRadialBorderGradients.lengths', defaultRepeatingRadialBorderGradientLengths);
-    const repeatingRadialBorderGradientVariants = variants('repeatingRadialBorderGradients', defaultRepeatingRadialBorderGradientVariants);
 
     const linearBorderGradientSelector = function(directionKey, colorKey, lengthKey) {
       return `.${e(`border-gradient-${directionKey}-${colorKey}${lengthKey ? `-${lengthKey}` : ''}`)}`;
     };
 
     const linearBorderGradientValue = function(direction, colors, length) {
       const cssDefaultLinearBorderGradientDirections = ['to bottom', '180deg', '0.5turn', '200grad', '3.1416rad'];
-      return `${!_.isNil(length) ? 'repeating-' : ''}linear-gradient(${_.includes(cssDefaultLinearBorderGradientDirections, direction) ? '' : `${direction}, `}${colors.join(', ')}${length ? ` ${length}` : ''})`;
-    };
-
-    const radialBorderGradientSelector = function(shapeKey, sizeKey, positionKey, colorKey, lengthKey) {
-      return `.${e(`border-radial${shapeKey === 'default' ? '' : `-${shapeKey}`}${sizeKey === 'default' ? '' : `-${sizeKey}`}${positionKey === 'default' ? '' : `-${positionKey}`}-${colorKey}${lengthKey ? `-${lengthKey}` : ''}`)}`;
-    };
-
-    const radialBorderGradientValue = function(shape, size, position, colors, length) {
-      const cssDefaultRadialBorderGradientShape = 'ellipse';
-      const cssDefaultRadialBorderGradientSize = 'farthest-corner';
-      const cssDefaultRadialBorderGradientPositions = ['center', 'center center', '50%', '50% 50%', 'center 50%', '50% center'];
-      let firstArgumentValues = [];
-      if (shape !== cssDefaultRadialBorderGradientShape) {
-        firstArgumentValues.push(shape);
-      }
-      if (size !== cssDefaultRadialBorderGradientSize) {
-        firstArgumentValues.push(size);
-      }
-      if (!_.includes(cssDefaultRadialBorderGradientPositions, position)) {
-        firstArgumentValues.push(`at ${position}`);
-      }
-      return `${!_.isNil(length) ? 'repeating-' : ''}radial-gradient(${firstArgumentValues.length > 0 ? `${firstArgumentValues.join(' ')}, ` : ''}${colors.join(', ')}${length ? ` ${length}` : ''})`;
+      return `${!_.isNil(length) ? 'repeating-' : ''}linear-gradient(${_.includes(cssDefaultLinearBorderGradientDirections, direction) ? '' : `${direction}, `}${colors.join(', ')}${length ? ` ${length}` : ''}) 1`;
     };
 
     const linearBorderGradientUtilities = (function() {
@@ -132,26 +73,6 @@ module.exports = function() {
       return utilities;
     })();
 
-    const radialBorderGradientUtilities = (function() {
-      let utilities = {};
-      _.forEach(radialBorderGradientColors, (colors, colorKey) => {
-        colors = normalizeColors(colors, false);
-        if (!colors) {
-          return; // continue
-        }
-        _.forEach(radialBorderGradientPositions, (position, positionKey) => {
-          _.forEach(radialBorderGradientSizes, (size, sizeKey) => {
-            _.forEach(radialBorderGradientShapes, (shape, shapeKey) => {
-              utilities[radialBorderGradientSelector(shapeKey, sizeKey, positionKey, colorKey)] = {
-                borderImage: radialBorderGradientValue(shape, size, position, colors),
-              };
-            });
-          });
-        });
-      });
-      return utilities;
-    })();
-
     const repeatingLinearBorderGradientUtilities = (function() {
       let utilities = {};
       _.forEach(repeatingLinearBorderGradientLengths, (length, lengthKey) => {
@@ -170,31 +91,7 @@ module.exports = function() {
       return utilities;
     })();
 
-    const repeatingRadialBorderGradientUtilities = (function() {
-      let utilities = {};
-      _.forEach(repeatingRadialBorderGradientLengths, (length, lengthKey) => {
-        _.forEach(repeatingRadialBorderGradientColors, (colors, colorKey) => {
-          colors = normalizeColors(colors, false);
-          if (!colors) {
-            return; // continue
-          }
-          _.forEach(repeatingRadialBorderGradientPositions, (position, positionKey) => {
-            _.forEach(repeatingRadialBorderGradientSizes, (size, sizeKey) => {
-              _.forEach(repeatingRadialBorderGradientShapes, (shape, shapeKey) => {
-                utilities[radialBorderGradientSelector(shapeKey, sizeKey, positionKey, colorKey, lengthKey)] = {
-                  borderImage: radialBorderGradientValue(shape, size, position, colors, length),
-                };
-              });
-            });
-          });
-        });
-      });
-      return utilities;
-    })();
-
     addUtilities(linearBorderGradientUtilities, linearBorderGradientVariants);
-    addUtilities(radialBorderGradientUtilities, radialBorderGradientVariants);
     addUtilities(repeatingLinearBorderGradientUtilities, repeatingLinearBorderGradientVariants);
-    addUtilities(repeatingRadialBorderGradientUtilities, repeatingRadialBorderGradientVariants);
   };
 };