refactor: addVariant examples

Author: cossssmin

src/index.js

@@ -62,10 +62,17 @@ const examplePlugin = plugin.withOptions(
        * https://tailwindcss.com/docs/plugins#adding-variants
        */
 
-       addVariant('hocus', [
+      // Simple
+      addVariant('optional', '&:optional')
+
+      // Array
+      addVariant('hocus', [
         '&:hover',
         '&:focus'
       ])
+
+      // @media queries
+      addVariant('supports-grid', '@supports (display: grid)')
     }
   }, function (options) {
     /**

src/index.test.js

@@ -108,7 +108,7 @@ it('addVariant', () => {
   })
 })
 
-it('addVariant (function)', () => {
+it('addVariant (array)', () => {
   const config = { content: [{ raw: String.raw`<div class="hocus:opacity-0"></div>` }],
   }
 
@@ -123,3 +123,18 @@ it('addVariant (function)', () => {
     `)
   })
 })
+
+it('addVariant (media)', () => {
+  const config = { content: [{ raw: String.raw`<div class="supports-grid:hidden"></div>` }],
+  }
+
+  return run(config).then(result => {
+    expect(result.css).toMatchCss(String.raw`
+      @supports (display: grid) {
+        .supports-grid\:hidden {
+          display: none;
+        }
+      }
+    `)
+  })
+})