tailwindcss-border-gradient-radius - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

CHANGELOG.md

@@ -0,1 +1,3 @@
+## [3.0.0] - 2022-03-08
+Updates to Tailwind 3.
 ## [2.0.0] - 2021-01-10
@@ -2,0 +4,0 @@ Seperate border logic to optimize build size

index.js

@@ -7,123 +7,121 @@ const plugin = require('tailwindcss/plugin');
 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'];
-    if (_.intersection(unsupportedColorKeywords, colors).length > 0) {
-      return null;
-    }
-    if (colors.length === 1) {
-      const color = colors[0];
-      let transparentColor = 'transparent';
-      try {
-        const parsedColor = Color(color);
-        transparentColor = parsedColor.alpha(0).rgb().string();
+  return _(colors)
+    .flatMap((color, name) => {
+      if (!_.isPlainObject(color)) {
+        return [[name, color]];
       }
-      catch (e) {
-      }
-      colors = transparentFirst ? [transparentColor, color] : [color, transparentColor];
+      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'];
+  if (_.intersection(unsupportedColorKeywords, colors).length > 0) {
+    return null;
+  }
+  if (colors.length === 1) {
+    const color = colors[0];
+    let transparentColor = 'transparent';
+    try {
+      const parsedColor = Color(color);
+      transparentColor = parsedColor.alpha(0).rgb().string();
     }
-    return colors;
-  };
-  
-  module.exports = plugin(function({ theme, variants, e, addUtilities }) {
+    catch (e) {
+    }
+    colors = transparentFirst ? [transparentColor, color] : [color, transparentColor];
+  }
+  return colors;
+};
 
-    const defaultLinearBorderGradientDirections = {
-      '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 defaultLinearBorderGradientColors = {};
-    const defaultLinearBorderGradientBackgroundColors = {};
-    const defaultLinearBorderGradientBorderWidth = {
-      '1': '1px',
-      '2': '2px',
-      '4': '4px',
-    };
-    const defaultLinearBorderGradientVariants = ['responsive'];
+module.exports = plugin(function({ theme, e, addUtilities }) {
 
-    const linearBorderGradientDirections = theme('linearBorderGradients.directions', defaultLinearBorderGradientDirections);
-    const linearBorderGradientColors = theme('linearBorderGradients.colors', defaultLinearBorderGradientColors);
-    const linearBorderGradientBackgroundColor = theme('linearBorderGradients.background', defaultLinearBorderGradientBackgroundColors);
-    const linearBorderGradientBorderWidth = theme('linearBorderGradients.borders', defaultLinearBorderGradientBorderWidth);
-    const linearBorderGradientVariants = variants('linearBorderGradients', defaultLinearBorderGradientVariants);
+const defaultLinearBorderGradientDirections = {
+  '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 defaultLinearBorderGradientColors = {};
+const defaultLinearBorderGradientBackgroundColors = {};
+const defaultLinearBorderGradientBorderWidth = {
+  '1': '1px',
+  '2': '2px',
+  '4': '4px',
+};
 
-    const linearBorderGradientSelector = function(directionKey, colorKey, backgroundKey) {
-      return `.${e(`border-gradient-${directionKey}-${colorKey}-${backgroundKey}`)}`;
-    };
+const linearBorderGradientDirections = theme('linearBorderGradients.directions', defaultLinearBorderGradientDirections);
+const linearBorderGradientColors = theme('linearBorderGradients.colors', defaultLinearBorderGradientColors);
+const linearBorderGradientBackgroundColor = theme('linearBorderGradients.background', defaultLinearBorderGradientBackgroundColors);
+const linearBorderGradientBorderWidth = theme('linearBorderGradients.borders', defaultLinearBorderGradientBorderWidth);
 
-    const linearBorderGradientBorderSelector = function(borderKey) {
-      return `.${e(`gradient-border-${borderKey}`)}`;
-    };
+const linearBorderGradientSelector = function(directionKey, colorKey, backgroundKey) {
+  return `.${e(`border-gradient-${directionKey}-${colorKey}-${backgroundKey}`)}`;
+};
 
-    const linearBorderGradientValue = function(direction, colors) {
-      const cssDefaultLinearBorderGradientDirections = ['to bottom', '180deg', '0.5turn', '200grad', '3.1416rad'];
-      return `linear-gradient(${_.includes(cssDefaultLinearBorderGradientDirections, direction) ? '' : `${direction}, `}${colors.join(', ')})`;
-    };
+const linearBorderGradientBorderSelector = function(borderKey) {
+  return `.${e(`gradient-border-${borderKey}`)}`;
+};
 
-    const linearBorderGradientBackgroundColorValue = function(gradientBackgroundColor) {
-      return `linear-gradient( to right, ${gradientBackgroundColor}, ${gradientBackgroundColor} )`;
-    };
+const linearBorderGradientValue = function(direction, colors) {
+  const cssDefaultLinearBorderGradientDirections = ['to bottom', '180deg', '0.5turn', '200grad', '3.1416rad'];
+  return `linear-gradient(${_.includes(cssDefaultLinearBorderGradientDirections, direction) ? '' : `${direction}, `}${colors.join(', ')})`;
+};
 
-    const linearBorderGradientBorderValue = function(border) {
-      return `${border} solid transparent`;
-    };
+const linearBorderGradientBackgroundColorValue = function(gradientBackgroundColor) {
+  return `linear-gradient( to right, ${gradientBackgroundColor}, ${gradientBackgroundColor} )`;
+};
 
-    const linearBorderGradientUtilities = (function() {
-      let utilities = {};
-      _.forEach(flattenColorPalette(linearBorderGradientColors), (colors, colorKey) => {
-        colors = normalizeColors(colors, true);
-        if (!colors) {
-          return; // continue
-        }
-        _.forEach(flattenColorPalette(linearBorderGradientBackgroundColor), (gradientBackgroundColor, backgroundKey) => {
-          gradientBackgroundColor = _.tail(normalizeColors(gradientBackgroundColor, true));
-          if (!gradientBackgroundColor) {
-            return; // continue
-          }
-          _.forEach(linearBorderGradientDirections, (direction, directionKey) => {
-            utilities[linearBorderGradientSelector(directionKey, colorKey, backgroundKey)] = {
-              background: 
-                  `${linearBorderGradientBackgroundColorValue(gradientBackgroundColor)}, ${linearBorderGradientValue(direction, colors)}`,
-              backgroundClip: 'padding-box, border-box',
-              backgroundOrigin: 'padding-box, border-box',
-            };
-          });
-        });
+const linearBorderGradientBorderValue = function(border) {
+  return `${border} solid transparent`;
+};
+
+const linearBorderGradientUtilities = (function() {
+  let utilities = {};
+  _.forEach(flattenColorPalette(linearBorderGradientColors), (colors, colorKey) => {
+    colors = normalizeColors(colors, true);
+    if (!colors) {
+      return; // continue
+    }
+    _.forEach(flattenColorPalette(linearBorderGradientBackgroundColor), (gradientBackgroundColor, backgroundKey) => {
+      gradientBackgroundColor = _.tail(normalizeColors(gradientBackgroundColor, true));
+      if (!gradientBackgroundColor) {
+        return; // continue
+      }
+      _.forEach(linearBorderGradientDirections, (direction, directionKey) => {
+        utilities[linearBorderGradientSelector(directionKey, colorKey, backgroundKey)] = {
+          background: 
+              `${linearBorderGradientBackgroundColorValue(gradientBackgroundColor)}, ${linearBorderGradientValue(direction, colors)}`,
+          backgroundClip: 'padding-box, border-box',
+          backgroundOrigin: 'padding-box, border-box',
+        };
       });
-      return utilities;
-    })();
+    });
+  });
+  return utilities;
+})();
 
 
-    const linearBorderGradientBorderUtilities = (function() {
-      let utilities = {};
-      _.forEach(linearBorderGradientBorderWidth, (border, borderKey) => {
-        utilities[linearBorderGradientBorderSelector(borderKey)] = {
-        border: `${linearBorderGradientBorderValue(border)}`,
-      };
-      });
-      return utilities;
-    })();
+const linearBorderGradientBorderUtilities = (function() {
+  let utilities = {};
+  _.forEach(linearBorderGradientBorderWidth, (border, borderKey) => {
+    utilities[linearBorderGradientBorderSelector(borderKey)] = {
+    border: `${linearBorderGradientBorderValue(border)}`,
+  };
+  });
+  return utilities;
+})();
+
+  addUtilities(linearBorderGradientUtilities);
+  addUtilities(linearBorderGradientBorderUtilities);
   
-      addUtilities(linearBorderGradientUtilities, linearBorderGradientVariants);
-      addUtilities(linearBorderGradientBorderUtilities, linearBorderGradientVariants);
-      
-  });
+});

package.json

 {
   "name": "tailwindcss-border-gradient-radius",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Tailwind CSS plugin for generating border gradients with could be used with the rounded utility",
@@ -27,7 +27,6 @@ "author": "Sven Batista Steinbach ",
     "jest-matcher-css": "^1.1.0",
-    "postcss": "^7.0.32",
-    "release-it": "^13.6.5",
-    "tailwindcss": "^2.0.2"
+    "release-it": "^14.12.5",
+    "tailwindcss": "^3.0.23"
   },
   "main": "index.js"
 }

README.md

@@ -5,5 +5,3 @@ # Border Gradients Plugin for Tailwind CSS based on background-origin and background-image
 
-> The plugin is based on [tailwindcss-gradients](https://github.com/benface/tailwindcss-gradients).
 
-
 ![BorderGradientRounded](./img/border-gradient-rounded.png)
@@ -14,3 +12,3 @@
 
-This plugin requires Tailwind CSS 1.2 or later. It's recommended to use the new 2.x version. 
+This plugin requires Tailwind CSS 3 or later.
 
@@ -28,8 +26,10 @@ ## Installation
 {
-  theme: {
-    linearBorderGradients: theme => ({
-        colors: theme('colors'),
-        background: theme('colors'),
-        }),
-  },
+  theme:     
+    extend: {
+      linearBorderGradients: ({theme }) => ({
+      colors: {
+        'light-blue': [colors.indigo[200], colors.lime[300]],
+      },
+      background: theme('colors'),
+      }),
   plugins: [
@@ -72,6 +72,6 @@ require('tailwindcss-border-gradient-radius'),
       background: {
-        'gray-50': '#F9FAFB'.
+        'gray-50': '#F9FAFB',
         'gray-900':'#111827',
       },
-      border: { // defaults to these values (optional)
+      borders: { // defaults to these values (optional)
         '1': '1px',
@@ -84,5 +84,2 @@ '2': '2px',
   },
-  variants: {
-    linearBorderGradients: ['responsive', 'hover', 'dark'], // defaults to ['responsive']
-  },
   plugins: [
@@ -130,3 +127,3 @@ require('tailwindcss-border-gradient-radius'),
     <h1 class="text-gray-100 text-medium mb-3">Border gradient with rounded-full, hover and gradient-border utility</h1>
-    <button type="button" class="inline-flex items-center px-6 py-3 border-gradient-br-blue-green-gray-900 hover:border-gradient-tl-blue-green-gray-900 gradient-border-3 rounded-full text-gray-100 text-lg">Button text</button>
+    <button type="button" class="inline-flex items-center px-6 py-3 border-gradient-br-blue-green-gray-900 hover:border-gradient-tl-blue-green-gray-900 gradient-border-2 rounded-full text-gray-100 text-lg">Button text</button>
   </div>
@@ -136,2 +133,2 @@ </div>
 
-```
+```

No alert changes

Improved metrics

Dev dependency count

5

-16.67%

Worsened metrics

Total package byte prevSize

39821

-1.91%

Lines of code

114

-1.72%

Number of lines in readme file

128

-1.54%

No dependency changes