Version 1.0.0

Signed-off-by: Peter Neupauer <[email protected]>

Author: neupauer

README.md

@@ -1,15 +1,17 @@
 # Tailwind CSS Plugin – Filter & Backdrop Filter
 
+Utilities for controlling filter & backdrop-filter behaviour.
+
 ## Install
 
 1. Install the plugin:
 
 ```bash
 # Using npm
-npm install @neupauer/tailwindcss-plugin-filter --save-dev
+npm install @neupauer/tailwindcss-plugin-filter
 
 # Using Yarn
-yarn add @neupauer/tailwindcss-plugin-filter -D
+yarn add @neupauer/tailwindcss-plugin-filter
 ```
 
 2. Add it to your `tailwind.config.js` file:
@@ -29,69 +31,93 @@ module.exports = {
 module.exports = {
   theme: {
     // default
-    filter: {
+    filterFunctions: {
       blur: {},
       brightness: {},
       contrast: {},
-      "drop-shadow": {},
+      dropShadow: {},
       grayscale: {},
-      "hue-rotate": {},
+      hueRotate: {},
       invert: {},
-      opacity: {},
       saturate: {},
       sepia: {},
     },
   },
   variants: {
     // default
-    filter: ["responsive", "hover"],
+    filterFunctions: ["responsive", "hover"],
   },
 };
 ```
 
 ## Usage
 
+### Filter & Backdrop Filter
+
+To enable filters you have to add the `.filter` or `.backdrop` utility. _(Similar to the native Tailwind `transform` utility)_
+
+### None
+
+If you want to disable filters, then you can use the `.filter-none` or `.backdrop-none` utility.
+
+### Responsive
+
+To enable or disable filters at a specific breakpoint, add a `{screen}:` prefix to any of the filter utilities. For example, use `md:filter` or `md:backdrop` to apply the `filter` or `backdrop` utility at only medium screen sizes and above.
+
+### Available Filter Functions
+
+> By default, no values are provided for any filter
+
+- `.blur-{value}`
+- `.brightness-{value}`
+- `.contrast-{value}`
+- `.drop-shadow-{value}`
+- `.grayscale-{value}`
+- `.hue-rotate-{value}`
+- `.invert-{value}`
+- `.saturate-{value}`
+- `.sepia-{value}`
+
+> Utility for **filter: opacity()** or **backdrop-filter: opacity()** is not provided because [according to MDN](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity()>) this function is similar to the more established **opacity** property. The difference is that with filters, some browsers provide hardware acceleration for better performance.
+>
+> So, you can use [Tailwind's native `opacity` utility](https://tailwindcss.com/docs/opacity).
+
+### Example Usage
+
 ```js
 // tailwind.config.js
 module.exports = {
   theme: {
-    filter: {
+    filterFunctions: {
       blur: {
+        1: "1px",
         2: "2px",
+        3: "3px",
       },
       saturate: {
         40: "40%",
       },
-      opacity: {
-        20: "20%",
-      },
     },
   },
 };
 ```
 
-> All filters have equivalent class name except `opacity`.
-> `.opacity-{x}` => `.filter-opacity-{x}`
-
 ```html
-<!-- backdrop-filter: blur(2px) saturate(40%); -->
-<div class="backdrop blur-2 saturate-40"></div>
-
 <!-- filter: blur(2px) saturate(40%); -->
 <div class="filter blur-2 saturate-40"></div>
 
+<!-- backdrop-filter: blur(2px) saturate(40%); -->
+<div class="backdrop blur-2 saturate-40"></div>
+
 <!--
   filter: blur(2px) saturate(40%);
   backdrop-filter: blur(2px) saturate(40%);
 -->
 <div class="filter backdrop blur-2 saturate-40"></div>
 
-<!-- backdrop-filter: none; -->
-<div class="no-backdrop"></div>
-
 <!-- filter: none; -->
-<div class="no-filter"></div>
+<div class="filter-none"></div>
 
-<!-- backdrop-filter: opacity(20%); -->
-<div class="backdrop filter-opacity-20"></div>
+<!-- backdrop-filter: none; -->
+<div class="backdrop-none"></div>
 ```

package.json

@@ -1,20 +1,35 @@
 {
   "name": "@neupauer/tailwindcss-plugin-filter",
-  "version": "0.1.0",
-  "description": "A Tailwind CSS plugin for the filter and backdrop-filter properties.",
+  "version": "1.0.0",
+  "description": "A Tailwind CSS plugin for controlling filter & backdrop-filter behaviour.",
   "main": "src/index.js",
-  "license": "MIT",
-  "repository": "https://github.com/neupauer/tailwindcss-plugin-filter",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/neupauer/tailwindcss-plugin-filter"
+  },
+  "keywords": [
+    "tailwindcss",
+    "plugin",
+    "filter",
+    "backdrop-filter",
+    "blur",
+    "brightness",
+    "contrast",
+    "drop-shadow",
+    "grayscale",
+    "hue-rotate",
+    "invert",
+    "saturate",
+    "sepia"
+  ],
   "author": {
     "name": "Peter Neupauer",
     "url": "https://neupauer.sk"
   },
+  "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
-  "prettier": {
-    "printWidth": 120
-  },
   "scripts": {
     "prepublishOnly": "node scripts/build.js"
   },
@@ -23,5 +38,8 @@
     "clean-css": "^4.2.1",
     "postcss": "^8.2.2",
     "tailwindcss": "^2.0.2"
+  },
+  "prettier": {
+    "printWidth": 120
   }
 }

scripts/build.js

@@ -7,11 +7,10 @@ const interpolationFunctions = [
   "blur",
   "brightness",
   "contrast",
-  "drop-shadow",
+  "dropShadow",
   "grayscale",
-  "hue-rotate",
+  "hueRotate",
   "invert",
-  "opacity",
   "saturate",
   "sepia",
 ];
@@ -22,14 +21,12 @@ function buildDistFile(filename) {
       corePlugins: false,
       plugins: [require("../src/index.js")],
       theme: {
-        filter: {
-          ...interpolationFunctions.reduce((acc, interpolationFunction) => {
-            acc[interpolationFunction] = {
+        filterFunctions: {
+          ...interpolationFunctions.reduce((accumulator, interpolationFunction) => {
+            accumulator[interpolationFunction] = {
               1: "1",
-              2: "2",
-              3: "3",
             };
-            return acc;
+            return accumulator;
           }, {}),
         },
       },
@@ -56,6 +53,6 @@ function buildDistFile(filename) {
 
 console.info("Building CSS...");
 
-Promise.all([buildDistFile("filter")]).then(() => {
+Promise.all([buildDistFile("dist")]).then(() => {
   console.log("Finished building CSS.");
 });

src/index.js

@@ -1,5 +1,7 @@
 const plugin = require("tailwindcss/plugin");
 
+const camelize = (s) => s.replace(/-./g, (x) => x.toUpperCase()[1]);
+
 const interpolationFunctions = [
   "blur",
   "brightness",
@@ -8,76 +10,74 @@ const interpolationFunctions = [
   "grayscale",
   "hue-rotate",
   "invert",
-  "opacity",
   "saturate",
   "sepia",
 ];
 
-const interpolationFunctionsPublicApiNames = {
-  opacity: "filter-opacity",
-};
-
-const getPublicApiName = (key) => interpolationFunctionsPublicApiNames[key] || key;
-
 const filterPlugin = plugin(
   function ({ addUtilities, theme, variants, e }) {
     addUtilities(
       [
         {
-          ".filter, .backdrop": {
-            ...interpolationFunctions.reduce((acc, interpolationFunction) => {
-              acc[`--tw-filter-${interpolationFunction}`] = "var(--tw-empty, /*!*/ /*!*/)";
-              return acc;
-            }, {}),
+          ".filter,.backdrop": {
+            "--tw-filter-functions": [
+              "blur(var(--tw-filter-blur, 0))",
+              "brightness(var(--tw-filter-brightness, 1))",
+              "contrast(var(--tw-filter-contrast, 1))",
+              "drop-shadow(var(--tw-filter-drop-shadow, 0 0))",
+              "grayscale(var(--tw-filter-grayscale, 0))",
+              "hue-rotate(var(--tw-filter-hue-rotate, 0))",
+              "invert(var(--tw-filter-invert, 0))",
+              "saturate(var(--tw-filter-saturate, 1))",
+              "sepia(var(--tw-filter-sepia, 0))",
+            ].join(" "),
           },
           ".filter": {
-            filter: interpolationFunctions
-              .map((interpolationFunction) => `var(--tw-filter-${interpolationFunction})`)
-              .join(" "),
+            filter: "var(--tw-filter-functions)",
           },
           ".backdrop": {
-            backdropFilter: interpolationFunctions
-              .map((interpolationFunction) => `var(--tw-filter-${interpolationFunction})`)
-              .join(" "),
+            backdropFilter: "var(--tw-filter-functions)",
           },
-          ".no-filter": {
+          ".filter-none": {
             filter: "none",
           },
-          ".no-backdrop": {
+          ".backdrop-none": {
             backdropFilter: "none",
           },
         },
         ...interpolationFunctions.map((interpolationFunction) => {
-          const themeConfig = theme("filter") ? theme("filter")[interpolationFunction] || {} : {};
-          return Object.entries(themeConfig).map(([key, value]) => {
+          const themeFunctionConfig = theme("filterFunctions")
+            ? theme("filterFunctions")[camelize(interpolationFunction)] || {}
+            : {};
+
+          return Object.entries(themeFunctionConfig).map(([key, value]) => {
             return {
-              [`.${e(`${getPublicApiName(interpolationFunction)}-${key}`)}`]: {
-                [`--tw-filter-${interpolationFunction}`]: `${interpolationFunction}(${value})`,
+              [`.${e(`${interpolationFunction}-${key}`)}`]: {
+                [`--tw-filter-${interpolationFunction}`]: `${value}`,
               },
             };
           });
         }),
       ],
-      variants("filter")
+      variants("filterFunctions")
     );
   },
   {
     theme: {
-      filter: {
+      filterFunctions: {
         blur: {},
         brightness: {},
         contrast: {},
-        "drop-shadow": {},
+        dropShadow: {},
         grayscale: {},
-        "hue-rotate": {},
+        hueRotate: {},
         invert: {},
-        opacity: {},
         saturate: {},
         sepia: {},
       },
     },
     variants: {
-      filter: ["responsive", "hover"],
+      filterFunctions: ["responsive", "hover"],
     },
   }
 );