Refactor TailwindCSS plugins structure to a common interface

packages/buttons/addon/components/button.hbs

@@ -1,19 +1,3 @@
-{{!--
-Appearances:
-  btn btn-outlined btn-minimal
-
-Sizes:
-  btn--xs btn--sm btn--lg bth--xl
-  btn-outlined--xs btn-outlined--sm btn-outlined--lg btn-outlined--xl
-  btn-minimal--xs btn-minimal--sm btn-minimal--lg btn-minimal--xl
-
-Intents:
-  btn--primary btn--success btn--warning btn--danger
-  btn-outlined--primary btn-outlined--success btn-outlined--warning btn-outlined--danger
-  btn-minimal--primary btn-minimal--success btn-minimal--warning btn-minimal--danger
---}}
-
-{{!-- template-lint-disable require-button-type --}}
 {{#if @isRenderless}}
   {{yield (hash classNames=this.classNames)}}
 {{else}}

packages/buttons/ember-cli-build.js

@@ -11,7 +11,7 @@ module.exports = function (defaults) {
         cacheInclude: [/.*\.css$/, /.tailwind\.config\.js$/],
         plugins: [
           require('tailwindcss')(
-            path.join('tests', 'dummy', 'app', 'styles', 'tailwind.config.js')
+            path.join('tests', 'dummy', 'app', 'config', 'tailwind.config.js')
           ),
           require('autoprefixer')
         ]

packages/buttons/tailwind/default-options.js

@@ -4,16 +4,16 @@ const defaultTheme = require('tailwindcss/resolveConfig')(
 
 const defaultConfig = {
   borderRadius: defaultTheme.borderRadius.default,
-  minimal: {
-    hoverBackgroundColor: defaultTheme.colors.gray[200],
-    activeBackgroundColor: defaultTheme.colors.gray[300]
-  },
   default: {
     contrastColor: defaultTheme.colors.white,
     color: defaultTheme.colors.gray[700],
     hoverColor: defaultTheme.colors.gray[800],
     activeColor: defaultTheme.colors.gray[900]
   },
+  minimal: {
+    hoverBackgroundColor: defaultTheme.colors.gray[200],
+    activeBackgroundColor: defaultTheme.colors.gray[300]
+  },
   primary: {
     contrastColor: defaultTheme.colors.white,
     color: defaultTheme.colors.blue[700],
@@ -41,27 +41,6 @@ const defaultConfig = {
 };
 
 function defaultOptions({ config }) {
-  const buttonShape = {
-    lineHeight: defaultTheme.lineHeight.tight,
-    display: 'inline-block',
-    fontWeight: defaultTheme.fontWeight.semibold,
-    paddingTop: defaultTheme.spacing[3],
-    paddingRight: defaultTheme.spacing[4],
-    paddingBottom: defaultTheme.spacing[3],
-    paddingLeft: defaultTheme.spacing[4],
-    borderRadius: config.borderRadius,
-    borderWidth: defaultTheme.borderWidth.default,
-    borderColor: defaultTheme.colors.transparent,
-    '&.focus-visible:focus': {
-      outline: 'none',
-      boxShadow: defaultTheme.boxShadow.outline
-    },
-    '&[disabled]': {
-      opacity: '0.4',
-      cursor: defaultTheme.cursor['not-allowed']
-    }
-  };
-
   const hover = '&:not([disabled])&:hover';
   const active = '&:not([disabled])&:active,&.is-active';
 
@@ -95,97 +74,100 @@ function defaultOptions({ config }) {
     };
   }
 
-  return {
-    default: {
-      button: {
-        default: {
-          ...buttonShape,
+  function generateVariants(type) {
+    const intends = {
+      default: generateIntents(config.default),
+      primary: generateIntents(config.primary),
+      success: generateIntents(config.success),
+      warning: generateIntents(config.warning),
+      danger: generateIntents(config.danger)
+    };
 
-          color: config.default.contrastColor,
-          backgroundColor: config.default.color,
-          borderColor: defaultTheme.colors.transparent,
-          [hover]: {
-            backgroundColor: config.default.hoverColor
-          },
-          [active]: {
-            backgroundColor: config.default.activeColor
-          }
-        },
-        outlined: {
-          ...buttonShape,
+    return {
+      ...Object.keys(intends).reduce((obj, key) => {
+        obj[key] = intends[key][type];
+        return obj;
+      }, {})
+    };
+  }
 
-          color: config.default.color,
-          backgroundColor: defaultTheme.colors.transparent,
-          borderColor: config.default.color,
-          [hover]: {
-            color: config.default.contrastColor,
-            backgroundColor: config.default.color
-          },
-          [active]: {
-            color: config.default.contrastColor,
-            backgroundColor: config.default.hoverColor
-          }
+  return {
+    'default, outlined, minimal': {
+      baseStyle: {
+        lineHeight: defaultTheme.lineHeight.tight,
+        display: 'inline-block',
+        fontWeight: defaultTheme.fontWeight.semibold,
+        paddingTop: defaultTheme.spacing[3],
+        paddingRight: defaultTheme.spacing[4],
+        paddingBottom: defaultTheme.spacing[3],
+        paddingLeft: defaultTheme.spacing[4],
+        borderRadius: config.borderRadius,
+        borderWidth: defaultTheme.borderWidth.default,
+        borderColor: defaultTheme.colors.transparent,
+        '&.focus-visible:focus': {
+          outline: 'none',
+          boxShadow: defaultTheme.boxShadow.outline
         },
-        minimal: {
-          ...buttonShape,
-
-          color: config.default.color,
-          backgroundColor: defaultTheme.colors.transparent,
-          borderColor: defaultTheme.colors.transparent,
-          [hover]: {
-            backgroundColor: config.minimal.hoverBackgroundColor
-          },
-          [active]: {
-            backgroundColor: config.minimal.activeBackgroundColor
-          }
+        '&[disabled]': {
+          opacity: '0.4',
+          cursor: defaultTheme.cursor['not-allowed']
         }
-      }
-    },
-    primary: { button: generateIntents(config.primary) },
-    success: { button: generateIntents(config.success) },
-    warning: { button: generateIntents(config.warning) },
-    danger: { button: generateIntents(config.danger) },
-    xs: {
-      button: {
-        default: {
+      },
+      variants: {
+        xs: {
           fontSize: defaultTheme.fontSize.sm,
           paddingTop: defaultTheme.spacing[1],
           paddingRight: defaultTheme.spacing[2],
           paddingBottom: defaultTheme.spacing[1],
           paddingLeft: defaultTheme.spacing[2]
-        }
-      }
-    },
-    sm: {
-      button: {
-        default: {
+        },
+        sm: {
           paddingTop: defaultTheme.spacing[2],
           paddingRight: defaultTheme.spacing[3],
           paddingBottom: defaultTheme.spacing[2],
           paddingLeft: defaultTheme.spacing[3]
-        }
-      }
-    },
-    lg: {
-      button: {
-        default: {
+        },
+        lg: {
           paddingTop: defaultTheme.spacing[4],
           paddingRight: defaultTheme.spacing[4],
           paddingBottom: defaultTheme.spacing[4],
           paddingLeft: defaultTheme.spacing[4]
-        }
-      }
-    },
-    xl: {
-      button: {
-        default: {
+        },
+        xl: {
           fontSize: defaultTheme.fontSize.xl,
           paddingTop: defaultTheme.spacing[5],
           paddingRight: defaultTheme.spacing[6],
           paddingBottom: defaultTheme.spacing[5],
           paddingLeft: defaultTheme.spacing[6]
         }
       }
+    },
+    default: {
+      baseStyle: {
+        borderColor: defaultTheme.colors.transparent
+      },
+
+      variants: generateVariants('default')
+    },
+    outlined: {
+      baseStyle: {
+        backgroundColor: defaultTheme.colors.transparent
+      },
+      variants: generateVariants('outlined')
+    },
+    minimal: {
+      baseStyle: {
+        backgroundColor: defaultTheme.colors.transparent,
+        borderColor: defaultTheme.colors.transparent,
+        [hover]: {
+          backgroundColor: config.minimal.hoverBackgroundColor
+        },
+        [active]: {
+          backgroundColor: config.minimal.activeBackgroundColor
+        }
+      },
+
+      variants: generateVariants('minimal')
     }
   };
 }

packages/buttons/tailwind/index.js

@@ -1,66 +1,18 @@
 const plugin = require('tailwindcss/plugin');
-const { resolve, isEmpty } = require('@frontile/tailwindcss-plugin-helpers');
+const {
+  resolveComponents,
+  addSinglePartComponent
+} = require('@frontile/tailwindcss-plugin-helpers');
 
-module.exports = plugin.withOptions(function (userConfig) {
+module.exports = plugin.withOptions(function () {
   return function ({ addComponents, theme }) {
-    const { options } = resolve(
-      '@frontile/buttons',
-      require('.//default-options'),
-      userConfig,
-      theme
+    const { components } = resolveComponents(
+      theme('frontile.buttons') || {},
+      require('./default-options')
     );
 
-    function addButton(options, modifier) {
-      if (isEmpty(options)) {
-        return;
-      }
-
-      if (modifier === '') {
-        addComponents({ [`.btn`]: options.default });
-
-        if (!isEmpty(options.outlined)) {
-          addComponents({
-            [`.btn-outlined`]: options.outlined
-          });
-        }
-
-        if (!isEmpty(options.minimal)) {
-          addComponents({
-            [`.btn-minimal`]: options.minimal
-          });
-        }
-      } else {
-        addComponents({ [`.btn${modifier}`]: options.default });
-
-        if (!isEmpty(options.outlined)) {
-          addComponents({
-            [`.btn-outlined${modifier}`]: options.outlined
-          });
-        }
-
-        if (!isEmpty(options.minimal)) {
-          addComponents({
-            [`.btn-minimal${modifier}`]: options.minimal
-          });
-        }
-      }
-    }
-
-    Object.keys(options).forEach((key) => {
-      const modifier = key === 'default' ? '' : `--${key}`;
-      if (['xs', 'sm', 'lg', 'xl'].includes(modifier.substring(2))) {
-        addButton(
-          {
-            default: options[key].button.default,
-            outlined:
-              options[key].button.outlined || options[key].button.default,
-            minimal: options[key].button.minimal || options[key].button.default
-          },
-          modifier
-        );
-      } else {
-        addButton(options[key].button, modifier);
-      }
-    });
+    addSinglePartComponent(addComponents, '.btn', components.default);
+    addSinglePartComponent(addComponents, '.btn-outlined', components.outlined);
+    addSinglePartComponent(addComponents, '.btn-minimal', components.minimal);
   };
 });

packages/core/tailwind/index.js

@@ -1,49 +1,20 @@
 const plugin = require('tailwindcss/plugin');
 const {
-  resolve,
-  isEmpty,
-  kebabCase
+  resolveComponents,
+  addMultipartComponent
 } = require('@frontile/tailwindcss-plugin-helpers');
 
-module.exports = plugin.withOptions(function (userConfig) {
+module.exports = plugin.withOptions(function () {
   return function ({ addComponents, theme }) {
-    const { options } = resolve(
-      '@frontile/core',
-      require('./default-options'),
-      userConfig,
-      theme
+    const { components } = resolveComponents(
+      theme('frontile.core') || {},
+      require('./default-options')
     );
 
-    function addStylesFor(base, options, modifier = '') {
-      if (isEmpty(options)) {
-        return;
-      }
-
-      if (modifier !== '') {
-        base += `--${modifier}`;
-      }
-
-      const { baseStyle, variants, parts } = options;
-
-      addComponents({
-        [base]: baseStyle
-      });
-
-      if (!isEmpty(parts)) {
-        Object.keys(parts).forEach((key) => {
-          addComponents({
-            [`${base}__${kebabCase(key)}`]: parts[key]
-          });
-        });
-      }
-
-      if (!isEmpty(variants)) {
-        Object.keys(variants).forEach((key) => {
-          addStylesFor(base, variants[key], kebabCase(key));
-        });
-      }
-    }
-
-    addStylesFor('.close-button', options.closeButton);
+    addMultipartComponent(
+      addComponents,
+      '.close-button',
+      components.closeButton
+    );
   };
 });