tailwindcss-gradients - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

CHANGELOG.md

@@ -8,2 +8,7 @@ # Changelog
 
+## [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
@@ -73,3 +78,4 @@
 
-[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
@@ -76,0 +82,0 @@ [2.0.1]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.0...v2.0.1

index.js

@@ -26,2 +26,3 @@ const _ = require('lodash');
   return ({ theme, variants, e, addUtilities }) => {
+    const defaultBackgroundImageVariants = ['responsive'];
     const defaultLinearGradientDirections = {
@@ -71,2 +72,3 @@ 't': 'to top',
 
+    const backgroundImageVariants = variants('backgroundImage', defaultBackgroundImageVariants);
     const linearGradientDirections = theme('linearGradients.directions', defaultLinearGradientDirections);
@@ -121,2 +123,8 @@ const linearGradientColors = theme('linearGradients.colors', defaultLinearGradientColors);
 
+    const backgroundImageUtilities = {
+      '.bg-none': {
+        backgroundImage: 'none',
+      },
+    };
+
     const linearGradientUtilities = (function() {
@@ -198,2 +206,3 @@ let utilities = {};
 
+    addUtilities(backgroundImageUtilities, backgroundImageVariants);
     addUtilities(linearGradientUtilities, linearGradientVariants);
@@ -200,0 +209,0 @@ addUtilities(radialGradientUtilities, radialGradientVariants);

package.json

 {
   "name": "tailwindcss-gradients",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Tailwind CSS plugin to generate gradient background utilities",
@@ -18,3 +18,3 @@ "author": "Benoît Rouleau <[e-mail]>",
   "dependencies": {
-    "color": "^3.1.1",
+    "color": "^3.1.2",
     "lodash": "^4.17.11"
@@ -25,7 +25,7 @@ },
     "jest": "^24.8.0",
-    "jest-matcher-css": "^1.0.3",
-    "postcss": "^7.0.16",
-    "release-it": "^12.2.0",
-    "tailwindcss": "^1.0.1"
+    "jest-matcher-css": "^1.1.0",
+    "postcss": "^7.0.17",
+    "release-it": "^12.3.2",
+    "tailwindcss": "^1.0.4"
   }
 }

README.md

@@ -107,7 +107,8 @@ # Gradients Plugin for Tailwind CSS
   },
-  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'],
   },
@@ -123,2 +124,6 @@ plugins: [
 ```css
+.bg-none {
+  background-image: none;
+}
+
 /* configurable with the "linearGradients" theme object */
@@ -125,0 +130,0 @@ .bg-gradient-[direction-key]-[color-key] {

test.js

@@ -35,9 +35,18 @@ const _ = require('lodash');
 
-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({
@@ -63,7 +72,16 @@ theme: {
   }).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({
@@ -92,3 +110,12 @@ theme: {
   }).then(css => {
-    expect(css).toMatchCss(``);
+    expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
+      @media (min-width: 640px) {
+        .sm\\:bg-none {
+          background-image: none;
+        }
+      }
+    `);
   });
@@ -107,2 +134,3 @@ });
     variants: {
+      backgroundImage: [],
       linearGradients: [],
@@ -112,25 +140,28 @@ },
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .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(rgba(255, 0, 0, 0), #f00)
+        background-image: linear-gradient(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);
       }
@@ -151,2 +182,3 @@ `);
     variants: {
+      backgroundImage: [],
       linearGradients: [],
@@ -157,28 +189,31 @@ radialGradients: [],
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-radial-red {
-        background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-t-red {
-        background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-tr-red {
-        background-image: radial-gradient(closest-side at top right, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at top right, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-r-red {
-        background-image: radial-gradient(closest-side at right, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at right, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-br-red {
-        background-image: radial-gradient(closest-side at bottom right, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at bottom right, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-b-red {
-        background-image: radial-gradient(closest-side at bottom, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at bottom, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-bl-red {
-        background-image: radial-gradient(closest-side at bottom left, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at bottom left, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-l-red {
-        background-image: radial-gradient(closest-side at left, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at left, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-tl-red {
-        background-image: radial-gradient(closest-side at top left, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at top left, #f00, rgba(255, 0, 0, 0));
       }
@@ -212,2 +247,3 @@ `);
     variants: {
+      backgroundImage: [],
       linearGradients: [],
@@ -218,13 +254,16 @@ radialGradients: [],
     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)
+        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(closest-side at 55% 60%, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at 55% 60%, #f00, rgba(255, 0, 0, 0));
       }
@@ -258,2 +297,3 @@ `);
     variants: {
+      backgroundImage: [],
       linearGradients: [],
@@ -264,13 +304,16 @@ radialGradients: [],
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-to-bottom-red-green {
-        background-image: linear-gradient(#f00, #0f0)
+        background-image: linear-gradient(#f00, #0f0);
       }
       .bg-gradient-to-bottom-red-green-blue {
-        background-image: linear-gradient(#f00, #0f0, #00f)
+        background-image: linear-gradient(#f00, #0f0, #00f);
       }
       .bg-radial-red-green {
-        background-image: radial-gradient(closest-side, #f00, #0f0)
+        background-image: radial-gradient(closest-side, #f00, #0f0);
       }
       .bg-radial-red-green-blue {
-        background-image: radial-gradient(closest-side, #f00, #0f0, #00f)
+        background-image: radial-gradient(closest-side, #f00, #0f0, #00f);
       }
@@ -306,2 +349,3 @@ `);
     variants: {
+      backgroundImage: [],
       linearGradients: [],
@@ -312,25 +356,28 @@ radialGradients: [],
     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)
+        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-to-bottom-red {
-        background-image: linear-gradient(rgba(255, 0, 0, 0), #f00)
+        background-image: linear-gradient(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(rgba(0, 255, 0, 0), #0f0)
+        background-image: linear-gradient(rgba(0, 255, 0, 0), #0f0);
       }
       .bg-radial-top-red {
-        background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-bottom-red {
-        background-image: radial-gradient(closest-side at bottom, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at bottom, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-top-green {
-        background-image: radial-gradient(closest-side at top, #0f0, rgba(0, 255, 0, 0))
+        background-image: radial-gradient(closest-side at top, #0f0, rgba(0, 255, 0, 0));
       }
       .bg-radial-bottom-green {
-        background-image: radial-gradient(closest-side at bottom, #0f0, rgba(0, 255, 0, 0))
+        background-image: radial-gradient(closest-side at bottom, #0f0, rgba(0, 255, 0, 0));
       }
@@ -356,2 +403,3 @@ `);
     variants: {
+      backgroundImage: [],
       linearGradients: [],
@@ -362,7 +410,10 @@ radialGradients: [],
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-b-red {
-        background-image: linear-gradient(rgba(255, 0, 0, 0), #f00)
+        background-image: linear-gradient(rgba(255, 0, 0, 0), #f00);
       }
       .bg-gradient-b-blue {
-        background-image: linear-gradient(rgba(0, 0, 255, 0), #00f)
+        background-image: linear-gradient(rgba(0, 0, 255, 0), #00f);
       }
@@ -396,2 +447,3 @@ `);
     variants: {
+      backgroundImage: [],
       linearGradients: [],
@@ -402,25 +454,28 @@ radialGradients: [],
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-t-white {
-        background-image: linear-gradient(to top, rgba(255, 255, 255, 0), white)
+        background-image: linear-gradient(to top, rgba(255, 255, 255, 0), white);
       }
       .bg-gradient-t-black {
-        background-image: linear-gradient(to top, rgba(0, 0, 0, 0), black)
+        background-image: linear-gradient(to top, rgba(0, 0, 0, 0), black);
       }
       .bg-gradient-t-transparent {
-        background-image: linear-gradient(to top, rgba(0, 0, 0, 0), transparent)
+        background-image: linear-gradient(to top, rgba(0, 0, 0, 0), transparent);
       }
       .bg-gradient-t-current {
-        background-image: linear-gradient(to top, transparent, currentColor)
+        background-image: linear-gradient(to top, transparent, currentColor);
       }
       .bg-radial-t-white {
-        background-image: radial-gradient(closest-side at top, white, rgba(255, 255, 255, 0))
+        background-image: radial-gradient(closest-side at top, white, rgba(255, 255, 255, 0));
       }
       .bg-radial-t-black {
-        background-image: radial-gradient(closest-side at top, black, rgba(0, 0, 0, 0))
+        background-image: radial-gradient(closest-side at top, black, rgba(0, 0, 0, 0));
       }
       .bg-radial-t-transparent {
-        background-image: radial-gradient(closest-side at top, transparent, rgba(0, 0, 0, 0))
+        background-image: radial-gradient(closest-side at top, transparent, rgba(0, 0, 0, 0));
       }
       .bg-radial-t-current {
-        background-image: radial-gradient(closest-side at top, currentColor, transparent)
+        background-image: radial-gradient(closest-side at top, currentColor, transparent);
       }
@@ -455,2 +510,3 @@ `);
     variants: {
+      backgroundImage: [],
       linearGradients: [],
@@ -461,7 +517,10 @@ radialGradients: [],
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .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-t-red {
-        background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0));
       }
@@ -496,2 +555,3 @@ `);
     variants: {
+      backgroundImage: [],
       radialGradients: [],
@@ -501,49 +561,52 @@ },
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-radial-red {
-        background-image: radial-gradient(circle closest-side, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(circle closest-side, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-ellipse-red {
-        background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-cover-red {
-        background-image: radial-gradient(circle, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(circle, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-ellipse-cover-red {
-        background-image: radial-gradient(#f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(#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))
+        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(closest-side at top right, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side at top right, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-cover-tr-red {
-        background-image: radial-gradient(circle at top right, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(circle at top right, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-ellipse-cover-tr-red {
-        background-image: radial-gradient(at top right, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(at top right, #f00, rgba(255, 0, 0, 0));
       }
       .bg-radial-green-blue {
-        background-image: radial-gradient(circle closest-side, #0f0, #00f)
+        background-image: radial-gradient(circle closest-side, #0f0, #00f);
       }
       .bg-radial-ellipse-green-blue {
-        background-image: radial-gradient(closest-side, #0f0, #00f)
+        background-image: radial-gradient(closest-side, #0f0, #00f);
       }
       .bg-radial-cover-green-blue {
-        background-image: radial-gradient(circle, #0f0, #00f)
+        background-image: radial-gradient(circle, #0f0, #00f);
       }
       .bg-radial-ellipse-cover-green-blue {
-        background-image: radial-gradient(#0f0, #00f)
+        background-image: radial-gradient(#0f0, #00f);
       }
       .bg-radial-tr-green-blue {
-        background-image: radial-gradient(circle closest-side at top right, #0f0, #00f)
+        background-image: radial-gradient(circle closest-side at top right, #0f0, #00f);
       }
       .bg-radial-ellipse-tr-green-blue {
-        background-image: radial-gradient(closest-side at top right, #0f0, #00f)
+        background-image: radial-gradient(closest-side at top right, #0f0, #00f);
       }
       .bg-radial-cover-tr-green-blue {
-        background-image: radial-gradient(circle at top right, #0f0, #00f)
+        background-image: radial-gradient(circle at top right, #0f0, #00f);
       }
       .bg-radial-ellipse-cover-tr-green-blue {
-        background-image: radial-gradient(at top right, #0f0, #00f)
+        background-image: radial-gradient(at top right, #0f0, #00f);
       }
@@ -572,2 +635,3 @@ `);
     variants: {
+      backgroundImage: [],
       repeatingLinearGradients: [],
@@ -577,3 +641,7 @@ repeatingRadialGradients: [],
   }).then(css => {
-    expect(css).toMatchCss(``);
+    expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
+    `);
   });
@@ -613,2 +681,3 @@ });
     variants: {
+      backgroundImage: [],
       repeatingLinearGradients: [],
@@ -619,37 +688,40 @@ repeatingRadialGradients: [],
     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)
+        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 25px);
       }
       .bg-gradient-t-blue-sm {
-        background-image: repeating-linear-gradient(to top, rgba(0, 0, 255, 0), #00f 25px)
+        background-image: repeating-linear-gradient(to top, rgba(0, 0, 255, 0), #00f 25px);
       }
       .bg-gradient-t-red-md {
-        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 50px)
+        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 50px);
       }
       .bg-gradient-t-blue-md {
-        background-image: repeating-linear-gradient(to top, rgba(0, 0, 255, 0), #00f 50px)
+        background-image: repeating-linear-gradient(to top, rgba(0, 0, 255, 0), #00f 50px);
       }
       .bg-gradient-t-red-lg {
-        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 100px)
+        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 100px);
       }
       .bg-gradient-t-blue-lg {
-        background-image: repeating-linear-gradient(to top, rgba(0, 0, 255, 0), #00f 100px)
+        background-image: repeating-linear-gradient(to top, rgba(0, 0, 255, 0), #00f 100px);
       }
       .bg-radial-red-sm {
-        background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 10px)
+        background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 10px);
       }
       .bg-radial-blue-sm {
-        background-image: repeating-radial-gradient(#00f, rgba(0, 0, 255, 0) 10px)
+        background-image: repeating-radial-gradient(#00f, rgba(0, 0, 255, 0) 10px);
       }
       .bg-radial-red-md {
-        background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 20px)
+        background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 20px);
       }
       .bg-radial-blue-md {
-        background-image: repeating-radial-gradient(#00f, rgba(0, 0, 255, 0) 20px)
+        background-image: repeating-radial-gradient(#00f, rgba(0, 0, 255, 0) 20px);
       }
       .bg-radial-red-lg {
-        background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 30px)
+        background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 30px);
       }
       .bg-radial-blue-lg {
-        background-image: repeating-radial-gradient(#00f, rgba(0, 0, 255, 0) 30px)
+        background-image: repeating-radial-gradient(#00f, rgba(0, 0, 255, 0) 30px);
       }
@@ -699,2 +771,3 @@ `);
     variants: {
+      backgroundImage: [],
       linearGradients: [],
@@ -707,13 +780,16 @@ radialGradients: [],
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .bg-gradient-r-custom {
-        background-image: linear-gradient(to right, #000, #000 45%, #fff 55%, #fff)
+        background-image: linear-gradient(to right, #000, #000 45%, #fff 55%, #fff);
       }
       .bg-radial-custom {
-        background-image: radial-gradient(closest-side, #000, #000 45%, #fff 55%, #fff)
+        background-image: radial-gradient(closest-side, #000, #000 45%, #fff 55%, #fff);
       }
       .bg-gradient-r-custom-repeating {
-        background-image: repeating-linear-gradient(to right, #000, #000 10px, #fff 10px, #fff 20px)
+        background-image: repeating-linear-gradient(to right, #000, #000 10px, #fff 10px, #fff 20px);
       }
       .bg-radial-custom-repeating {
-        background-image: repeating-radial-gradient(#000, #000 10px, #fff 10px, #fff 20px)
+        background-image: repeating-radial-gradient(#000, #000 10px, #fff 10px, #fff 20px);
       }
@@ -760,26 +836,32 @@ `);
     expect(css).toMatchCss(`
+      .bg-none {
+        background-image: none;
+      }
       .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(closest-side, #f00, rgba(255, 0, 0, 0))
+        background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0));
       }
       .bg-gradient-t-red-repeating {
-        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px)
+        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px);
       }
       .bg-radial-red-repeating {
-        background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 10px)
+        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)
+          background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
         }
         .sm\\:bg-radial-red {
-          background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0))
+          background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0));
         }
         .sm\\:bg-gradient-t-red-repeating {
-          background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px)
+          background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px);
         }
         .sm\\:bg-radial-red-repeating {
-          background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 10px)
+          background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 10px);
         }
@@ -826,2 +908,3 @@ }
     variants: {
+      backgroundImage: ['focus'],
       linearGradients: ['hover', 'active'],
@@ -834,28 +917,34 @@ radialGradients: ['group-hover'],
     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)
+        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(closest-side at bottom, #00f, rgba(0, 0, 255, 0))
+        background-image: radial-gradient(closest-side at bottom, #00f, rgba(0, 0, 255, 0));
       }
       .group:hover .group-hover\\:bg-radial-b-blue {
-        background-image: radial-gradient(closest-side at bottom, #00f, rgba(0, 0, 255, 0))
+        background-image: radial-gradient(closest-side at bottom, #00f, rgba(0, 0, 255, 0));
       }
       .bg-gradient-t-red-repeating {
-        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px)
+        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px);
       }
       .active\\:bg-gradient-t-red-repeating:active {
-        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px)
+        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px);
       }
       .bg-radial-b-blue-repeating {
-        background-image: repeating-radial-gradient(at bottom, #00f, rgba(0, 0, 255, 0) 10px)
+        background-image: repeating-radial-gradient(at bottom, #00f, rgba(0, 0, 255, 0) 10px);
       }
       .hover\\:bg-radial-b-blue-repeating:hover {
-        background-image: repeating-radial-gradient(at bottom, #00f, rgba(0, 0, 255, 0) 10px)
+        background-image: repeating-radial-gradient(at bottom, #00f, rgba(0, 0, 255, 0) 10px);
       }
@@ -862,0 +951,0 @@ `);

No alert changes

Improved metrics

Lines of code

1105

9.62%

Number of lines in readme file

149

3.47%

Worsened metrics

Total package byte prevSize

43646

-7.65%

Number of package files

6

-14.29%

Dependency changes

• Updated

  color@^3.1.2