Move classes from utilities to components layer

Author: marco-guidara-efesto

README.md

@@ -6,7 +6,7 @@
 Centering an element using Tailwindcss classes can rapidly become verbose.
 
 ## The solution 🚀
-Dedicated centering classes that cover the most common situations.
+Dedicated centering classes at component layer that cover the most common situations.
 
 ## Install the plugin from npm:
 

index.js

@@ -1,15 +1,15 @@
 const plugin = require('tailwindcss/plugin');
 
 module.exports = plugin(
-  function ({ addUtilities, theme, variants }) {
+  function ({ addComponents, theme }) {
     // If your plugin requires user config,
     // you can access these options here.
     // Docs: https://tailwindcss.com/docs/plugins#exposing-options
     const options = theme('quickCenter');
 
     // Add CSS-in-JS syntax to create utility classes.
     // Docs: https://tailwindcss.com/docs/plugins#adding-utilities
-    const utilities = {
+    const components = {
       '.center-absolute-y': {
         position: 'absolute',
         top: '50%',
@@ -46,14 +46,12 @@ module.exports = plugin(
 
     // Conditionally add utility class based on user configuration.
     if (options.YOUR_PLUGIN_CUSTOM_OPTION) {
-      utilities['.custom-utility-class'] = {
+      components['.custom-utility-class'] = {
         'background-color': 'red',
       };
     }
 
-    addUtilities(utilities, {
-      variants: variants('quickCenter'),
-    });
+    addComponents(components);
   },
   {
     theme: {

test.js

@@ -2,7 +2,7 @@ const merge = require('lodash/merge');
 const cssMatcher = require('jest-matcher-css');
 const postcss = require('postcss');
 const tailwindcss = require('tailwindcss');
-const customPlugin = require('./index.js');
+const customPlugin = require('./index');
 
 expect.extend({
   toMatchCss: cssMatcher,
@@ -25,13 +25,13 @@ function generatePluginCss(overrides) {
   };
 
   return postcss(tailwindcss(merge(config, overrides)))
-    .process('@tailwind utilities', {
+    .process('@tailwind components', {
       from: undefined,
     })
     .then(({ css }) => css);
 }
 
-test('utility classes can be generated', () => {
+test('component classes can be generated', () => {
   return generatePluginCss().then(css => {
     expect(css).toMatchCss(`    
     .center-absolute-y {
@@ -78,7 +78,7 @@ test('variants can be customized', () => {
       },
     },
     variants: {
-      quickCenter: ['responsive', 'hover'],
+      quickCenter: ['hover'],
     },
   }).then(css => {
     expect(css).toMatchCss(`
@@ -114,104 +114,6 @@ test('variants can be customized', () => {
       align-items: center;
       justify-content: center;
     }
-    .hover\\:center-absolute-y:hover {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-    .hover\\:center-absolute-x:hover {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    .hover\\:center-absolute:hover {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-    .hover\\:center-flex-y:hover {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-    .hover\\:center-flex-x:hover {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-    .hover\\:center-flex:hover {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    @media (min-width: 640px) {
-      .sm\\:center-absolute-y {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-      .sm\\:center-absolute-x {
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .sm\\:center-absolute {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-      .sm\\:center-flex-y {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      .sm\\:center-flex-x {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-      .sm\\:center-flex {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
-      .sm\\:hover\\:center-absolute-y:hover {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-      .sm\\:hover\\:center-absolute-x:hover {
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .sm\\:hover\\:center-absolute:hover {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-      .sm\\:hover\\:center-flex-y:hover {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      .sm\\:hover\\:center-flex-x:hover {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-      .sm\\:hover\\:center-flex:hover {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
-    }    
     `);
   });
 });