Skip to content

Commit

Permalink
Merge pull request #2 from pyncz/feat/mask-size
Browse files Browse the repository at this point in the history 
feat: Add `mask-position` and `mask-size`, extend `mask-repeat` utility
  • Loading branch information
@pyncz
pyncz authored Mar 26, 2023
2 parents 1f2de8b + 615f4c6 commit 087dbcb
Show file tree
Hide file tree
Showing 10 changed files with 201 additions and 73 deletions.
76 changes: 54 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

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/LF91xWKHl7)
[<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/szgRchW420)

---

## Install
# Install

Install the package with your preferred package-manager.
```
Expand All @@ -27,7 +27,9 @@ module.exports = {
```


## Usage
# Usage

## mask-image

There are 3 default values the `mask` utility can accept:
- `linear`
Expand Down Expand Up @@ -111,31 +113,31 @@ By default, the gradient's position is `center`. You can use the same values as
```html
<div class="mask-radial mask-at-[30px_40px]" />
```
![mask-at example](examples/mask-position.png)
![mask-at example](examples/mask-at.png)

#### Size `mask-size`
#### Reach `mask-reach`

With this util you can specify the size of the gradient.

```html
<div class="mask-radial mask-size-closest-side" />
<div class="mask-radial mask-size-closest-corner" />
<div class="mask-radial mask-size-farthest-side" />
<div class="mask-radial mask-size-farthest-corner" />
<div class="mask-radial mask-reach-closest-side" />
<div class="mask-radial mask-reach-closest-corner" />
<div class="mask-radial mask-reach-farthest-side" />
<div class="mask-radial mask-reach-farthest-corner" />
```
![mask-size example](examples/mask-size.png)
![mask-reach example](examples/mask-reach.png)

Besides *as-they-are* keyword-values, there are also a couple of aliases:
- `mask-size-contain` for `closest-side`
- `mask-size-cover` for `farthest-corner`
- `mask-reach-contain` for `closest-side`
- `mask-reach-cover` for `farthest-corner`

You can also use arbitrary values:

```html
<div class="mask-size-[40%_2rem] mask-radial" />
<div class="mask-size-[40%_150%] mask-radial" />
<div class="mask-reach-[40%_2rem] mask-radial" />
<div class="mask-reach-[40%_150%] mask-radial" />
```
![example for mask-size with arbitrary values](examples/mask-size-arbitrary.png)
![example for mask-reach with arbitrary values](examples/mask-reach-arbitrary.png)

#### Stops

Expand Down Expand Up @@ -171,13 +173,6 @@ The `mask-image` css prop accepts not only gradients but images as well. You can
```
![arbitrary mask image example](examples/arbitrary-image.png)

In this case you can manage the [`mask-repeat` css property](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat) as well with the `mask-repeat` and `mask-no-repeat` utils.

```html
<div class="mask-[url('/your-pretty-image.png')] mask-repeat sm:mask-no-repeat" />
```
![mask-repeat example](examples/mask-repeat.png)

#### Gradients

You can pass other types of the gradients, e.g. `conic-gradient` etc.
Expand All @@ -192,3 +187,40 @@ Also, you may want not to use the API above even for `linear-gradient` or `radia
```html
<div class="mask-[linear-gradient(12deg,_black,_transparent)]" />
```


## mask-size

```html
<div class="mask-[url('/your-pretty-image.png')] mask-size-cover" />
<div class="mask-[url('/your-pretty-image.png')] mask-size-contain" />
<div class="mask-[url('/your-pretty-image.png')] mask-size-[4rem]" />
```
![mask size example](examples/mask-size.png)


## mask-position

```html
<div class="mask-[url('/your-pretty-image.png')] mask-no-repeat mask-position-left-bottom" />
<div class="mask-[url('/your-pretty-image.png')] mask-no-repeat mask-position-center" />
<div class="mask-[url('/your-pretty-image.png')] mask-no-repeat mask-position-[0.5rem_25%]" />
```
![mask position example](examples/mask-position.png)


## mask-repeat

You can manage the [`mask-repeat` css property](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat) as well with the following utilities:
- `mask-repeat`
- `mask-repeat-x`
- `mask-repeat-y`
- `mask-repeat-space`
- `mask-repeat-round`
- `mask-no-repeat`

```html
<div class="mask-[url('/your-pretty-image.png')] mask-repeat" />
<div class="mask-[url('/your-pretty-image.png')] mask-no-repeat" />
```
![mask-repeat example](examples/mask-repeat.png)
Binary file added examples/mask-at.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-position.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-arbitrary.png → examples/mask-reach-arbitrary.png
View file
File renamed without changes
Binary file added examples/mask-reach.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-size.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.
67 changes: 50 additions & 17 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,16 @@ module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
{
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-reach': 'closest-side',
'--tw-mask-at': 'center',

// stops
Expand All @@ -35,20 +32,11 @@ module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
none: 'none',
linear: 'linear-gradient(var(--tw-mask-direction), var(--tw-mask-stops))',
radial:
'radial-gradient(var(--tw-mask-shape) var(--tw-mask-size) at var(--tw-mask-at), var(--tw-mask-stops))',
'radial-gradient(var(--tw-mask-shape) var(--tw-mask-reach) at var(--tw-mask-at), var(--tw-mask-stops))',
},
}
)

addUtilities({
'.mask-repeat': {
maskRepeat: 'repeat',
},
'.mask-no-repeat': {
maskRepeat: 'no-repeat',
},
})

// - direction
// NOTE: Can accept angle as an arbitrary value, e.g. `mask-dir-[30deg]`
matchUtilities(
Expand Down Expand Up @@ -82,11 +70,11 @@ module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
})

// - size
// NOTE: Can accept X Y size as an arbitrary value, e.g. `mask-size-[25%_25%]`
// NOTE: Can accept X Y size as an arbitrary value, e.g. `mask-reach-[25%_25%]`
matchUtilities(
{
'mask-size': (value) => ({
'--tw-mask-size': value,
'mask-reach': (value) => ({
'--tw-mask-reach': value,
}),
},
{
Expand Down Expand Up @@ -156,4 +144,49 @@ module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
'--tw-mask-point-via': value,
}),
})

// Additional attributes
// repeat
addUtilities({
'.mask-repeat': {
maskRepeat: 'repeat',
},
'.mask-repeat-x': {
maskRepeat: 'repeat-x',
},
'.mask-repeat-y': {
maskRepeat: 'repeat-y',
},
'.mask-repeat-space': {
maskRepeat: 'space',
},
'.mask-repeat-round': {
maskRepeat: 'round',
},
'.mask-no-repeat': {
maskRepeat: 'no-repeat',
},
})
// size
matchUtilities(
{
'mask-size': (value) => ({
maskSize: value,
}),
},
{
values: theme('backgroundSize')
},
)
// position
matchUtilities(
{
'mask-position': (value) => ({
maskPosition: value,
}),
},
{
values: theme('backgroundPosition')
},
)
})
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/LF91xWKHl7)
> [<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/szgRchW420)
62 changes: 46 additions & 16 deletions playground/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<div class="min-h-screen justify-center space-y-4 bg-zinc-900 p-6 text-zinc-100 sm:py-12">
<h1>Linear</h1>
<h1>mask-image</h1>

<h2>Linear</h2>
<div class="flex">
<div class="example-container">
<div class="example mask-linear"></div>
Expand Down Expand Up @@ -32,14 +34,14 @@ <h1>Linear</h1>

<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 class="example mask-linear mask-via-10 mask-to-100 mask-point-from-[10%] mask-point-via-[30%]"></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>
<h2>Radial</h2>
<div class="flex">
<div class="example-container">
<div class="example mask-radial"></div>
Expand All @@ -60,24 +62,24 @@ <h1>Radial</h1>
</div>
<div class="flex gap-4">
<div class="example-container">
<div class="example min-w-[6rem] mask-radial mask-size-closest-side mask-at-[40px_40px]"></div>
<div class="mask-reach-closest-side example min-w-[6rem] mask-radial mask-at-[40px_40px]"></div>
</div>
<div class="example-container">
<div class="example min-w-[6rem] mask-radial mask-size-closest-corner mask-at-[40px_40px]"></div>
<div class="mask-reach-closest-corner example min-w-[6rem] mask-radial mask-at-[40px_40px]"></div>
</div>
<div class="example-container">
<div class="example min-w-[6rem] mask-radial mask-size-farthest-side mask-at-[40px_40px]"></div>
<div class="mask-reach-farthest-side example min-w-[6rem] mask-radial mask-at-[40px_40px]"></div>
</div>
<div class="example-container">
<div class="example min-w-[6rem] mask-radial mask-size-farthest-corner mask-at-[40px_40px]"></div>
<div class="mask-reach-farthest-corner example min-w-[6rem] mask-radial mask-at-[40px_40px]"></div>
</div>
</div>
<div class="flex gap-4">
<div class="example-container">
<div class="example mask-radial mask-size-[40%_2rem]"></div>
<div class="mask-reach-[40%_2rem] example mask-radial"></div>
</div>
<div class="example-container">
<div class="example mask-radial mask-size-[40%_150%]"></div>
<div class="mask-reach-[40%_150%] example mask-radial"></div>
</div>
</div>
<div class="flex gap-4">
Expand All @@ -88,11 +90,11 @@ <h1>Radial</h1>
<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 class="example mask-radial mask-from-0 mask-via-[0.75] mask-point-from-[2rem] mask-point-via-[3rem]"></div>
</div>
</div>

<h1>None</h1>
<h2>None</h2>
<div class="flex gap-4">
<div class="example-container">
<div class="example mask-linear"></div>
Expand All @@ -102,23 +104,51 @@ <h1>None</h1>
</div>
</div>

<h1>Arbitrary</h1>
<h2>Arbitrary</h2>
<div class="flex">
<div class="example-container">
<div class="example mask-[url('https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg')]"></div>
</div>
</div>
<div class="flex">
<div class="example-container">
<div class="example mask-[conic-gradient(from_45deg,_black,_transparent)]"></div>
</div>
</div>

<h1>mask-size</h1>
<div class="flex gap-4">
<div class="example-container">
<div class="example mask-[url('https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg')] mask-repeat"></div>
<div class="example mask-[url('https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg')] mask-size-cover"></div>
</div>
<div class="example-container">
<div class="example mask-[url('https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg')] mask-no-repeat"></div>
<div class="example mask-[url('https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg')] mask-size-contain"></div>
</div>
<div class="example-container">
<div class="example mask-[url('https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg')] mask-size-[4rem]"></div>
</div>
</div>
<div class="flex">

<h1>mask-position</h1>
<div class="flex gap-4">
<div class="example-container">
<div class="example mask-[conic-gradient(from_45deg,_black,_transparent)]"></div>
<div class="mask-position-left-bottom example mask-[url('https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg')] mask-no-repeat mask-size-[5rem]"></div>
</div>
<div class="example-container">
<div class="mask-position-center example mask-[url('https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg')] mask-no-repeat mask-size-[5rem]"></div>
</div>
<div class="example-container">
<div class="mask-position-[0.5rem_25%] example mask-[url('https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg')] mask-no-repeat mask-size-[5rem]"></div>
</div>
</div>

<h1>mask-repeat</h1>
<div class="flex gap-4">
<div class="example-container">
<div class="example mask-[url('https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg')] mask-repeat"></div>
</div>
<div class="example-container">
<div class="example mask-[url('https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg')] mask-no-repeat"></div>
</div>
</div>
</div>
Loading

0 comments on commit 087dbcb

Please sign in to comment.