Add support for Tailwindcss v1.x

Author: hacknug

index.js

@@ -1,15 +1,37 @@
-module.exports = function (variants) {
-  return function ({ addUtilities }) {
-    addUtilities(
-      {
-        // Image Rendering
-        'rendering-auto': { imageRendering: 'auto' },
-        // 'rendering-smooth': { imageRendering: 'smooth' },
-        // 'rendering-high-quality': { imageRendering: 'high-quality' },
-        'rendering-crisp-edges': { imageRendering: 'crisp-edges' },
-        'rendering-pixelated': { imageRendering: 'pixelated' },
-      },
-      variants
-    )
+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 = {
+        rendering: {
+          'auto': { imageRendering: 'auto' },
+          // 'smooth': { imageRendering: 'smooth' },
+          // 'high-quality': { imageRendering: 'high-quality' },
+          'crisp-edges': { imageRendering: 'crisp-edges' },
+          'pixelated': { imageRendering: 'pixelated' },
+        },
+    }
+
+    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(`bg-${modifier}`)}`]: values },
+          { delimiter: '-', maxDepth: 2 },
+        )
+
+        addUtilities(utilities, variants(variantName, ['responsive']))
+      })
   }
 }

package.json

@@ -2,22 +2,40 @@
   "name": "tailwindcss-image-rendering",
   "version": "0.1.0",
   "description": "Image-rendering utilities for Tailwind CSS.",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/hacknug/tailwindcss-image-rendering.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-image-rendering#readme",
   "bugs": {
     "url": "https://github.com/hacknug/tailwindcss-image-rendering/issues"
   },
-  "homepage": "https://github.com/hacknug/tailwindcss-image-rendering#readme"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hacknug/tailwindcss-image-rendering.git"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Nestor Vera",
+    "email": "[email protected]",
+    "url": "https://nestor.rip/"
+  },
+  "main": "index.js",
+  "scripts": {
+    "dev": "jest --watchAll",
+    "test": "jest"
+  },
+  "dependencies": {
+    "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"
+  }
 }