Refactor codebase + Add tests

Author: hacknug

index.js

@@ -1,22 +1,36 @@
-module.exports = function (variants) {
-  return function ({ addUtilities }) {
-    addUtilities(
-      {
-        // Background
-        // Background Image
+var _ = require('lodash')
+var flatten = require('flat')
 
-        // Background Clip
-        '.bg-clip-border': { backgroundClip: 'border-box' },
-        '.bg-clip-padding': { backgroundClip: 'padding-box' },
-        '.bg-clip-content': { backgroundClip: 'content-box' },
-        '.bg-clip-text': { backgroundClip: 'text' },
+module.exports = function () {
+  return function ({
+    addUtilities, addComponents, addBase, addVariant,
+    e, prefix, theme, variants, config,
+  }) {
+    const pluginUtilities = {
+        // '.bg': {},
+        // '.bg-image': {},
 
-        // Background Origin
-        '.bg-origin-border': { backgroundOrigin: 'border-box' },
-        '.bg-origin-padding': { backgroundOrigin: 'padding-box' },
-        '.bg-origin-content': { backgroundOrigin: 'content-box' },
-      },
-      variants
-    )
+        clip: {
+          border: { backgroundClip: 'border-box' },
+          padding: { backgroundClip: 'padding-box' },
+          content: { backgroundClip: 'content-box' },
+          text: { backgroundClip: 'text' },
+        },
+        origin: {
+          border: { backgroundOrigin: 'border-box' },
+          padding: { backgroundOrigin: 'padding-box' },
+          content: { backgroundOrigin: 'content-box' },
+        },
+    }
+
+    Object.entries(pluginUtilities).forEach(([ modifier, values ]) => {
+      const variantName = _.camelCase(`background-${modifier}`)
+      const utilities = flatten(
+        { [`.${e(`bg-${modifier}`)}`]: values },
+        { delimiter: '-', maxDepth: 2 },
+      )
+
+      addUtilities(utilities, variants(variantName, ['responsive']))
+    })
   }
 }

package.json

@@ -1,6 +1,9 @@
 {
   "name": "tailwindcss-background-extended",
   "version": "0.1.0",
+  "scripts": {
+    "test": "jest"
+  },
   "description": "This plugin adds all of the missing background utilities to Tailwind CSS.",
   "license": "MIT",
   "main": "index.js",
@@ -16,12 +19,22 @@
     "plugin"
   ],
   "author": {
-    "name" : "Nestor Vera",
-    "email" : "nestorvera@me.com",
-    "url" : "https://nestor.rip/"
+    "name": "Nestor Vera",
+    "email": "nestorvera@me.com",
+    "url": "https://nestor.rip/"
   },
   "bugs": {
     "url": "https://github.com/hacknug/tailwindcss-background-extended/issues"
   },
-  "homepage": "https://github.com/hacknug/tailwindcss-background-extended#readme"
+  "homepage": "https://github.com/hacknug/tailwindcss-background-extended#readme",
+  "devDependencies": {
+    "jest": "^24.8.0",
+    "jest-matcher-css": "^1.0.3",
+    "postcss": "^7.0.16",
+    "tailwindcss": "^1.0.1"
+  },
+  "dependencies": {
+    "flat": "^4.1.0",
+    "lodash": "^4.17.11"
+  }
 }