Create tailwind plugin for core & Add styles for CloseButton

packages/core/tailwind/default-options.js

@@ -0,0 +1,86 @@
+const defaultTheme = require('tailwindcss/resolveConfig')(
+  require('tailwindcss/defaultConfig')
+).theme;
+
+const defaultConfig = {
+  closeButton: {
+    backgroundColor: undefined,
+    hoverBackgroundColor: defaultTheme.colors.gray[100],
+    borderRadius: defaultTheme.borderRadius.full,
+    color: 'inherit',
+
+    sizes: {
+      xs: defaultTheme.fontSize.sm,
+      sm: defaultTheme.fontSize.base,
+      md: defaultTheme.fontSize.xl,
+      lg: defaultTheme.fontSize['2xl'],
+      xl: defaultTheme.fontSize['4xl']
+    }
+  }
+};
+
+function defaultOptions({ config }) {
+  return {
+    closeButton: {
+      baseStyle: {
+        backgroundColor: config.closeButton.backgroundColor,
+        borderRadius: config.closeButton.borderRadius,
+        transitionProperty: defaultTheme.transitionProperty.default,
+        transitionDuration: defaultTheme.transitionDuration[200],
+
+        '&.focus-visible:focus': {
+          outline: 'none',
+          boxShadow: defaultTheme.boxShadow.outline
+        },
+
+        '&:hover': {
+          backgroundColor: config.closeButton.hoverBackgroundColor
+        }
+      },
+      variants: {
+        xs: {
+          baseStyle: {
+            fontSize: config.closeButton.sizes.xs,
+            padding: defaultTheme.spacing[2]
+          }
+        },
+        sm: {
+          baseStyle: {
+            fontSize: config.closeButton.sizes.sm,
+            padding: defaultTheme.spacing[1]
+          }
+        },
+        md: {
+          baseStyle: {
+            fontSize: config.closeButton.sizes.md,
+            padding: defaultTheme.spacing[2]
+          }
+        },
+        lg: {
+          baseStyle: {
+            fontSize: config.closeButton.sizes.lg,
+            padding: defaultTheme.spacing[3]
+          }
+        },
+        xl: {
+          baseStyle: {
+            fontSize: config.closeButton.sizes.xl,
+            padding: defaultTheme.spacing[3]
+          }
+        }
+      },
+
+      parts: {
+        icon: {
+          height: '1em',
+          width: '1em'
+        }
+      }
+    }
+  };
+}
+
+module.exports = {
+  defaultConfig,
+  defaultOptions
+};

packages/core/tailwind/index.js

@@ -0,0 +1,49 @@
+const plugin = require('tailwindcss/plugin');
+const {
+  resolve,
+  isEmpty,
+  kebabCase
+} = require('@frontile/tailwindcss-plugin-helpers');
+
+module.exports = plugin.withOptions(function (userConfig) {
+  return function ({ addComponents, theme }) {
+    const { options } = resolve(
+      '@frontile/core',
+      require('./default-options'),
+      userConfig,
+      theme
+    );
+
+    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);
+  };
+});

packages/core/tests/dummy/app/templates/application.hbs

@@ -4,4 +4,12 @@
 
 <VisuallyHidden>This should not be shown</VisuallyHidden>
 
+<div class="flex items-center mt-10 space-x-2">
+  <CloseButton @size="xs" />
+  <CloseButton @size="sm" />
+  <CloseButton @size="md" />
+  <CloseButton @size="lg" />
+  <CloseButton @size="xl" />
+</div>
+
 {{outlet}}

packages/core/tests/dummy/config/tailwind.config.js

@@ -10,4 +10,5 @@ module.exports = {
     extend: {}
   },
   variants: {},
+  plugins: [require('@frontile/core/tailwind')]
 };