Move plugin logic to tailwindcss-plugin-utils

index.js

@@ -1,70 +1,12 @@
-var _ = require('lodash')
-var flatten = require('flat')
-
-module.exports = function () {
-  return function ({
-    addUtilities, addComponents, addBase, addVariant,
-    e, prefix, theme, variants, config,
-  }) {
-    const buildObjectFromTheme = themeKey => {
-      const buildObject = ([ modifier, value ]) => [ modifier, { [themeKey]: value } ]
-      const themeEntries = Object.entries(theme(themeKey, {})).map(entry => buildObject(entry))
-      return _.fromPairs(themeEntries)
-    }
-
-    const pluginUtilities = {
-        'blend': {
-          'normal': { mixBlendMode: 'normal' },
-          'multiply': { mixBlendMode: 'multiply' },
-          'screen': { mixBlendMode: 'screen' },
-          'overlay': { mixBlendMode: 'overlay' },
-          'darken': { mixBlendMode: 'darken' },
-          'lighten': { mixBlendMode: 'lighten' },
-          'color-dodge': { mixBlendMode: 'color-dodge' },
-          'color-burn': { mixBlendMode: 'color-burn' },
-          'hard-light': { mixBlendMode: 'hard-light' },
-          'soft-light': { mixBlendMode: 'soft-light' },
-          'difference': { mixBlendMode: 'difference' },
-          'exclusion': { mixBlendMode: 'exclusion' },
-          'hue': { mixBlendMode: 'hue' },
-          'saturation': { mixBlendMode: 'saturation' },
-          'color': { mixBlendMode: 'color' },
-          'luminosity': { mixBlendMode: 'luminosity' },
-        },
-        'bg-blend': {
-          'normal': { backgroundBlendMode: 'normal' },
-          'multiply': { backgroundBlendMode: 'multiply' },
-          'screen': { backgroundBlendMode: 'screen' },
-          'overlay': { backgroundBlendMode: 'overlay' },
-          'darken': { backgroundBlendMode: 'darken' },
-          'lighten': { backgroundBlendMode: 'lighten' },
-          'color-dodge': { backgroundBlendMode: 'color-dodge' },
-          'color-burn': { backgroundBlendMode: 'color-burn' },
-          'hard-light': { backgroundBlendMode: 'hard-light' },
-          'soft-light': { backgroundBlendMode: 'soft-light' },
-          'difference': { backgroundBlendMode: 'difference' },
-          'exclusion': { backgroundBlendMode: 'exclusion' },
-          'hue': { backgroundBlendMode: 'hue' },
-          'saturation': { backgroundBlendMode: 'saturation' },
-          'color': { backgroundBlendMode: 'color' },
-          'luminosity': { backgroundBlendMode: 'luminosity' },
-        },
-        'isolation': {
-          'isolate': { isolation: 'isolate' },
-          'auto': { isolation: 'auto' },
-        }
-    }
-
-    Object.entries(pluginUtilities)
-      .filter(([ modifier, values ]) => !_.isEmpty(values))
-      .forEach(([ modifier, values ]) => {
-        const variantName = Object.keys(Object.entries(values)[0][1])[0]
-        const utilities = flatten(
-          { [`.${e(`${modifier}`)}`]: values },
-          { delimiter: '-', maxDepth: 2 },
-        )
-
-        addUtilities(utilities, variants(variantName, ['responsive']))
-      })
+const tailwindConfig = require('./tailwind.config.js')
+const { buildPlugin } = require('@hacknug/tailwindcss-plugin-utils')
+
+module.exports = function (pluginConfig) {
+  return function (coreUtils) {
+    return buildPlugin(tailwindConfig, coreUtils, {
+      'blend': ['mixBlendMode'],
+      'bg-blend': ['backgroundBlendMode', 'mixBlendMode'],
+      'isolation': ['isolation'],
+    })
   }
 }

index.test.js

@@ -0,0 +1,49 @@
+const tailwindConfig = require('./tailwind.config.js')
+const { generatePluginCss } = require('@hacknug/tailwindcss-plugin-utils')
+
+expect.extend({ toMatchCss: require('jest-matcher-css') })
+
+test('generates the expected styles', () => {
+  const testConfig = {}
+  const expectedCss = `
+    .blend-normal { mix-blend-mode: normal }
+    .blend-multiply { mix-blend-mode: multiply }
+    .blend-screen { mix-blend-mode: screen }
+    .blend-overlay { mix-blend-mode: overlay }
+    .blend-darken { mix-blend-mode: darken }
+    .blend-lighten { mix-blend-mode: lighten }
+    .blend-color-dodge { mix-blend-mode: color-dodge }
+    .blend-color-burn { mix-blend-mode: color-burn }
+    .blend-hard-light { mix-blend-mode: hard-light }
+    .blend-soft-light { mix-blend-mode: soft-light }
+    .blend-difference { mix-blend-mode: difference }
+    .blend-exclusion { mix-blend-mode: exclusion }
+    .blend-hue { mix-blend-mode: hue }
+    .blend-saturation { mix-blend-mode: saturation }
+    .blend-color { mix-blend-mode: color }
+    .blend-luminosity { mix-blend-mode: luminosity }
+
+    .bg-blend-normal { background-blend-mode: normal }
+    .bg-blend-multiply { background-blend-mode: multiply }
+    .bg-blend-screen { background-blend-mode: screen }
+    .bg-blend-overlay { background-blend-mode: overlay }
+    .bg-blend-darken { background-blend-mode: darken }
+    .bg-blend-lighten { background-blend-mode: lighten }
+    .bg-blend-color-dodge { background-blend-mode: color-dodge }
+    .bg-blend-color-burn { background-blend-mode: color-burn }
+    .bg-blend-hard-light { background-blend-mode: hard-light }
+    .bg-blend-soft-light { background-blend-mode: soft-light }
+    .bg-blend-difference { background-blend-mode: difference }
+    .bg-blend-exclusion { background-blend-mode: exclusion }
+    .bg-blend-hue { background-blend-mode: hue }
+    .bg-blend-saturation { background-blend-mode: saturation }
+    .bg-blend-color { background-blend-mode: color }
+    .bg-blend-luminosity { background-blend-mode: luminosity }
+
+    .isolation-isolate { isolation: isolate }
+    .isolation-auto { isolation: auto }
+  `
+
+  return generatePluginCss(tailwindConfig, testConfig)
+    .then(css => expect(css).toMatchCss(expectedCss))
+})

package.json

@@ -29,13 +29,10 @@
     "test": "jest"
   },
   "dependencies": {
-    "flat": "^4.1.0",
-    "lodash": "^4.17.11"
+    "@hacknug/tailwindcss-plugin-utils": "0.4.3"
   },
   "devDependencies": {
-    "jest": "^24.8.0",
-    "jest-matcher-css": "^1.0.3",
-    "postcss": "^7.0.16",
-    "tailwindcss": "^1.0.1"
+    "jest": "24.8.0",
+    "jest-matcher-css": "1.1.0"
   }
 }