Skip to content

Commit

Permalink
Merge pull request #1 from pyncz/feat/stops-points
Browse files Browse the repository at this point in the history 
feat(points): Introduce stops' positions API
  • Loading branch information
@pyncz
pyncz authored Mar 26, 2023
2 parents 8b2eba2 + 9a9bfa1 commit 1f2de8b
Show file tree
Hide file tree
Showing 10 changed files with 81 additions and 24 deletions.
16 changes: 14 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

---

Expand Down Expand Up @@ -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`

Expand Down Expand Up @@ -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)

Expand Down
0 examples/arbitary-conic-gradient.png → examples/arbitrary-conic-gradient.png
View file
File renamed without changes
0 examples/arbitary-image.png → examples/arbitrary-image.png
View file
File renamed without changes
Binary file added examples/mask-linear-stops-points.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/mask-radial-stops.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 examples/mask-size-arbitary.png → examples/mask-size-arbitrary.png
View file
File renamed without changes
24 changes: 20 additions & 4 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
}),
},
Expand Down Expand Up @@ -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(
{
Expand All @@ -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,
}),
})
})
2 changes: 1 addition & 1 deletion playground/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
12 changes: 12 additions & 0 deletions playground/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
51 changes: 34 additions & 17 deletions playground/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
}),
},
Expand All @@ -40,7 +43,7 @@ module.exports = {
},
}
)

addUtilities({
'.mask-repeat': {
maskRepeat: 'repeat',
Expand All @@ -49,7 +52,7 @@ module.exports = {
maskRepeat: 'no-repeat',
},
})

// - direction
// NOTE: Can accept angle as an arbitrary value, e.g. `mask-dir-[30deg]`
matchUtilities(
Expand All @@ -71,7 +74,7 @@ module.exports = {
},
}
)

// - shape
addUtilities({
'.mask-shape-circle': {
Expand All @@ -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(
Expand All @@ -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(
Expand All @@ -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(
{
Expand All @@ -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
Expand Down

0 comments on commit 1f2de8b

Please sign in to comment.