feat(config): add a global config wrapper

encapsulate Tailwind config in a wrapper to pass purge, plugins and more configurations internally

BREAKING CHANGE: Instead of adding Windmill files to `purge` or to `plugins`, now you only need to
encapsulate your Tailwind config using this wrapper. It will automatically add what Windmill needs
to work properly and you can use your `tailwind.config.js` file as before, as it will be merged.

plugin.js → config.js

@@ -1,4 +1,4 @@
-const plugin = require('tailwindcss/plugin')
+const deepMerge = require('deepmerge')
 const Color = require('color')
 const customFormsPlugin = require('@tailwindcss/custom-forms')
 const multiThemePlugin = require('tailwindcss-multi-theme')
@@ -189,49 +189,78 @@ const customForms = (theme) => ({
   },
 })
 
-module.exports = plugin.withOptions(
-  () => (options) => {
-    customFormsPlugin(options)
-    multiThemePlugin(options)
-    shadowOutlinePlugin(options)
-  },
-  () => ({
-    theme: {
-      themeVariants: ['dark'],
-      colors,
-      backgroundOpacity,
-      maxHeight,
-      minWidth,
-      customForms,
-    },
-    variants: {
-      backgroundOpacity: ['responsive', 'hover', 'focus', 'dark:hover'],
-      backgroundColor: [
-        'hover',
-        'focus',
-        'active',
-        'odd',
-        'dark',
-        'dark:hover',
-        'dark:focus',
-        'dark:active',
-        'dark:odd',
-      ],
-      display: ['responsive', 'dark'],
-      textColor: [
-        'focus-within',
-        'hover',
-        'active',
-        'dark',
-        'dark:focus-within',
-        'dark:hover',
-        'dark:active',
-      ],
-      placeholderColor: ['focus', 'dark', 'dark:focus'],
-      borderColor: ['focus', 'hover', 'dark', 'dark:focus', 'dark:hover'],
-      divideColor: ['dark'],
-      boxShadow: ['focus', 'dark:focus'],
-      margin: ['responsive', 'last'],
+const windmillConfig = {
+  purge: {
+    content: [
+      'node_modules/windmill-react-ui/lib/defaultTheme.js',
+      'node_modules/windmill-react-ui/dist/index.js',
+    ],
+    options: {
+      whitelist: ['theme-dark'],
     },
-  })
-)
+  },
+  theme: {
+    themeVariants: ['dark'],
+    colors,
+    backgroundOpacity,
+    maxHeight,
+    minWidth,
+    customForms,
+  },
+  variants: {
+    backgroundOpacity: ['responsive', 'hover', 'focus', 'dark:hover'],
+    backgroundColor: [
+      'hover',
+      'focus',
+      'active',
+      'odd',
+      'dark',
+      'dark:hover',
+      'dark:focus',
+      'dark:active',
+      'dark:odd',
+    ],
+    display: ['responsive', 'dark'],
+    textColor: [
+      'focus-within',
+      'hover',
+      'active',
+      'dark',
+      'dark:focus-within',
+      'dark:hover',
+      'dark:active',
+    ],
+    placeholderColor: ['focus', 'dark', 'dark:focus'],
+    borderColor: ['responsive', 'hover', 'focus', 'dark', 'dark:focus', 'dark:hover'],
+    divideColor: ['dark'],
+    boxShadow: ['focus', 'dark:focus'],
+    margin: ['responsive', 'last'],
+  },
+  plugins: [customFormsPlugin, multiThemePlugin, shadowOutlinePlugin],
+}
+
+function arrayMergeFn(destinationArray, sourceArray) {
+  return destinationArray.concat(sourceArray).reduce((acc, cur) => {
+    if (acc.includes(cur)) return acc
+    return [...acc, cur]
+  }, [])
+}
+
+/**
+ * Merge Windmill and Tailwind CSS configurations
+ * @param {object} tailwindConfig - Tailwind config object
+ * @return {object} new config object
+ */
+function wrapper(tailwindConfig) {
+  let purge
+  if (Array.isArray(tailwindConfig.purge)) {
+    purge = {
+      content: tailwindConfig.purge,
+    }
+  } else {
+    purge = tailwindConfig.purge
+  }
+  return deepMerge({ ...tailwindConfig, purge }, windmillConfig, { arrayMerge: arrayMergeFn })
+}
+
+module.exports = wrapper

package.json

@@ -5,9 +5,7 @@
   "main": "dist/index.js",
   "files": [
     "dist",
-    "lib",
-    "defaultTheme.js",
-    "plugin.js",
+    "config.js",
     "README.md"
   ],
   "scripts": {
@@ -27,6 +25,7 @@
     "build": "webpack",
     "prerelease": "npm run build",
     "release": "dotenv release-it",
+    "pre:release": "dotenv release-it -- --preRelease=beta",
     "semantic-release": "semantic-release"
   },
   "peerDependencies": {
@@ -38,6 +37,7 @@
     "@tailwindcss/custom-forms": "0.2.1",
     "classnames": "2.2.6",
     "color": "3.1.2",
+    "deepmerge": "4.2.2",
     "prop-types": "15.7.2",
     "react-focus-lock": "2.4.0",
     "react-transition-group": "4.4.1",