tailwindcss-filters - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0-beta.1

.release-it.json

 {
-  "src": {
+  "git": {
     "tagName": "v%s"
   }
-}
+}

CHANGELOG.md

@@ -8,2 +8,11 @@ # Changelog
 
+## [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
@@ -23,4 +32,5 @@
 
-[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

index.js

 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));
+  };
 };

package.json

 {
   "name": "tailwindcss-filters",
-  "version": "1.0.2",
+  "version": "2.0.0-beta.1",
   "description": "Tailwind CSS plugin to generate filter and backdrop filter utilities",
@@ -18,12 +18,12 @@ "author": "Benoît Rouleau <[e-mail]>",
   "dependencies": {
-    "lodash": "^4.17.10"
+    "lodash": "^4.17.11"
   },
   "devDependencies": {
     "github-release-from-changelog": "^1.3.2",
-    "jest": "^23.6.0",
+    "jest": "^24.7.1",
     "jest-matcher-css": "^1.0.3",
-    "postcss": "^7.0.5",
-    "release-it": "^7.6.2",
-    "tailwindcss": "^0.7.0"
+    "postcss": "^7.0.14",
+    "release-it": "^10.4.0",
+    "tailwindcss": "^1.0.0-beta.4"
   }
 }

README.md

@@ -1,2 +0,2 @@
-# Filters Tailwind CSS Plugin
+# Filters Plugin for Tailwind CSS
 
@@ -14,15 +14,20 @@ ## Installation
 {
+  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')(),
   ],
@@ -35,11 +40,11 @@ }
 ```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];
 }
-```
+```

test.js

@@ -5,17 +5,31 @@ const _ = require('lodash');
 const tailwindcss = require('tailwindcss');
-const defaultConfig = require('tailwindcss/defaultConfig')();
+const defaultConfig = require('tailwindcss/defaultConfig');
 const filtersPlugin = require('./index.js');
 
-const disabledModules = {};
-Object.keys(defaultConfig.modules).forEach(module => {
-  disabledModules[module] = false;
-});
-
-const generatePluginCss = (options = {}) => {
-  return postcss(tailwindcss({
-    modules: disabledModules,
-    plugins: [filtersPlugin(options)],
-  })).process('@tailwind utilities;', {
+const generatePluginCss = (config) => {
+  return postcss(
+    tailwindcss(
+      _.merge({
+        theme: {
+          screens: {
+            'sm': '640px',
+          },
+        },
+        corePlugins: (function() {
+          let disabledCorePlugins = {};
+          Object.keys(defaultConfig.variants).forEach(corePlugin => {
+            disabledCorePlugins[corePlugin] = false;
+          });
+          return disabledCorePlugins;
+        })(),
+        plugins: [
+          filtersPlugin(),
+        ],
+      }, config)
+    )
+  )
+  .process('@tailwind utilities;', {
     from: undefined,
-  }).then(result => {
+  })
+  .then(result => {
     return result.css;
@@ -29,3 +43,3 @@ });
 
-test('options are not required', () => {
+test('there is no output by default', () => {
   return generatePluginCss().then(css => {
@@ -36,13 +50,16 @@ expect(css).toMatchCss(``);
 
-test('all the options are working as they should', () => {
+test('utilities can be customized', () => {
   return generatePluginCss({
-    filters: {
-      'none': 'none',
-      'blur': 'blur(5px)',
+    theme: {
+      filter: {
+        'none': 'none',
+        'grayscale': 'grayscale(1)',
+        'invert': 'invert(1)',
+        'sepia': 'sepia(1)',
+      },
+      backdropFilter: {
+        'none': 'none',
+        'blur': 'blur(20px)',
+      },
     },
-    backdropFilters: {
-      'none': 'none',
-      'blur': 'blur(20px)',
-      'grayscale': 'grayscale(100%)',
-    },
   }).then(css => {
@@ -53,5 +70,11 @@ expect(css).toMatchCss(`
       }
-      .filter-blur {
-        filter: blur(5px);
+      .filter-grayscale {
+        filter: grayscale(1);
       }
+      .filter-invert {
+        filter: invert(1);
+      }
+      .filter-sepia {
+        filter: sepia(1);
+      }
       .backdrop-none {
@@ -63,4 +86,21 @@ backdrop-filter: none;
       }
-      .backdrop-grayscale {
-        backdrop-filter: grayscale(100%);
+      @media (min-width: 640px) {
+        .sm\\:filter-none {
+          filter: none;
+        }
+        .sm\\:filter-grayscale {
+          filter: grayscale(1);
+        }
+        .sm\\:filter-invert {
+          filter: invert(1);
+        }
+        .sm\\:filter-sepia {
+          filter: sepia(1);
+        }
+        .sm\\:backdrop-none {
+          backdrop-filter: none;
+        }
+        .sm\\:backdrop-blur {
+          backdrop-filter: blur(20px);
+        }
       }
@@ -71,8 +111,18 @@ `);
 
-test('variants are supported', () => {
+test('variants can be customized', () => {
   return generatePluginCss({
-    filters: {
-      'none': 'none',
+    theme: {
+      filter: {
+        'none': 'none',
+        'grayscale': 'grayscale(1)',
+      },
+      backdropFilter: {
+        'none': 'none',
+        'blur': 'blur(20px)',
+      },
     },
-    variants: ['hover', 'active'],
+    variants: {
+      filter: ['hover'],
+      backdropFilter: ['active'],
+    },
   }).then(css => {
@@ -83,10 +133,25 @@ expect(css).toMatchCss(`
       }
+      .filter-grayscale {
+        filter: grayscale(1);
+      }
       .hover\\:filter-none:hover {
         filter: none;
       }
-      .active\\:filter-none:active {
-        filter: none;
-      }  
+      .hover\\:filter-grayscale:hover {
+        filter: grayscale(1);
+      }
+      .backdrop-none {
+        backdrop-filter: none;
+      }
+      .backdrop-blur {
+        backdrop-filter: blur(20px);
+      }
+      .active\\:backdrop-none:active {
+        backdrop-filter: none;
+      }
+      .active\\:backdrop-blur:active {
+        backdrop-filter: blur(20px);
+      }
     `);
   });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13329

increased by186.83%

Number of package files

7

increased by16.67%

Lines of code

181

increased by74.04%

Number of lines in readme file

49

increased by13.95%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedlodash@^4.17.11