Changes for Tailwind 1.0.0

Author: benface

.gitignore

@@ -1 +1 @@
-/node_modules/
+/node_modules/

.release-it.json

@@ -1,5 +1,5 @@
 {
-  "src": {
+  "git": {
     "tagName": "v%s"
   }
-}
+}

CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0-beta.1] - 2019-04-07
+
+### Added
+- Tailwind 1.0.0 compatibility
+
+### Changed
+- The plugin doesn’t accept a config object anymore; instead it finds what it needs in the `theme` and `variants` keys of your config (see `README` for more info)
+- Responsive variants are now generated by default
+
 ## [1.0.2] - 2018-11-04
 
 ### Added
@@ -19,6 +28,7 @@ and this project mostly adheres to [Semantic Versioning](https://semver.org/spec
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-filters/compare/v1.0.2...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-filters/compare/v2.0.0-beta.1...HEAD
+[2.0.0-beta.1]: https://github.com/benface/tailwindcss-filters/compare/v1.0.2...v2.0.0-beta.1
 [1.0.2]: https://github.com/benface/tailwindcss-filters/compare/v1.0.1...v1.0.2
-[1.0.1]: https://github.com/benface/tailwindcss-filters/compare/v1.0.0...v1.0.1
+[1.0.1]: https://github.com/benface/tailwindcss-filters/compare/v1.0.0...v1.0.1

README.md

@@ -1,4 +1,4 @@
-# Filters Tailwind CSS Plugin
+# Filters Plugin for Tailwind CSS
 
 ## Installation
 
@@ -11,33 +11,38 @@ npm install tailwindcss-filters
 ```js
 // In your Tailwind CSS config
 {
+  theme: {
+    filter: { // defaults to {}
+      'none': 'none',
+      'grayscale': 'grayscale(1)',
+      'invert': 'invert(1)',
+      'sepia': 'sepia(1)',
+    },
+    backdropFilter: { // defaults to {}
+      'none': 'none',
+      'blur': 'blur(20px)',
+    },
+  },
+  variants: {
+    filter: ['responsive'], // defaults to ['responsive']
+    backdropFilter: ['responsive'], // defaults to ['responsive']
+  },
   plugins: [
-    require('tailwindcss-filters')({
-      variants: ['responsive'],
-      filters: {
-        'none': 'none',
-        'blur': 'blur(5px)',
-      },
-      backdropFilters: {
-        'none': 'none',
-        'blur': 'blur(20px)',
-        'grayscale': 'grayscale(100%)',
-      },
-    }),
+    require('tailwindcss-filters')(),
   ],
 }
 ```
 
 This plugin generates the following utilities:
 
 ```css
-/* configurable with the "filters" option */
-.filter-[name] {
+/* configurable with the "filter" theme object */
+.filter-[key] {
   filter: [value];
 }
 
-/* configurable with the "backdropFilters" option */
-.backdrop-[name] {
+/* configurable with the "backdropFilter" theme object */
+.backdrop-[key] {
   backdrop-filter: [value];
 }
-```
+```

index.js

@@ -1,22 +1,35 @@
 const _ = require('lodash');
 
-module.exports = ({
-  variants = {},
-  filters = {},
-  backdropFilters = {},
-} = {}) => ({ e, addUtilities }) => {
-  addUtilities(
-    {
-      ...Object.assign(
-        {},
-        ..._.map(filters, (value, name) => ({
-          [`.${e(`filter-${name}`)}`]: { filter: value },
-        })),
-        ..._.map(backdropFilters, (value, name) => ({
-          [`.${e(`backdrop-${name}`)}`]: { backdropFilter: value },
-        })),
-      ),
-    },
-    variants,
-  );
+module.exports = function() {
+  return ({ config, e, addUtilities }) => {
+    const defaultFilterTheme = {};
+    const defaultFilterVariants = ['responsive'];
+    const defaultBackdropFilterTheme = {};
+    const defaultBackdropFilterVariants = ['responsive'];
+
+    const filterUtilities = _.fromPairs(
+      _.map(config('theme.filter', defaultFilterTheme), (value, modifier) => {
+        return [
+          `.${e(`filter-${modifier}`)}`,
+          {
+            filter: value,
+          },
+        ];
+      })
+    );
+
+    const backdropFilterUtilities = _.fromPairs(
+      _.map(config('theme.backdropFilter', defaultBackdropFilterTheme), (value, modifier) => {
+        return [
+          `.${e(`backdrop-${modifier}`)}`,
+          {
+            backdropFilter: value,
+          },
+        ];
+      })
+    );
+
+    addUtilities(filterUtilities, config('variants.filter', defaultFilterVariants));
+    addUtilities(backdropFilterUtilities, config('variants.backdropFilter', defaultBackdropFilterVariants));
+  };
 };