Add support for Tailwind v1.x

Author: hacknug

index.js

@@ -1,13 +1,69 @@
 const _ = require('lodash')
+const flatten = require('flat')
 
-module.exports = function ({ indents, variants }) {
-  return function ({ addUtilities, e }) {
-    const utilities = _.map(indents, (size, name) => ({
-      [`.${size.charAt(0) === '-' ? '-' : ''}indent-${name}`]: {
-        textIndent: size,
-      },
-    }))
 
-    addUtilities(utilities, variants)
+const FLATTEN_CONFIG = { delimiter: '-', maxDepth: 2 }
+const handleName = (name, className) => {
+  const split = name.split(`${className}-`)
+  const prefixedName = `${split[0]}${prefixNegativeModifiers(className, split[1])}`
+
+  return prefixedName.split('-default').join('')
+}
+const prefixNegativeModifiers = function(base, modifier) {
+  return _.startsWith(modifier, '-')
+    ? `-${base}-${modifier.slice(1)}`
+    : `${base}-${modifier}`
+}
+
+
+module.exports = function () {
+  return function ({
+    addUtilities, addComponents, addBase, addVariant,
+    e, prefix, theme, variants, config,
+  }) {
+    const buildConfig = (themeKey, ...fallbackKeys) => {
+      return buildConfigFromTheme(themeKey, ...fallbackKeys) || buildConfigFromArray(themeKey)
+    }
+    const buildConfigFromTheme = (themeKey, ...fallbackKeys) => {
+      const buildObject = ([ modifier, value ]) => [ modifier, { [themeKey]: value } ]
+      const getThemeSettings = (themeKey, fallbackKeys) => {
+        const [newThemeKey, ...newFallbackKeys] = fallbackKeys || []
+
+        return theme(themeKey, false) || (fallbackKeys.length && getThemeSettings(newThemeKey, [...newFallbackKeys]))
+      }
+
+      const themeSettings = getThemeSettings(themeKey, fallbackKeys)
+      const themeObject = _.isArray(themeSettings) ? _.zipObject(themeSettings, themeSettings) : themeSettings
+      const themeEntries = themeSettings && Object
+        .entries(flatten(themeObject, FLATTEN_CONFIG))
+        .map(entry => buildObject(entry))
+
+      return themeSettings ? _.fromPairs(themeEntries) : false
+    }
+    const buildConfigFromArray = (property) => {
+      const defaultSettings = defaultValues[property]
+      const defaultEntries = defaultSettings && defaultSettings
+        .map((value) => ([value, { [property]: value }]))
+
+      return defaultSettings ? _.fromPairs(defaultEntries) : false
+    }
+
+    const defaultValues = {}
+    const pluginUtilities = {
+      'indent': buildConfig('textIndent'),
+    }
+
+    Object.entries(pluginUtilities)
+      .filter(([ modifier, values ]) => !_.isEmpty(values))
+      .forEach(([ modifier, values ]) => {
+        const className = _.kebabCase(modifier)
+        const variantName = Object.keys(Object.entries(values)[0][1])[0]
+        const utilities = flatten({ [`.${e(`${className}`)}`]: values }, FLATTEN_CONFIG)
+
+        addUtilities(
+          _.mapKeys(utilities, (value, key) => handleName(key, className)),
+          variants(variantName, ['responsive'])
+        )
+      })
   }
 }

package.json

@@ -2,25 +2,40 @@
   "name": "tailwindcss-text-indent",
   "version": "0.1.0",
   "description": "Text-indent utilities for Tailwind CSS.",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/hacknug/tailwindcss-text-indent.git"
-  },
   "keywords": [
+    "plugin",
     "tailwind",
-    "tailwindcss",
     "tailwind css",
-    "tailwindcss-plugin",
-    "plugin"
+    "tailwindcss",
+    "tailwindcss-plugin"
   ],
-  "author": "Nestor Vera <[email protected]> (https://nestor.rip)",
-  "license": "MIT",
+  "homepage": "https://github.com/hacknug/tailwindcss-text-indent#readme",
   "bugs": {
     "url": "https://github.com/hacknug/tailwindcss-text-indent/issues"
   },
-  "homepage": "https://github.com/hacknug/tailwindcss-text-indent#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hacknug/tailwindcss-text-indent.git"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Nestor Vera",
+    "email": "[email protected]",
+    "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"
   }
 }