Remove checked variant (fix #8)

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).
 
+## [5.0.0] - 2020-08-04
+
+### Removed
+- Removed the `checked` variant since it is built into Tailwind as of v1.5
+
 ## [4.0.0] - 2020-05-09
 
 ### Removed

README.md

@@ -25,7 +25,7 @@ module.exports = {
     },
   },
   variants: {
-    backgroundColor: ['checked', 'group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover'],
+    backgroundColor: ['group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover'],
   },
   plugins: [
     require('tailwindcss-interaction-variants'),
@@ -40,10 +40,6 @@ The above configuration would generate the following CSS:
   background-color: black;
 }
 
-.checked\:bg-black:checked {
-  background-color: black;
-}
-
 .group:focus-within .group-focus-within\:bg-black {
   background-color: black;
 }

index.js

@@ -37,7 +37,6 @@ module.exports = plugin(function({ addVariant, config, e, postcss }) {
     };
   };
 
-  addVariant('checked', pseudoClassVariant('checked'));
   addVariant('group-focus-within', groupPseudoClassVariant('focus-within'));
   addVariant('group-active', groupPseudoClassVariant('active'));
   addVariant('group-visited', groupPseudoClassVariant('visited'));

test.js

@@ -48,19 +48,6 @@ test('the plugin doesn’t do anything if the variants aren’t used', () => {
   });
 });
 
-test('the checked variant is working', () => {
-  return generatePluginCss(['checked']).then(css => {
-    expect(css).toMatchCss(`
-      .w-1\\/2 {
-        width: 50%;
-      }
-      .checked\\:w-1\\/2:checked {
-        width: 50%;
-      }
-    `);
-  });
-});
-
 test('the hocus variant is working', () => {
   return generatePluginCss(['hocus']).then(css => {
     expect(css).toMatchCss(`
@@ -118,14 +105,11 @@ test('the no-hover variant is working', () => {
 });
 
 test('all the variants are working', () => {
-  return generatePluginCss(['checked', 'group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover']).then(css => {
+  return generatePluginCss(['group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover']).then(css => {
     expect(css).toMatchCss(`
       .w-1\\/2 {
         width: 50%;
       }
-      .checked\\:w-1\\/2:checked {
-        width: 50%;
-      }
       .group:focus-within .group-focus-within\\:w-1\\/2 {
         width: 50%;
       }
@@ -159,14 +143,11 @@ test('all the variants are working', () => {
 });
 
 test('all variants can be chained with the responsive variant', () => {
-  return generatePluginCss(['checked', 'group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover', 'responsive']).then(css => {
+  return generatePluginCss(['group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover', 'responsive']).then(css => {
     expect(css).toMatchCss(`
       .w-1\\/2 {
         width: 50%;
       }
-      .checked\\:w-1\\/2:checked {
-        width: 50%;
-      }
       .group:focus-within .group-focus-within\\:w-1\\/2 {
         width: 50%;
       }
@@ -199,9 +180,6 @@ test('all variants can be chained with the responsive variant', () => {
         .sm\\:w-1\\/2 {
           width: 50%;
         }
-        .sm\\:checked\\:w-1\\/2:checked {
-          width: 50%;
-        }
         .group:focus-within .sm\\:group-focus-within\\:w-1\\/2 {
           width: 50%;
         }
@@ -236,7 +214,7 @@ test('all variants can be chained with the responsive variant', () => {
 });
 
 test('the variants work with Tailwind’s prefix option', () => {
-  return generatePluginCss(['hover', 'checked', 'hocus', 'group-hocus', 'can-hover', 'no-hover'], {
+  return generatePluginCss(['hover', 'hocus', 'group-hocus', 'can-hover', 'no-hover'], {
     prefix: 'tw-',
   }).then(css => {
     expect(css).toMatchCss(`
@@ -246,9 +224,6 @@ test('the variants work with Tailwind’s prefix option', () => {
       .hover\\:tw-w-1\\/2:hover {
         width: 50%;
       }
-      .checked\\:tw-w-1\\/2:checked {
-        width: 50%;
-      }
       .hocus\\:tw-w-1\\/2:hover, .hocus\\:tw-w-1\\/2:focus {
         width: 50%;
       }
@@ -270,7 +245,7 @@ test('the variants work with Tailwind’s prefix option', () => {
 });
 
 test('the variants work with Tailwind’s important option', () => {
-  return generatePluginCss(['hover', 'checked', 'hocus', 'group-hocus', 'can-hover', 'no-hover'], {
+  return generatePluginCss(['hover', 'hocus', 'group-hocus', 'can-hover', 'no-hover'], {
     important: true,
   }).then(css => {
     expect(css).toMatchCss(`
@@ -280,9 +255,6 @@ test('the variants work with Tailwind’s important option', () => {
       .hover\\:w-1\\/2:hover {
         width: 50% !important;
       }
-      .checked\\:w-1\\/2:checked {
-        width: 50% !important;
-      }
       .hocus\\:w-1\\/2:hover, .hocus\\:w-1\\/2:focus {
         width: 50% !important;
       }
@@ -304,7 +276,7 @@ test('the variants work with Tailwind’s important option', () => {
 });
 
 test('the variants work with Tailwind’s important option set to a selector', () => {
-  return generatePluginCss(['hover', 'checked', 'hocus', 'group-hocus', 'can-hover', 'no-hover'], {
+  return generatePluginCss(['hover', 'hocus', 'group-hocus', 'can-hover', 'no-hover'], {
     important: '#app',
   }).then(css => {
     expect(css).toMatchCss(`
@@ -314,9 +286,6 @@ test('the variants work with Tailwind’s important option set to a selector', (
       #app .hover\\:w-1\\/2:hover {
         width: 50%;
       }
-      #app .checked\\:w-1\\/2:checked {
-        width: 50%;
-      }
       #app .hocus\\:w-1\\/2:hover, #app .hocus\\:w-1\\/2:focus {
         width: 50%;
       }
@@ -338,7 +307,7 @@ test('the variants work with Tailwind’s important option set to a selector', (
 });
 
 test('the variants work on utilities that include pseudo-elements', () => {
-  return generatePluginCss(['hover', 'checked', 'hocus', 'group-hocus', 'can-hover', 'no-hover'], {}, {
+  return generatePluginCss(['hover', 'hocus', 'group-hocus', 'can-hover', 'no-hover'], {}, {
     '.placeholder-gray-400::placeholder': {
       'color': '#cbd5e0',
     },
@@ -350,9 +319,6 @@ test('the variants work on utilities that include pseudo-elements', () => {
       .hover\\:placeholder-gray-400:hover::placeholder {
         color: #cbd5e0;
       }
-      .checked\\:placeholder-gray-400:checked::placeholder {
-        color: #cbd5e0;
-      }
       .hocus\\:placeholder-gray-400:hover::placeholder, .hocus\\:placeholder-gray-400:focus::placeholder {
         color: #cbd5e0;
       }