feat(points): Introduce stops' positions API

pyncz · Mar 26, 2023 · 9a9bfa1 · 9a9bfa1
1 parent 8b2eba2
commit 9a9bfa1
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 A `mask-image` plugin for [Tailwind CSS](https://tailwindcss.com).
 
-[<img alt="View on Tailwind Play" src="https://img.shields.io/badge/View%20on%20Tailwind%20Play-%2357a7e1.svg?logo=tailwindcss&logoColor=white&style=flat-square" />](https://play.tailwindcss.com/5nqePqTxTt)
+[<img alt="View on Tailwind Play" src="https://img.shields.io/badge/View%20on%20Tailwind%20Play-%2357a7e1.svg?logo=tailwindcss&logoColor=white&style=flat-square" />](https://play.tailwindcss.com/LF91xWKHl7)
 
 ---
 
@@ -73,6 +73,17 @@ The `opacity` values are taken from your theme specified in the `tailwind.config
 > **Note**
 > You don't have to specify **all** the stops, because the default values (100% for the start and 0% for the end point) still work.
 
+##### Stops positions
+
+In addition to setting the opacity of the stops, you can also set the **position** using `mask-point`.
+
+```html
+<div class="mask-linear mask-point-from-[10%] mask-via-10 mask-point-via-[30%] mask-to-100" />
+<div class="mask-linear mask-dir-to-r mask-to-[0.05] mask-point-to-[50%]" />
+```
+![stops' points example](examples/mask-linear-stops-points.png)
+
+This utility don't accept any default value, so use arbitrary values.
 
 ### `radial`
 
@@ -129,11 +140,12 @@ You can also use arbitrary values:
 #### Stops
 
 > **Note**
-> The opacity stops are the same as [the ones described for `mask-linear`](#opacity-stops).
+> The opacity stops for `mask-radial` are the same as [the ones described for `mask-linear`](#opacity-stops), including [points API](#stops-positions).
 
 ```html
 <div class="mask-radial mask-from-0 mask-via-[0.25]" />
 <div class="mask-radial mask-from-0 mask-via-[0.75] mask-to-100" />
+<div class="mask-radial mask-from-0 mask-point-from-[2rem] mask-via-[0.75] mask-point-via-[3rem]" />
 ```
 ![mask-radial stops' example](examples/mask-radial-stops.png)
 

diff --git a/examples/arbitary-conic-gradient.png → examples/arbitrary-conic-gradient.png b/examples/arbitary-conic-gradient.png → examples/arbitrary-conic-gradient.png
diff --git a/examples/arbitary-image.png → examples/arbitrary-image.png b/examples/arbitary-image.png → examples/arbitrary-image.png
diff --git a/examples/mask-linear-stops-points.png b/examples/mask-linear-stops-points.png
diff --git a/examples/mask-radial-stops.png b/examples/mask-radial-stops.png
diff --git a/examples/mask-size-arbitary.png → examples/mask-size-arbitrary.png b/examples/mask-size-arbitary.png → examples/mask-size-arbitrary.png
diff --git a/index.js b/index.js
@@ -22,9 +22,11 @@ module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
 
         // stops
         '--tw-mask-from-opacity': '1',
-        '--tw-mask-from': 'rgba(0,0,0,var(--tw-mask-from-opacity))',
+        '--tw-mask-point-from': '',
+        '--tw-mask-from': 'rgba(0,0,0,var(--tw-mask-from-opacity)) var(--tw-mask-point-from)',
         '--tw-mask-to-opacity': '0',
-        '--tw-mask-to': 'rgba(0,0,0,var(--tw-mask-to-opacity))',
+        '--tw-mask-point-to': '',
+        '--tw-mask-to': 'rgba(0,0,0,var(--tw-mask-to-opacity)) var(--tw-mask-point-to)',
         '--tw-mask-stops': 'var(--tw-mask-from), var(--tw-mask-to)',
       }),
     },
@@ -124,7 +126,7 @@ module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
     }
   )
 
-  // - stops
+  // - stops' colors
   // NOTE: Can accept custom opacity as an arbitrary value, e.g. `mask-dir-[0.25]`
   matchUtilities(
     {
@@ -135,9 +137,23 @@ module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
         '--tw-mask-to-opacity': value,
       }),
       'mask-via': (value) => ({
-        '--tw-mask-stops': `var(--tw-mask-from), rgba(0,0,0,${value}), var(--tw-mask-to)`,
+        '--tw-mask-point-via': '',
+        '--tw-mask-stops': `var(--tw-mask-from), rgba(0,0,0,${value}) var(--tw-mask-point-via), var(--tw-mask-to)`,
       }),
     },
     { values: theme('opacity') }
   )
+
+  // - stops' points
+  matchUtilities({
+    'mask-point-from': (value) => ({
+      '--tw-mask-point-from': value,
+    }),
+    'mask-point-to': (value) => ({
+      '--tw-mask-point-to': value,
+    }),
+    'mask-point-via': (value) => ({
+      '--tw-mask-point-via': value,
+    }),
+  })
 })
diff --git a/playground/README.md b/playground/README.md
@@ -3,4 +3,4 @@ You can past them in the [Tailwind Play](https://play.tailwindcss.com) and have
 
 > The shared playground is here:
 >
-> [<img alt="View on Tailwind Play" src="https://img.shields.io/badge/View%20on%20Tailwind%20Play-%2357a7e1.svg?logo=tailwindcss&logoColor=white&style=flat-square" />](https://play.tailwindcss.com/5nqePqTxTt)
+> [<img alt="View on Tailwind Play" src="https://img.shields.io/badge/View%20on%20Tailwind%20Play-%2357a7e1.svg?logo=tailwindcss&logoColor=white&style=flat-square" />](https://play.tailwindcss.com/LF91xWKHl7)
diff --git a/playground/index.html b/playground/index.html
@@ -30,6 +30,15 @@ <h1>Linear</h1>
     </div>
   </div>
 
+  <div class="flex gap-4">
+    <div class="example-container">
+      <div class="example mask-linear mask-point-from-[10%] mask-via-10 mask-point-via-[30%] mask-to-100"></div>
+    </div>
+    <div class="example-container">
+      <div class="example mask-linear mask-dir-to-r mask-to-[0.05] mask-point-to-[50%]"></div>
+    </div>
+  </div>
+
   <h1>Radial</h1>
   <div class="flex">
     <div class="example-container">
@@ -78,6 +87,9 @@ <h1>Radial</h1>
     <div class="example-container">
       <div class="example mask-radial mask-from-0 mask-via-[0.75] mask-to-100"></div>
     </div>
+    <div class="example-container">
+      <div class="example mask-radial mask-from-0 mask-point-from-[2rem] mask-via-[0.75] mask-point-via-[3rem]"></div>
+    </div>
   </div>
 
   <h1>None</h1>

diff --git a/playground/tailwind.config.js b/playground/tailwind.config.js
@@ -9,25 +9,28 @@ module.exports = {
         {
           mask: (value) => ({
             maskImage: value,
-
+            maskRepeat: 'var(--tw-mask-repeat)',
+
             /**
              * Default vars
              */
             '--tw-mask-repeat': 'repeat',
-
+    
             // linear-gradient props
             '--tw-mask-direction': 'to bottom',
-
+    
             // radial-gradient props
             '--tw-mask-shape': '',
             '--tw-mask-size': 'closest-side',
             '--tw-mask-at': 'center',
-
+    
             // stops
             '--tw-mask-from-opacity': '1',
-            '--tw-mask-from': 'rgba(0,0,0,var(--tw-mask-from-opacity))',
+            '--tw-mask-point-from': '',
+            '--tw-mask-from': 'rgba(0,0,0,var(--tw-mask-from-opacity)) var(--tw-mask-point-from)',
             '--tw-mask-to-opacity': '0',
-            '--tw-mask-to': 'rgba(0,0,0,var(--tw-mask-to-opacity))',
+            '--tw-mask-point-to': '',
+            '--tw-mask-to': 'rgba(0,0,0,var(--tw-mask-to-opacity)) var(--tw-mask-point-to)',
             '--tw-mask-stops': 'var(--tw-mask-from), var(--tw-mask-to)',
           }),
         },
@@ -40,7 +43,7 @@ module.exports = {
           },
         }
       )
-
+    
       addUtilities({
         '.mask-repeat': {
           maskRepeat: 'repeat',
@@ -49,7 +52,7 @@ module.exports = {
           maskRepeat: 'no-repeat',
         },
       })
-
+    
       // - direction
       // NOTE: Can accept angle as an arbitrary value, e.g. `mask-dir-[30deg]`
       matchUtilities(
@@ -71,7 +74,7 @@ module.exports = {
           },
         }
       )
-
+    
       // - shape
       addUtilities({
         '.mask-shape-circle': {
@@ -81,7 +84,7 @@ module.exports = {
           '--tw-mask-shape': 'ellipse',
         },
       })
-
+    
       // - size
       // NOTE: Can accept X Y size as an arbitrary value, e.g. `mask-size-[25%_25%]`
       matchUtilities(
@@ -98,12 +101,12 @@ module.exports = {
             'farthest-side': 'farthest-side',
             'farthest-corner': 'farthest-corner',
             // aliases
-            contain: 'closest-side',
-            cover: 'farthest-corner',
+            'contain': 'closest-side',
+            'cover': 'farthest-corner',
           },
-        }
+        },
       )
-
+    
       // - position
       // NOTE: Can accept X Y position as an arbitrary value, e.g. `mask-at-[50%_10px]`
       matchUtilities(
@@ -126,8 +129,8 @@ module.exports = {
           },
         }
       )
-
-      // - stops
+    
+      // - stops' colors
       // NOTE: Can accept custom opacity as an arbitrary value, e.g. `mask-dir-[0.25]`
       matchUtilities(
         {
@@ -138,11 +141,25 @@ module.exports = {
             '--tw-mask-to-opacity': value,
           }),
           'mask-via': (value) => ({
-            '--tw-mask-stops': `var(--tw-mask-from), rgba(0,0,0,${value}), var(--tw-mask-to)`,
+            '--tw-mask-point-via': '',
+            '--tw-mask-stops': `var(--tw-mask-from), rgba(0,0,0,${value}) var(--tw-mask-point-via), var(--tw-mask-to)`,
           }),
         },
         { values: theme('opacity') }
       )
+
+      // - stops' points
+      matchUtilities({
+        'mask-point-from': (value) => ({
+          '--tw-mask-point-from': value,
+        }),
+        'mask-point-to': (value) => ({
+          '--tw-mask-point-to': value,
+        }),
+        'mask-point-via': (value) => ({
+          '--tw-mask-point-via': value,
+        }),
+      })
     },
 
     // helper