Add bg-none utility (fix #11)

Author: benface

CHANGELOG.md

@@ -5,6 +5,11 @@ 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.2.0] - 2019-07-05
+
+### Added
+- Added a `bg-none` utility to remove gradients on larger screens (e.g. `bg-gradient-b-black sm:bg-none`)
+
 ## [2.1.0] - 2019-05-24
 
 ### Added
@@ -69,7 +74,8 @@ and this project mostly adheres to [Semantic Versioning](https://semver.org/spec
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v2.1.0...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v2.2.0...HEAD
+[2.2.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.1.0...v2.2.0
 [2.1.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.1...v2.1.0
 [2.0.1]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.0...v2.0.1
 [2.0.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.0-beta.2...v2.0.0

README.md

@@ -104,11 +104,12 @@ npm install tailwindcss-gradients
       },
     }),
   },
-  variants: {
-    linearGradients: ['responsive'], // defaults to ['responsive']
-    radialGradients: ['responsive'], // defaults to ['responsive']
-    repeatingLinearGradients: ['responsive'], // defaults to ['responsive']
-    repeatingRadialGradients: ['responsive'], // defaults to ['responsive']
+  variants: { // all the following default to ['responsive']
+    backgroundImage: ['responsive'], // this is for the "bg-none" utility
+    linearGradients: ['responsive'],
+    radialGradients: ['responsive'],
+    repeatingLinearGradients: ['responsive'],
+    repeatingRadialGradients: ['responsive'],
   },
   plugins: [
     require('tailwindcss-gradients')(),
@@ -119,6 +120,10 @@ npm install tailwindcss-gradients
 This plugin generates the following utilities:
 
 ```css
+.bg-none {
+  background-image: none;
+}
+
 /* configurable with the "linearGradients" theme object */
 .bg-gradient-[direction-key]-[color-key] {
   background-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]);

index.js

@@ -23,6 +23,7 @@ const normalizeColors = function(colors, transparentFirst = true) {
 
 module.exports = function() {
   return ({ theme, variants, e, addUtilities }) => {
+    const defaultBackgroundImageVariants = ['responsive'];
     const defaultLinearGradientDirections = {
       't': 'to top',
       'tr': 'to top right',
@@ -67,6 +68,7 @@ module.exports = function() {
     const defaultRepeatingRadialGradientLengths = {};
     const defaultRepeatingRadialGradientVariants = ['responsive'];
 
+    const backgroundImageVariants = variants('backgroundImage', defaultBackgroundImageVariants);
     const linearGradientDirections = theme('linearGradients.directions', defaultLinearGradientDirections);
     const linearGradientColors = theme('linearGradients.colors', defaultLinearGradientColors);
     const linearGradientVariants = variants('linearGradients', defaultLinearGradientVariants);
@@ -116,6 +118,12 @@ module.exports = function() {
       return `${!_.isNil(length) ? 'repeating-' : ''}radial-gradient(${firstArgumentValues.length > 0 ? `${firstArgumentValues.join(' ')}, ` : ''}${colors.join(', ')}${length ? ` ${length}` : ''})`;
     };
 
+    const backgroundImageUtilities = {
+      '.bg-none': {
+        backgroundImage: 'none',
+      },
+    };
+
     const linearGradientUtilities = (function() {
       let utilities = {};
       _.forEach(linearGradientColors, (colors, colorKey) => {
@@ -192,6 +200,7 @@ module.exports = function() {
       return utilities;
     })();
 
+    addUtilities(backgroundImageUtilities, backgroundImageVariants);
     addUtilities(linearGradientUtilities, linearGradientVariants);
     addUtilities(radialGradientUtilities, radialGradientVariants);
     addUtilities(repeatingLinearGradientUtilities, repeatingLinearGradientVariants);

test.js

@@ -32,13 +32,22 @@ expect.extend({
   toMatchCss: cssMatcher,
 });
 
-test('there is no output by default', () => {
+test('only one utility is generated by default', () => {
   return generatePluginCss().then(css => {
-    expect(css).toMatchCss(``);
+    expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
+      @media (min-width: 640px) {
+        .sm\\:bg-none {
+          background-image: none;
+        }
+      }
+    `);
   });
 });
 
-test('there is no output without directions or positions', () => {
+test('no gradient is generated without directions or positions', () => {
   return generatePluginCss({
     theme: {
       linearGradients: {
@@ -59,11 +68,20 @@ test('there is no output without directions or positions', () => {
       },
     },
   }).then(css => {
-    expect(css).toMatchCss(``);
+    expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
+      @media (min-width: 640px) {
+        .sm\\:bg-none {
+          background-image: none;
+        }
+      }
+    `);
   });
 });
 
-test('there is no output without colors', () => {
+test('no gradient is generated without colors', () => {
   return generatePluginCss({
     theme: {
       linearGradients: {
@@ -87,7 +105,16 @@ test('there is no output without colors', () => {
       },
     },
   }).then(css => {
-    expect(css).toMatchCss(``);
+    expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
+      @media (min-width: 640px) {
+        .sm\\:bg-none {
+          background-image: none;
+        }
+      }
+    `);
   });
 });
 
@@ -101,10 +128,14 @@ test('linear gradients have default directions', () => {
       },
     },
     variants: {
+      backgroundImage: [],
       linearGradients: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-t-red {
         background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
@@ -143,11 +174,15 @@ test('radial gradients have default shapes, sizes, and positions', () => {
       },
     },
     variants: {
+      backgroundImage: [],
       linearGradients: [],
       radialGradients: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-radial-red {
         background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0));
       }
@@ -202,11 +237,15 @@ test('directions and positions can be customized', () => {
       },
     },
     variants: {
+      backgroundImage: [],
       linearGradients: [],
       radialGradients: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-to-top-red {
         background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
@@ -246,11 +285,15 @@ test('gradients can have multiple colors', () => {
       },
     },
     variants: {
+      backgroundImage: [],
       linearGradients: [],
       radialGradients: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-to-bottom-red-green {
         background-image: linear-gradient(#f00, #0f0);
       }
@@ -292,11 +335,15 @@ test('multiple directions/positions and multiple colors can be used together', (
       },
     },
     variants: {
+      backgroundImage: [],
       linearGradients: [],
       radialGradients: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-to-top-red {
         background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
@@ -340,11 +387,15 @@ test('colors can be referenced from the theme with a closure', () => {
       }),
     },
     variants: {
+      backgroundImage: [],
       linearGradients: [],
       radialGradients: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-b-red {
         background-image: linear-gradient(rgba(255, 0, 0, 0), #f00);
       }
@@ -378,11 +429,15 @@ test('color keywords are accepted', () => {
       }),
     },
     variants: {
+      backgroundImage: [],
       linearGradients: [],
       radialGradients: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-t-white {
         background-image: linear-gradient(to top, rgba(255, 255, 255, 0), white);
       }
@@ -435,11 +490,15 @@ test('some keywords such as inherit are skipped', () => {
       }),
     },
     variants: {
+      backgroundImage: [],
       linearGradients: [],
       radialGradients: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-t-red {
         background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
@@ -474,10 +533,14 @@ test('radial gradient shapes and sizes can be customized', () => {
       }),
     },
     variants: {
+      backgroundImage: [],
       radialGradients: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-radial-red {
         background-image: radial-gradient(circle closest-side, #f00, rgba(255, 0, 0, 0));
       }
@@ -548,11 +611,16 @@ test('there is no output for repeating gradients without lengths', () => {
       }),
     },
     variants: {
+      backgroundImage: [],
       repeatingLinearGradients: [],
       repeatingRadialGradients: [],
     },
   }).then(css => {
-    expect(css).toMatchCss(``);
+    expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
+    `);
   });
 });
 
@@ -587,11 +655,15 @@ test('lengths can be customized', () => {
       }),
     },
     variants: {
+      backgroundImage: [],
       repeatingLinearGradients: [],
       repeatingRadialGradients: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-t-red-sm {
         background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 25px);
       }
@@ -671,13 +743,17 @@ test('color stops can be customized', () => {
       }),
     },
     variants: {
+      backgroundImage: [],
       linearGradients: [],
       radialGradients: [],
       repeatingLinearGradients: [],
       repeatingRadialGradients: [],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-r-custom {
         background-image: linear-gradient(to right, #000, #000 45%, #fff 55%, #fff);
       }
@@ -730,6 +806,9 @@ test('responsive variants are generated by default', () => {
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-t-red {
         background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
@@ -743,6 +822,9 @@ test('responsive variants are generated by default', () => {
         background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 10px);
       }
       @media (min-width: 640px) {
+        .sm\\:bg-none {
+          background-image: none;
+        }
         .sm\\:bg-gradient-t-red {
           background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
         }
@@ -795,13 +877,20 @@ test('variants can be customized', () => {
       }),
     },
     variants: {
+      backgroundImage: ['focus'],
       linearGradients: ['hover', 'active'],
       radialGradients: ['group-hover'],
       repeatingLinearGradients: ['active'],
       repeatingRadialGradients: ['hover'],
     },
   }).then(css => {
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
+      .focus\\:bg-none:focus {
+        background-image: none;
+      }
       .bg-gradient-t-red {
         background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }