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 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
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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Binary file added examples/mask-reach.png
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
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
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
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
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.