feat: New opacity utilities classes

designbycode · Aug 8, 2023 · 1762367 · 1762367
1 parent dd1d72e
commit 1762367
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -29,7 +29,7 @@ The Tailwind CSS Image Mask Plugin is a custom plugin that extends Tailwind CSS
 * [Applying Image Masks](#applying-image-masks)
 * [Default Values](#default-values)
 * [Changing Gradient Starting and Ending Points](#changing-gradient-starting-and-ending-points)
-    * [Available percentage values for --mask-image-from and --mask-image-to:](#available-percentage-values-for---mask-image-from-and---mask-image-to)
+    * [Available percentage values for --mask-image-start and --mask-image-end:](#available-percentage-values-for---mask-image-start-and---mask-image-end)
 * [Configuration](#configuration)
 * [Example](#example)
 * [Contributing](#contributing)
@@ -44,7 +44,7 @@ To use this plugin, you need to install it via pnpm, npm or yarn.
 #### Using pnpm
 
 ```bash
-pnpm install @designbycode/tailwindcss-mask-image
+pnpm add @designbycode/tailwindcss-mask-image
 ```
 
 #### Using npm
@@ -103,49 +103,49 @@ You can apply image masks by using the following utility classes:
 
 The plugin sets some default CSS variables in the :root element, which define the default values for the color and direction of the image masks.
 
-| Css Variable      | Description                                    |
-|:------------------|:-----------------------------------------------|
-| --mask-image-from | Default gradient starting point (default: 0%)  |
-| --mask-image-to   | Default gradient ending point (default: 100%). |
+| Css Variable               | Description                                    |
+|:---------------------------|:-----------------------------------------------|
+| --mask-image-start-{value} | Default gradient starting point (default: 0%)  |
+| --mask-image-end-{value}   | Default gradient ending point (default: 100%). |
 
 ## Changing Gradient Starting and Ending Points
 
 You can dynamically change the starting and ending points of the gradient using the following utility classes:
 
-* ```.mask-image-from-0``` to ```.mask-image-from-100```: Changes the --mask-image-from variable to the specified percentage value.
+* ```.mask-image-start-0``` to ```.mask-image-start-100```: Changes the --mask-image-start variable to the specified percentage value.
 
-* ```.mask-image-to-0 to``` ```.mask-image-to-100```: Changes the --mask-image-to variable to the specified percentage value.
+* ```.mask-image-end-0 to``` ```.mask-image-end-100```: Changes the --mask-image-end variable to the specified percentage value.
 
 ```html
 
-<div class="mask-image-b mask-image-from-25 mask-image-to-75"></div>
+<div class="mask-image-b mask-image-start-25 mask-image-end-75"></div>
 <!-- or by arbitrary value -->
-<div class="mask-image-[73%] mask-image-from-[33%] mask-image-to-[66%]"></div>
+<div class="mask-image-[73%] mask-image-start-[33%] mask-image-end-[66%]"></div>
 ```
 
-#### Available percentage values for --mask-image-from and --mask-image-to:
-
-| Key | Value  | Output               |
-|-----|:------:|:---------------------| 
-| 0   |  "0%"  | .mask-image-from-0   |
-| 5   |  "5%"  | .mask-image-from-5   |
-| 10  | "10%"  | .mask-image-from-10  |
-| 15  | "15%"  | .mask-image-from-15  |
-| 20  | "20%"  | .mask-image-from-20  |
-| 25  | "25%"  | .mask-image-from-25  |
-| 30  | "30%"  | .mask-image-from-30  |
-| 40  | "40%"  | .mask-image-from-40  |
-| 45  | "45%"  | .mask-image-from-45  |
-| 50  | "50%"  | .mask-image-from-50  |
-| 55  | "55%"  | .mask-image-from-55  |
-| 60  | "60%"  | .mask-image-from-60  |
-| 70  | "70%"  | .mask-image-from-70  |
-| 75  | "75%"  | .mask-image-from-75  |
-| 80  | "80%"  | .mask-image-from-80  |
-| 85  | "85%"  | .mask-image-from-85  |
-| 90  | "90%"  | .mask-image-from-90  |
-| 95  | "95%"  | .mask-image-from-95  |
-| 100 | "100%" | .mask-image-from-100 |
+#### Available percentage values for --mask-image-start and --mask-image-end:
+
+| Key | Value  | Output                |
+|-----|:------:|:----------------------| 
+| 0   |  "0%"  | .mask-image-start-0   |
+| 5   |  "5%"  | .mask-image-start-5   |
+| 10  | "10%"  | .mask-image-start-10  |
+| 15  | "15%"  | .mask-image-start-15  |
+| 20  | "20%"  | .mask-image-start-20  |
+| 25  | "25%"  | .mask-image-start-25  |
+| 30  | "30%"  | .mask-image-start-30  |
+| 40  | "40%"  | .mask-image-start-40  |
+| 45  | "45%"  | .mask-image-start-45  |
+| 50  | "50%"  | .mask-image-start-50  |
+| 55  | "55%"  | .mask-image-start-55  |
+| 60  | "60%"  | .mask-image-start-60  |
+| 70  | "70%"  | .mask-image-start-70  |
+| 75  | "75%"  | .mask-image-start-75  |
+| 80  | "80%"  | .mask-image-start-80  |
+| 85  | "85%"  | .mask-image-start-85  |
+| 90  | "90%"  | .mask-image-start-90  |
+| 95  | "95%"  | .mask-image-start-95  |
+| 100 | "100%" | .mask-image-start-100 |
 
 ## Configuration
 
@@ -185,12 +185,36 @@ Here's an example of how you can use the utility classes to apply image masks:
 
 ```html
 
-<div class="mask-image-t mask-image-from-30 mask-image-to-70">
+<div class="mask-image-t mask-image-start-30 mask-image-end-70">
     <!-- Your content here -->
 </div>
 
 ```
 
+> **Note**
+> New to v2.
+> Start and end color opacity
+
+### Opacity for start and end Color
+
+You can set the opacity for start and end color for more control over the mask.
+
+```html
+
+<div class="mask-image-t mask-image-start-opacity-50 mask-image-end-opacity-70">
+    <!-- Your content here -->
+</div>
+```
+
+The arbitrary value have a range from 0 to 100 for even more control over the mask.
+
+```html
+
+<div class="mask-image-t mask-image-start-opacity-[55] mask-image-end-opacity-[20]">
+    <!-- Your content here -->
+</div>
+```
+
 ## Contributing
 
 Contributions to this plugin are welcome! If you encounter any issues, have feature requests, or want to improve the plugin, feel free to create a pull request or submit an issue on the GitHub repository.

diff --git a/dist/index.cjs b/dist/index.cjs
@@ -1 +1 @@
-"use strict";const t=require("tailwindcss/plugin");module.exports=t.withOptions((function(){return function({addBase:t,matchUtilities:a,theme:e}){t({":root":{"--mask-image-color":"#000","--mask-image-direction":"to bottom","--mask-image-from":"0%","--mask-image-to":"100%"}}),a({"mask-image":t=>({maskImage:`linear-gradient(${t}, var(--mask-image-color) var(--mask-image-from), transparent var(--mask-image-to))`})},{values:e("imageMaskDirections")}),a({"mask-image-from":t=>({"--mask-image-from":t}),"mask-image-to":t=>({"--mask-image-to":t})},{values:e("imageMaskSteps"),type:"length"})}}),(function(){return{theme:{imageMaskSteps:{0:"0%",5:"5%",10:"10%",15:"15%",20:"20%",25:"25%",30:"30%",40:"40%",45:"45%",50:"50%",55:"55%",60:"60%",70:"70%",75:"75%",80:"80%",85:"85%",90:"90%",95:"95%",100:"100%"},imageMaskDirections:{t:"to top",tr:"to top right",tl:"to top left",b:"to bottom",br:"to bottom right",bl:"to bottom left",r:"to right",l:"to left"}}}}));
+"use strict";const t=require("tailwindcss/plugin");module.exports=t.withOptions((function(){return function({addBase:t,matchUtilities:a,theme:i}){function e(t){return t/=100,Math.abs(Math.min(t,1)).toString()}t({":root":{"--mi-mask-image-start-opacity":"rgba(0,0,0,0)","--mi-mask-image-end-opacity":"rgba(0,0,0,1)","--mi-mask-image-direction":"to bottom","--mi-mask-image-start":"0%","--mi-mask-image-end":"100%"}}),a({"mask-image":t=>({maskImage:`linear-gradient(${t}, var(--mi-mask-image-start-opacity) var(--mi-mask-image-start), var(--mi-mask-image-end-opacity)  var(--mi-mask-image-end))`})},{values:i("imageMaskDirections")}),a({"mask-image-start":t=>({"--mi-mask-image-start":t}),"mask-image-end":t=>({"--mi-mask-image-end":t})},{values:i("imageMaskSteps"),type:"length"}),a({"mask-image-start-opacity":t=>(parseInt(t)>1&&(t=e(parseInt(t))),{"--mi-mask-image-start-opacity":`rgba(0,0,0, ${t})`}),"mask-image-end-opacity":t=>(parseInt(t)>1&&(t=e(parseInt(t))),{"--mi-mask-image-end-opacity":`rgba(0,0,0, ${t})`})},{values:i("opacity")})}}),(function(){return{theme:{imageMaskSteps:{0:"0%",5:"5%",10:"10%",15:"15%",20:"20%",25:"25%",30:"30%",40:"40%",45:"45%",50:"50%",55:"55%",60:"60%",70:"70%",75:"75%",80:"80%",85:"85%",90:"90%",95:"95%",100:"100%"},imageMaskDirections:{t:"to top",tr:"to top right",tl:"to top left",b:"to bottom",br:"to bottom right",bl:"to bottom left",r:"to right",l:"to left"}}}}));
diff --git a/dist/index.umd.cjs b/dist/index.umd.cjs
@@ -1 +1 @@
-!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";const t=require("tailwindcss/plugin");module.exports=t.withOptions((function(){return function({addBase:t,matchUtilities:e,theme:a}){t({":root":{"--mask-image-color":"#000","--mask-image-direction":"to bottom","--mask-image-from":"0%","--mask-image-to":"100%"}}),e({"mask-image":t=>({maskImage:`linear-gradient(${t}, var(--mask-image-color) var(--mask-image-from), transparent var(--mask-image-to))`})},{values:a("imageMaskDirections")}),e({"mask-image-from":t=>({"--mask-image-from":t}),"mask-image-to":t=>({"--mask-image-to":t})},{values:a("imageMaskSteps"),type:"length"})}}),(function(){return{theme:{imageMaskSteps:{0:"0%",5:"5%",10:"10%",15:"15%",20:"20%",25:"25%",30:"30%",40:"40%",45:"45%",50:"50%",55:"55%",60:"60%",70:"70%",75:"75%",80:"80%",85:"85%",90:"90%",95:"95%",100:"100%"},imageMaskDirections:{t:"to top",tr:"to top right",tl:"to top left",b:"to bottom",br:"to bottom right",bl:"to bottom left",r:"to right",l:"to left"}}}}))}));
+!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";const t=require("tailwindcss/plugin");module.exports=t.withOptions((function(){return function({addBase:t,matchUtilities:a,theme:i}){function e(t){return t/=100,Math.abs(Math.min(t,1)).toString()}t({":root":{"--mi-mask-image-start-opacity":"rgba(0,0,0,0)","--mi-mask-image-end-opacity":"rgba(0,0,0,1)","--mi-mask-image-direction":"to bottom","--mi-mask-image-start":"0%","--mi-mask-image-end":"100%"}}),a({"mask-image":t=>({maskImage:`linear-gradient(${t}, var(--mi-mask-image-start-opacity) var(--mi-mask-image-start), var(--mi-mask-image-end-opacity)  var(--mi-mask-image-end))`})},{values:i("imageMaskDirections")}),a({"mask-image-start":t=>({"--mi-mask-image-start":t}),"mask-image-end":t=>({"--mi-mask-image-end":t})},{values:i("imageMaskSteps"),type:"length"}),a({"mask-image-start-opacity":t=>(parseInt(t)>1&&(t=e(parseInt(t))),{"--mi-mask-image-start-opacity":`rgba(0,0,0, ${t})`}),"mask-image-end-opacity":t=>(parseInt(t)>1&&(t=e(parseInt(t))),{"--mi-mask-image-end-opacity":`rgba(0,0,0, ${t})`})},{values:i("opacity")})}}),(function(){return{theme:{imageMaskSteps:{0:"0%",5:"5%",10:"10%",15:"15%",20:"20%",25:"25%",30:"30%",40:"40%",45:"45%",50:"50%",55:"55%",60:"60%",70:"70%",75:"75%",80:"80%",85:"85%",90:"90%",95:"95%",100:"100%"},imageMaskDirections:{t:"to top",tr:"to top right",tl:"to top left",b:"to bottom",br:"to bottom right",bl:"to bottom left",r:"to right",l:"to left"}}}}))}));
diff --git a/src/index.ts b/src/index.ts
@@ -3,21 +3,27 @@ const plugin = require("tailwindcss/plugin")
 module.exports = plugin.withOptions(
   function () {
     return function ({ addBase, matchUtilities, theme }: any) {
+      function convertToPercentage(value: number): string {
+        value = value / 100
+        return Math.abs(Math.min(value, 1)).toString()
+      }
+
       // Default values
       addBase({
         ":root": {
-          "--mask-image-color": "#000",
-          "--mask-image-direction": "to bottom",
-          "--mask-image-from": "0%",
-          "--mask-image-to": "100%",
+          "--mi-mask-image-start-opacity": "rgba(0,0,0,0)",
+          "--mi-mask-image-end-opacity": "rgba(0,0,0,1)",
+          "--mi-mask-image-direction": "to bottom",
+          "--mi-mask-image-start": "0%",
+          "--mi-mask-image-end": "100%",
         },
       })
 
       matchUtilities(
         {
           // Function to generate the CSS properties based on the value from the theme
           "mask-image": (value: string) => ({
-            maskImage: `linear-gradient(${value}, var(--mask-image-color) var(--mask-image-from), transparent var(--mask-image-to))`,
+            maskImage: `linear-gradient(${value}, var(--mi-mask-image-start-opacity) var(--mi-mask-image-start), var(--mi-mask-image-end-opacity)  var(--mi-mask-image-end))`,
           }),
         },
         {
@@ -29,19 +35,44 @@ module.exports = plugin.withOptions(
       // Dynamically changes value form arbitrary values and generate utility classes from theme imageMaskSteps object
       matchUtilities(
         {
-          "mask-image-from": (value: string) => ({
-            "--mask-image-from": value,
+          "mask-image-start": (value: string) => ({
+            "--mi-mask-image-start": value,
           }),
 
-          "mask-image-to": (value: string) => ({
-            "--mask-image-to": value,
+          "mask-image-end": (value: string) => ({
+            "--mi-mask-image-end": value,
           }),
         },
         {
           values: theme("imageMaskSteps"),
           type: "length",
         }
       )
+
+      matchUtilities(
+        {
+          "mask-image-start-opacity": (value: string) => {
+            if (parseInt(value) > 1) {
+              value = convertToPercentage(parseInt(value))
+            }
+            return {
+              "--mi-mask-image-start-opacity": `rgba(0,0,0, ${value})`,
+            }
+          },
+
+          "mask-image-end-opacity": (value: string) => {
+            if (parseInt(value) > 1) {
+              value = convertToPercentage(parseInt(value))
+            }
+            return {
+              "--mi-mask-image-end-opacity": `rgba(0,0,0, ${value})`,
+            }
+          },
+        },
+        {
+          values: theme("opacity"),
+        }
+      )
     }
   },
   function () {