Add support for Tailwind v1.x

Author: hacknug

index.js

@@ -1,24 +1,46 @@
-const _ = require('lodash')
+var _ = require('lodash')
+var flatten = require('flat')
 
-module.exports = function (options = {}) {
-  return function ({ addUtilities, config, e }) {
-    let { colors, widths, variants } = _.defaults(options, {
-      colors: config('borderColors'),
-      widths: config('borderWidths'),
-    })
 
-    const getName = (name) => name === 'default' ? '' : `-${name}`
+const FLATTEN_CONFIG = { delimiter: '-', maxDepth: 2 }
+const getName = name => name.split('-default').join('')
 
-    colors = _.map(colors, (color, name) => ({
-      [`.${e(`text-fill${getName(name)}`)}`]: { '-webkit-text-fill-color': color },
-      [`.${e(`text-stroke${getName(name)}`)}`]: { '-webkit-text-stroke-color': color },
-    }))
 
-    widths = _.map(widths, (width, name) => ({
-      [`.${e(`text-stroke${getName(name)}`)}`]: { '-webkit-text-stroke-width': width },
-    }))
+module.exports = function () {
+  return function ({
+    addUtilities, addComponents, addBase, addVariant,
+    e, prefix, theme, variants, config,
+  }) {
+    const buildObjectFromTheme = (themeKey, ...fallbackKeys) => {
+      const buildObject = ([ modifier, value ]) => [ modifier, { [themeKey]: value } ]
+      const getThemeSettings = (themeKey, fallbackKeys) => {
+        return theme(themeKey, false) || getThemeSettings([themeKey, ...fallbackKeys] = fallbackKeys)
+      }
+      const themeEntries = Object
+        .entries(flatten(getThemeSettings(themeKey, fallbackKeys), FLATTEN_CONFIG))
+        .map(entry => buildObject(entry))
 
-    addUtilities(colors, variants)
-    addUtilities(widths, variants)
+      return _.fromPairs(themeEntries)
+    }
+
+    const pluginUtilities = {
+      textFillColor: buildObjectFromTheme('textFillColor', 'borderColor'),
+      textStrokeColor: buildObjectFromTheme('textStrokeColor', 'borderColor'),
+      textStrokeWidth: buildObjectFromTheme('textStrokeWidth', 'borderWidth'),
+      // paintOrder: 'https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order',
+    }
+
+    Object.entries(pluginUtilities)
+      .filter(([ modifier, values ]) => !_.isEmpty(values))
+      .forEach(([ modifier, values ]) => {
+        const className = _.kebabCase(modifier).split('-').reverse().slice(1).reverse().join('-')
+        const variantName = Object.keys(Object.entries(values)[0][1])[0]
+        const utilities = flatten({ [`.${e(`${className}`)}`]: values }, FLATTEN_CONFIG)
+
+        addUtilities(
+          _.mapKeys(utilities, (value, key) => getName(key)),
+          variants(variantName, ['responsive'])
+        )
+      })
   }
 }

package.json

@@ -24,7 +24,18 @@
     "url": "https://nestor.rip/"
   },
   "main": "index.js",
+  "scripts": {
+    "dev": "jest --watchAll",
+    "test": "jest"
+  },
   "dependencies": {
-    "lodash": "^4.17.10"
+    "flat": "^4.1.0",
+    "lodash": "^4.17.11"
+  },
+  "devDependencies": {
+    "jest": "^24.8.0",
+    "jest-matcher-css": "^1.0.3",
+    "postcss": "^7.0.16",
+    "tailwindcss": "^1.0.1"
   }
 }