tailwindcss-gradients - npm Package Compare versions

Comparing version 2.0.0-beta.2 to 2.0.0

CHANGELOG.md

@@ -8,2 +8,21 @@ # Changelog
 
+## [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
+- Tailwind 1.0.0 compatibility
+
+### Changed since 1.x
+- 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
+
+### Fixed since 1.x
+- Single-color gradients now generate a transparent `rgba()` version of the color instead of using the `transparent` keyword, which is interpreted as `rgba(0, 0, 0, 0)` (transparent black) by Safari and the CSS spec
+
 ## [2.0.0-beta.2] - 2019-04-04
@@ -37,9 +56,12 @@
 
-## 1.0.0 - 2018-08-13
+## [1.0.0] - 2018-08-13
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.0-beta.1...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
 [1.0.1]: https://github.com/benface/tailwindcss-gradients/compare/v1.0.0...v1.0.1
+[1.0.0]: https://github.com/benface/tailwindcss-gradients/releases/tag/v1.0.0

index.js

 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 ({ config, e, addUtilities }) => {
-    const defaultDirections = {
+  return ({ theme, variants, e, addUtilities }) => {
+    const defaultLinearGradientDirections = {
       't': 'to top',
@@ -16,16 +26,39 @@ 'tr': 'to top right',
     };
-    const defaultColors = {};
-    const defaultVariants = ['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 gradientUtilities = (function() {
+    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 linearGradientUtilities = (function() {
       let utilities = {};
-      _.forEach(config('theme.gradients.colors', defaultColors), (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(config('theme.gradients.directions', defaultDirections), (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)})`,
           };
@@ -37,4 +70,21 @@ });
 
-    addUtilities(gradientUtilities, config('variants.gradients', defaultVariants));
+    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);
   };
 };

package.json

 {
   "name": "tailwindcss-gradients",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0",
   "description": "Tailwind CSS plugin to generate gradient background utilities",
@@ -18,3 +18,3 @@ "author": "Benoît Rouleau <[e-mail]>",
   "dependencies": {
-    "color": "^3.1.0",
+    "color": "^3.1.1",
     "lodash": "^4.17.11"
@@ -24,8 +24,8 @@ },
     "github-release-from-changelog": "^1.3.2",
-    "jest": "^24.7.1",
+    "jest": "^24.8.0",
     "jest-matcher-css": "^1.0.3",
-    "postcss": "^7.0.14",
-    "release-it": "^10.4.0",
-    "tailwindcss": "^1.0.0-beta.4"
+    "postcss": "^7.0.16",
+    "release-it": "^12.2.0",
+    "tailwindcss": "^1.0.1"
   }
 }

README.md

@@ -12,7 +12,7 @@ # Gradients Plugin for Tailwind CSS
 ```js
-// In your Tailwind CSS config
+// tailwind.config.js
 {
   theme: {
-    gradients: {
-      directions: {
+    linearGradients: {
+      directions: { // defaults to these values
         't': 'to top',
@@ -27,3 +27,3 @@ 'tr': 'to top right',
       },
-      colors: {
+      colors: { // defaults to {}
         'red': '#f00',
@@ -34,5 +34,30 @@ 'red-blue': ['#f00', '#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'],
+    linearGradients: ['responsive'], // defaults to ['responsive']
+    radialGradients: ['responsive'], // defaults to ['responsive']
   },
@@ -44,2 +69,26 @@ plugins: [
 ```
+or you can reference your existing theme colors:
+```js
+{
+  theme: {
+    colors: {
+      'red': '#f00',
+      'blue': '#00f',
+    },
+    linearGradients: theme => ({
+      // directions: { ... },
+      colors: theme('colors'),
+    }),
+    radialGradients: theme => ({
+      // shapes: { ... },
+      // sizes: { ... },
+      // positions: { ... },
+      colors: theme('colors'),
+    }),
+  },
+  plugins: [
+    require('tailwindcss-gradients')(),
+  ],
+}
+```
 
@@ -49,8 +98,12 @@ This plugin generates the following utilities:
 ```css
-/* configurable with the "gradients" theme key */
+/* 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], [...]);
+}
 ```
-
-Note: The `directions` key in `theme.gradients` is optional and defaults to the above values. Also, the `gradients` variants key defaults to `['responsive']`.

test.js

@@ -5,3 +5,2 @@ const _ = require('lodash');
 const tailwindcss = require('tailwindcss');
-const defaultConfig = require('tailwindcss/defaultConfig');
 const gradientsPlugin = require('./index.js');
@@ -18,9 +17,3 @@
         },
-        corePlugins: (function() {
-          let disabledCorePlugins = {};
-          Object.keys(defaultConfig.variants).forEach(corePlugin => {
-            disabledCorePlugins[corePlugin] = false;
-          });
-          return disabledCorePlugins;
-        })(),
+        corePlugins: false,
         plugins: [
@@ -32,3 +25,3 @@ gradientsPlugin(),
   )
-  .process('@tailwind utilities;', {
+  .process('@tailwind utilities', {
     from: undefined,
@@ -51,6 +44,6 @@ })
 
-test('there is no output without directions', () => {
+test('there is no output without directions or positions', () => {
   return generatePluginCss({
     theme: {
-      gradients: {
+      linearGradients: {
         directions: {},
@@ -63,2 +56,10 @@ colors: {
       },
+      radialGradients: {
+        positions: {},
+        colors: {
+          'red': '#f00',
+          'green': '#0f0',
+          'blue': '#00f',
+        },
+      },
     },
@@ -73,3 +74,3 @@ }).then(css => {
     theme: {
-      gradients: {
+      linearGradients: {
         directions: {
@@ -83,2 +84,12 @@ 't': 'to top',
       },
+      radialGradients: {
+        positions: {
+          'default': 'center',
+          't': 'top',
+          'r': 'right',
+          'b': 'bottom',
+          'l': 'left',
+        },
+        colors: {},
+      },
     },
@@ -90,6 +101,6 @@ }).then(css => {
 
-test('there are default directions', () => {
+test('linear gradients have default directions', () => {
   return generatePluginCss({
     theme: {
-      gradients: {
+      linearGradients: {
         colors: {
@@ -101,3 +112,3 @@ 'red': '#f00',
     variants: {
-      gradients: [],
+      linearGradients: [],
     },
@@ -107,24 +118,24 @@ }).then(css => {
       .bg-gradient-t-red {
-        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
       }
       .bg-gradient-tr-red {
-        background-image: linear-gradient(to top right, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to top right, rgba(255, 0, 0, 0), #f00)
       }
       .bg-gradient-r-red {
-        background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #f00)
       }
       .bg-gradient-br-red {
-        background-image: linear-gradient(to bottom right, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to bottom right, rgba(255, 0, 0, 0), #f00)
       }
       .bg-gradient-b-red {
-        background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00)
       }
       .bg-gradient-bl-red {
-        background-image: linear-gradient(to bottom left, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to bottom left, rgba(255, 0, 0, 0), #f00)
       }
       .bg-gradient-l-red {
-        background-image: linear-gradient(to left, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to left, rgba(255, 0, 0, 0), #f00)
       }
       .bg-gradient-tl-red {
-        background-image: linear-gradient(to top left, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to top left, rgba(255, 0, 0, 0), #f00)
       }
@@ -135,6 +146,52 @@ `);
 
-test('directions can be customized', () => {
+test('radial gradients have default shapes, sizes, and positions', () => {
   return generatePluginCss({
     theme: {
-      gradients: {
+      radialGradients: {
+        colors: {
+          'red': '#f00',
+        },
+      },
+    },
+    variants: {
+      linearGradients: [],
+      radialGradients: [],
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .bg-radial-red {
+        background-image: radial-gradient(ellipse closest-side at center, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-t-red {
+        background-image: radial-gradient(ellipse closest-side at top, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-tr-red {
+        background-image: radial-gradient(ellipse closest-side at top right, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-r-red {
+        background-image: radial-gradient(ellipse closest-side at right, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-br-red {
+        background-image: radial-gradient(ellipse closest-side at bottom right, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-b-red {
+        background-image: radial-gradient(ellipse closest-side at bottom, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-bl-red {
+        background-image: radial-gradient(ellipse closest-side at bottom left, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-l-red {
+        background-image: radial-gradient(ellipse closest-side at left, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-tl-red {
+        background-image: radial-gradient(ellipse closest-side at top left, #f00, rgba(255, 0, 0, 0))
+      }
+    `);
+  });
+});
+
+test('directions and positions can be customized', () => {
+  return generatePluginCss({
+    theme: {
+      linearGradients: {
         directions: {
@@ -149,5 +206,14 @@ 'to-top': 'to top',
       },
+      radialGradients: {
+        positions: {
+          'off-center': '55% 60%',
+        },
+        colors: {
+          'red': '#f00',
+        },
+      },
     },
     variants: {
-      gradients: [],
+      linearGradients: [],
+      radialGradients: [],
     },
@@ -157,10 +223,13 @@ }).then(css => {
       .bg-gradient-to-top-red {
-        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
       }
       .bg-gradient-to-top-green {
-        background-image: linear-gradient(to top, rgba(0, 255, 0, 0), #0f0);
+        background-image: linear-gradient(to top, rgba(0, 255, 0, 0), #0f0)
       }
       .bg-gradient-to-top-blue {
-        background-image: linear-gradient(to top, rgba(0, 0, 255, 0), #00f);
+        background-image: linear-gradient(to top, rgba(0, 0, 255, 0), #00f)
       }
+      .bg-radial-off-center-red {
+        background-image: radial-gradient(ellipse closest-side at 55% 60%, #f00, rgba(255, 0, 0, 0))
+      }
     `);
@@ -173,3 +242,3 @@ });
     theme: {
-      gradients: {
+      linearGradients: {
         directions: {
@@ -183,5 +252,15 @@ 'to-bottom': 'to bottom',
       },
+      radialGradients: {
+        positions: {
+          'default': 'center',
+        },
+        colors: {
+          'red-green': ['#f00', '#0f0'],
+          'red-green-blue': ['#f00', '#0f0', '#00f'],
+        },
+      },
     },
     variants: {
-      gradients: [],
+      linearGradients: [],
+      radialGradients: [],
     },
@@ -191,7 +270,13 @@ }).then(css => {
       .bg-gradient-to-bottom-red-green {
-        background-image: linear-gradient(to bottom, #f00, #0f0);
+        background-image: linear-gradient(to bottom, #f00, #0f0)
       }
       .bg-gradient-to-bottom-red-green-blue {
-        background-image: linear-gradient(to bottom, #f00, #0f0, #00f);
+        background-image: linear-gradient(to bottom, #f00, #0f0, #00f)
       }
+      .bg-radial-red-green {
+        background-image: radial-gradient(ellipse closest-side at center, #f00, #0f0)
+      }
+      .bg-radial-red-green-blue {
+        background-image: radial-gradient(ellipse closest-side at center, #f00, #0f0, #00f)
+      }
     `);
@@ -201,6 +286,6 @@ });
 
-test('multiple directions and multiple gradients can be used together', () => {
+test('multiple directions/positions and multiple colors can be used together', () => {
   return generatePluginCss({
     theme: {
-      gradients: {
+      linearGradients: {
         directions: {
@@ -215,5 +300,16 @@ 'to-top': 'to top',
       },
+      radialGradients: {
+        positions: {
+          'top': 'top',
+          'bottom': 'bottom',
+        },
+        colors: {
+          'red': ['#f00'],
+          'green': ['#0f0'],
+        },
+      },
     },
     variants: {
-      gradients: [],
+      linearGradients: [],
+      radialGradients: [],
     },
@@ -223,13 +319,25 @@ }).then(css => {
       .bg-gradient-to-top-red {
-        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
       }
       .bg-gradient-to-bottom-red {
-        background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00)
       }
       .bg-gradient-to-top-green {
-        background-image: linear-gradient(to top, rgba(0, 255, 0, 0), #0f0);
+        background-image: linear-gradient(to top, rgba(0, 255, 0, 0), #0f0)
       }
       .bg-gradient-to-bottom-green {
-        background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0), #0f0);
+        background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0), #0f0)
       }
+      .bg-radial-top-red {
+        background-image: radial-gradient(ellipse closest-side at top, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-bottom-red {
+        background-image: radial-gradient(ellipse closest-side at bottom, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-top-green {
+        background-image: radial-gradient(ellipse closest-side at top, #0f0, rgba(0, 255, 0, 0))
+      }
+      .bg-radial-bottom-green {
+        background-image: radial-gradient(ellipse closest-side at bottom, #0f0, rgba(0, 255, 0, 0))
+      }
     `);
@@ -239,7 +347,117 @@ });
 
-test('responsive utilities are generated by default', () => {
+test('colors can be referenced from the theme with a closure', () => {
   return generatePluginCss({
     theme: {
-      gradients: {
+      colors: {
+        'red': '#f00',
+        'blue': '#00f',
+      },
+      linearGradients: theme => ({
         directions: {
+          'b': 'to bottom',
+        },
+        colors: theme('colors'),
+      }),
+    },
+    variants: {
+      linearGradients: [],
+      radialGradients: [],
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .bg-gradient-b-red {
+        background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00)
+      }
+      .bg-gradient-b-blue {
+        background-image: linear-gradient(to bottom, rgba(0, 0, 255, 0), #00f)
+      }
+    `);
+  });
+});
+
+test('radial gradient shapes and sizes can be customized', () => {
+  return generatePluginCss({
+    theme: {
+      colors: {
+        'red': '#f00',
+        'green-blue': ['#0f0', '#00f'],
+      },
+      radialGradients: theme => ({
+        shapes: {
+          'default': 'circle',
+          'ellipse': 'ellipse',
+        },
+        sizes: {
+          'default': 'closest-side',
+          'cover': 'farthest-corner',
+        },
+        positions: {
+          'default': 'center',
+          'tr': 'top right',
+        },
+        colors: theme('colors'),
+      }),
+    },
+    variants: {
+      radialGradients: [],
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .bg-radial-red {
+        background-image: radial-gradient(circle closest-side at center, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-ellipse-red {
+        background-image: radial-gradient(ellipse closest-side at center, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-cover-red {
+        background-image: radial-gradient(circle farthest-corner at center, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-ellipse-cover-red {
+        background-image: radial-gradient(ellipse farthest-corner at center, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-tr-red {
+        background-image: radial-gradient(circle closest-side at top right, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-ellipse-tr-red {
+        background-image: radial-gradient(ellipse closest-side at top right, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-cover-tr-red {
+        background-image: radial-gradient(circle farthest-corner at top right, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-ellipse-cover-tr-red {
+        background-image: radial-gradient(ellipse farthest-corner at top right, #f00, rgba(255, 0, 0, 0))
+      }
+      .bg-radial-green-blue {
+        background-image: radial-gradient(circle closest-side at center, #0f0, #00f)
+      }
+      .bg-radial-ellipse-green-blue {
+        background-image: radial-gradient(ellipse closest-side at center, #0f0, #00f)
+      }
+      .bg-radial-cover-green-blue {
+        background-image: radial-gradient(circle farthest-corner at center, #0f0, #00f)
+      }
+      .bg-radial-ellipse-cover-green-blue {
+        background-image: radial-gradient(ellipse farthest-corner at center, #0f0, #00f)
+      }
+      .bg-radial-tr-green-blue {
+        background-image: radial-gradient(circle closest-side at top right, #0f0, #00f)
+      }
+      .bg-radial-ellipse-tr-green-blue {
+        background-image: radial-gradient(ellipse closest-side at top right, #0f0, #00f)
+      }
+      .bg-radial-cover-tr-green-blue {
+        background-image: radial-gradient(circle farthest-corner at top right, #0f0, #00f)
+      }
+      .bg-radial-ellipse-cover-tr-green-blue {
+        background-image: radial-gradient(ellipse farthest-corner at top right, #0f0, #00f)
+      }
+    `);
+  });
+});
+
+test('responsive variants are generated by default', () => {
+  return generatePluginCss({
+    theme: {
+      linearGradients: {
+        directions: {
           't': 'to top',
@@ -251,2 +469,10 @@ },
       },
+      radialGradients: {
+        positions: {
+          'default': 'center',
+        },
+        colors: {
+          'red': '#f00',
+        },
+      },
     },
@@ -256,8 +482,14 @@ }).then(css => {
       .bg-gradient-t-red {
-        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
       }
+      .bg-radial-red {
+        background-image: radial-gradient(ellipse closest-side at center, #f00, rgba(255, 0, 0, 0))
+      }
       @media (min-width: 640px) {
         .sm\\:bg-gradient-t-red {
-          background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
+          background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
         }
+        .sm\\:bg-radial-red {
+          background-image: radial-gradient(ellipse closest-side at center, #f00, rgba(255, 0, 0, 0))
+        }
       }
@@ -271,3 +503,3 @@ `);
     theme: {
-      gradients: {
+      linearGradients: {
         directions: {
@@ -280,5 +512,14 @@ 't': 'to top',
       },
+      radialGradients: {
+        positions: {
+          'b': 'bottom',
+        },
+        colors: {
+          'blue': '#00f',
+        },
+      },
     },
     variants: {
-      gradients: ['hover', 'active'],
+      linearGradients: ['hover', 'active'],
+      radialGradients: ['group-hover'],
     },
@@ -288,12 +529,18 @@ }).then(css => {
       .bg-gradient-t-red {
-        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
       }
       .hover\\:bg-gradient-t-red:hover {
-        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
       }
       .active\\:bg-gradient-t-red:active {
-        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
       }
+      .bg-radial-b-blue {
+        background-image: radial-gradient(ellipse closest-side at bottom, #00f, rgba(0, 0, 255, 0))
+      }
+      .group:hover .group-hover\\:bg-radial-b-blue {
+        background-image: radial-gradient(ellipse closest-side at bottom, #00f, rgba(0, 0, 255, 0))
+      }
     `);
   });
 });

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30422

increased by71.37%

Lines of code

594

increased by96.04%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

105

increased by101.92%

Dependency changes

• Updatedcolor@^3.1.1