@nauverse/tailwind-dot-grid-backgrounds 1.2.13 โ 1.2.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +80 -88
- package/dist/index.d.ts +1 -10
- package/dist/plugin.d.ts +5 -0
- package/dist/tailwind-dot-grid-backgrounds.js +54 -100
- package/dist/tailwind-dot-grid-backgrounds.js.map +1 -1
- package/dist/tailwind-dot-grid-backgrounds.umd.cjs +2 -2
- package/dist/tailwind-dot-grid-backgrounds.umd.cjs.map +1 -1
- package/dist/theme-values.d.ts +9 -0
- package/package.json +39 -19
package/README.md
CHANGED
|
@@ -1,21 +1,20 @@
|
|
|
1
1
|
<h1 align="center">
|
|
2
|
-
|
|
2
|
+
tailwind-dot-grid-backgrounds
|
|
3
3
|
<br>
|
|
4
4
|
</h1>
|
|
5
5
|
|
|
6
6
|
<p align="center">
|
|
7
|
-
<img src="https://
|
|
7
|
+
<img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/v1/images/header.png" alt="tailwind-dot-grid-backgrounds: dot and grid backgrounds for Tailwind CSS" />
|
|
8
8
|
</p>
|
|
9
9
|
|
|
10
|
-
<h4 align="center">A tiny Tailwind plugin to add dot and grid customizable backgrounds fast</h4>
|
|
10
|
+
<h4 align="center">A tiny Tailwind CSS plugin to add dot and grid customizable backgrounds fast</h4>
|
|
11
11
|
|
|
12
12
|
<p align="center">
|
|
13
|
-
<a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions">
|
|
14
|
-
<img src="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/
|
|
15
|
-
alt="Build Status">
|
|
13
|
+
<a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/ci.yml">
|
|
14
|
+
<img src="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/ci.yml/badge.svg?branch=v1" alt="CI status">
|
|
16
15
|
</a>
|
|
17
16
|
<a href="https://www.npmjs.com/package/@nauverse/tailwind-dot-grid-backgrounds">
|
|
18
|
-
<img src="https://img.shields.io/npm/v/@nauverse/tailwind-dot-grid-backgrounds.svg?style=flat" alt="npm version">
|
|
17
|
+
<img src="https://img.shields.io/npm/v/@nauverse/tailwind-dot-grid-backgrounds/release-v1.svg?style=flat&label=npm%40v1" alt="npm version">
|
|
19
18
|
</a>
|
|
20
19
|
<a href="https://bundlephobia.com/result?p=@nauverse/tailwind-dot-grid-backgrounds">
|
|
21
20
|
<img src="https://img.shields.io/bundlephobia/minzip/%40nauverse/tailwind-dot-grid-backgrounds" alt="minzipped size">
|
|
@@ -29,81 +28,120 @@
|
|
|
29
28
|
<a href="#contribute">Contribute</a>
|
|
30
29
|
</p>
|
|
31
30
|
|
|
31
|
+
> [!IMPORTANT]
|
|
32
|
+
> **This is the `v1` line of the plugin, for Tailwind CSS v3.**
|
|
33
|
+
>
|
|
34
|
+
> Using **Tailwind CSS v4**? Use the latest version instead (`v2` and later). It is a pure CSS plugin with no JavaScript, loaded with `@import "@nauverse/tailwind-dot-grid-backgrounds";`. See the [main branch README](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds#readme) for its guide and the migration steps.
|
|
35
|
+
|
|
36
|
+
| Plugin version | Tailwind CSS | How it works | Branch |
|
|
37
|
+
| -------------- | ------------ | ------------ | ------ |
|
|
38
|
+
| `2.x` (latest) | `^4.0` | Pure CSS (`@utility`), no JavaScript | [`main`](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/tree/main) |
|
|
39
|
+
| `1.x` | `^3.4` | JavaScript plugin (Node.js `>=22`) | [`v1`](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/tree/v1) (maintenance) |
|
|
40
|
+
|
|
32
41
|
## tl;dr
|
|
33
|
-
This is a Tailwind plugin that allows you to add background grids and background dots in an easy and customizable way
|
|
42
|
+
This is a Tailwind CSS v3 plugin that allows you to add background grids and background dots in an easy and customizable way.
|
|
34
43
|
|
|
35
|
-
### 1.
|
|
44
|
+
### 1. Install the dependency
|
|
36
45
|
```bash
|
|
37
|
-
npm install --save @nauverse/tailwind-dot-grid-backgrounds
|
|
46
|
+
npm install --save-dev @nauverse/tailwind-dot-grid-backgrounds@1
|
|
38
47
|
```
|
|
39
48
|
|
|
40
|
-
### 2. Add the plugin to
|
|
41
|
-
|
|
42
|
-
|
|
49
|
+
### 2. Add the plugin to your Tailwind CSS config
|
|
50
|
+
`tailwind.config.ts` / `tailwind.config.mjs`:
|
|
51
|
+
```ts
|
|
52
|
+
import dotGridBackgrounds from "@nauverse/tailwind-dot-grid-backgrounds";
|
|
53
|
+
import type { Config } from "tailwindcss";
|
|
54
|
+
|
|
55
|
+
export default {
|
|
56
|
+
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
|
|
57
|
+
plugins: [
|
|
58
|
+
dotGridBackgrounds,
|
|
59
|
+
// ... the rest of your Tailwind CSS plugins
|
|
60
|
+
],
|
|
61
|
+
} satisfies Config;
|
|
62
|
+
```
|
|
43
63
|
|
|
44
|
-
|
|
45
|
-
|
|
64
|
+
Or, with a CommonJS `tailwind.config.js`:
|
|
65
|
+
```js
|
|
66
|
+
/** @type {import('tailwindcss').Config} */
|
|
67
|
+
module.exports = {
|
|
68
|
+
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
|
|
46
69
|
plugins: [
|
|
47
|
-
require(
|
|
48
|
-
// ... the rest of your Tailwind plugins
|
|
70
|
+
require("@nauverse/tailwind-dot-grid-backgrounds"),
|
|
71
|
+
// ... the rest of your Tailwind CSS plugins
|
|
49
72
|
],
|
|
50
73
|
};
|
|
51
|
-
|
|
74
|
+
```
|
|
52
75
|
|
|
53
|
-
### 3. You are done!
|
|
76
|
+
### 3. You are done!
|
|
54
77
|
Try it by adding this HTML to your UI:
|
|
55
78
|
```html
|
|
56
79
|
<div class="h-screen w-screen bg-yellow-300 bg-grid-8-s-2-neutral-950"></div>
|
|
57
80
|
```
|
|
58
81
|
|
|
59
82
|
## What
|
|
60
|
-
You could achieve the same by just using some Tailwind code but... I found myself adding this kind of background in my projects very often. So I created a small Tailwind plugin to allow me adding these
|
|
83
|
+
You could achieve the same by just using some Tailwind CSS code but... I found myself adding this kind of background in my projects very often. So I created a small Tailwind CSS plugin to allow me adding these backgrounds while keeping all the customization offered by Tailwind CSS.
|
|
61
84
|
|
|
62
85
|
### Features
|
|
63
|
-
-
|
|
64
|
-
-
|
|
65
|
-
-
|
|
66
|
-
-
|
|
67
|
-
-
|
|
86
|
+
- Fully integrated with Tailwind CSS: it uses your theme colors, widths and border widths
|
|
87
|
+
- Performant: the backgrounds are rendered with CSS gradients, no images
|
|
88
|
+
- Zero dependencies
|
|
89
|
+
- Tested
|
|
90
|
+
- Easy to use, straight to the point
|
|
68
91
|
|
|
69
92
|
## Guide and examples
|
|
70
93
|
|
|
71
94
|
### Background Grid
|
|
72
95
|
Pattern: `bg-grid-<SIZE>-s-<STROKE_WIDTH>-<COLOR>`
|
|
73
96
|
|
|
74
|
-
- `<SIZE>` is the size of the grid squares. It
|
|
75
|
-
- `<STROKE_WIDTH>` is the width of the strokes of the grid squares. It
|
|
76
|
-
- `<COLOR>` is the color of the strokes. It
|
|
97
|
+
- `<SIZE>` is the size of the grid squares. It accepts the keys of the `width` theme whose value is in `px` or `rem` (such as `8`, `0.5`, `px`...). You will see the available options in IntelliSense.
|
|
98
|
+
- `<STROKE_WIDTH>` is the width of the strokes of the grid squares. It accepts the keys of the `borderWidth` theme whose value is in `px` or `rem` (such as `0`, `2`, `4`, `8`), plus `1` (since Tailwind CSS does not have a `border-1` class).
|
|
99
|
+
- `<COLOR>` is the color of the strokes. It accepts any color of your theme, an opacity modifier (`/50`) and arbitrary values (`[#ff0000]`).
|
|
77
100
|
|
|
78
101
|
#### Examples:
|
|
79
102
|
`bg-grid-8-s-2-neutral-950`
|
|
80
103
|
<p align="center">
|
|
81
|
-
<img src="https://
|
|
104
|
+
<img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-grid-8-s-2-neutral-950.png" alt="tailwind-dot-grid-backgrounds bg-grid-8-s-2-neutral-950" />
|
|
82
105
|
</p>
|
|
83
106
|
|
|
84
107
|
`bg-grid-48-s-8-blue-700/80`
|
|
85
108
|
<p align="center">
|
|
86
|
-
<img src="https://
|
|
109
|
+
<img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-grid-48-s-8-blue-700_80.png" alt="tailwind-dot-grid-backgrounds bg-grid-48-s-8-blue-700/80" />
|
|
87
110
|
</p>
|
|
88
111
|
|
|
89
112
|
### Background Dots
|
|
90
113
|
Pattern: `bg-dot-<SIZE>-s-<DOT_SIZE>-<COLOR>`
|
|
91
114
|
|
|
92
|
-
- `<SIZE>` is the size of the space (in both
|
|
93
|
-
- `<DOT_SIZE>` is the
|
|
94
|
-
- `<COLOR>` is the color of the dots. It
|
|
115
|
+
- `<SIZE>` is the size of the space (in both axes) between the dots. It accepts the keys of the `width` theme whose value is in `px` or `rem`. You will see the available options in IntelliSense.
|
|
116
|
+
- `<DOT_SIZE>` is the radius of the dots. It accepts the keys of the `borderWidth` theme whose value is in `px` or `rem`, plus `1`.
|
|
117
|
+
- `<COLOR>` is the color of the dots. It accepts any color of your theme, an opacity modifier (`/50`) and arbitrary values (`[#ff0000]`).
|
|
95
118
|
|
|
96
119
|
#### Examples:
|
|
97
120
|
`bg-dot-8-s-2-neutral-950`
|
|
98
121
|
<p align="center">
|
|
99
|
-
<img src="https://
|
|
122
|
+
<img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-dot-8-s-2-neutral-950.png" alt="tailwind-dot-grid-backgrounds bg-dot-8-s-2-neutral-950" />
|
|
100
123
|
</p>
|
|
101
124
|
|
|
102
125
|
`bg-dot-16-s-8-blue-700/80`
|
|
103
126
|
<p align="center">
|
|
104
|
-
<img src="https://
|
|
127
|
+
<img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-dot-16-s-8-blue-700_80.png" alt="tailwind-dot-grid-backgrounds bg-dot-16-s-8-blue-700/80" />
|
|
105
128
|
</p>
|
|
106
129
|
|
|
130
|
+
### Customizing
|
|
131
|
+
The plugin reads your theme, so extending it adds new classes:
|
|
132
|
+
|
|
133
|
+
```ts
|
|
134
|
+
export default {
|
|
135
|
+
theme: {
|
|
136
|
+
extend: {
|
|
137
|
+
colors: { brand: { DEFAULT: "#123456", soft: "#abcdef" } }, // bg-grid-8-s-1-brand, bg-dot-8-s-1-brand-soft
|
|
138
|
+
width: { cell: "18px" }, // bg-grid-cell-s-1-red-500
|
|
139
|
+
borderWidth: { thick: "3px" }, // bg-grid-8-s-thick-red-500
|
|
140
|
+
},
|
|
141
|
+
},
|
|
142
|
+
} satisfies Config;
|
|
143
|
+
```
|
|
144
|
+
|
|
107
145
|
## Help
|
|
108
146
|
|
|
109
147
|
Thank you for using *tailwind-dot-grid-backgrounds*!
|
|
@@ -112,49 +150,16 @@ If you need any help using this plugin, feel free to [create a GitHub issue](htt
|
|
|
112
150
|
|
|
113
151
|
## Contribute
|
|
114
152
|
|
|
115
|
-
Contributions of any kind (pull requests, bug reports, feature requests, documentation, design) are more than welcome!
|
|
116
|
-
|
|
117
|
-
### Building from source
|
|
118
|
-
|
|
119
|
-
Building the project should be quick and easy. If it isn't, it's the maintainer's fault. Please report any problems with building in a GitHub issue.
|
|
120
|
-
|
|
121
|
-
You need to have a reasonably recent version of node.js to build *tailwind-dot-grid-backgrounds*.
|
|
122
|
-
Tested on node version 18.0.0 and npm version 8.6.0.
|
|
123
|
-
|
|
124
|
-
First, clone the git repository:
|
|
125
|
-
|
|
126
|
-
```
|
|
127
|
-
git clone git@github.com:TheNaubit/tailwind-dot-grid-backgrounds.git
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
Then switch to the newly created tailwind-dot-grid-backgrounds directory and install the dependencies:
|
|
131
|
-
|
|
132
|
-
```
|
|
133
|
-
cd tailwind-dot-grid-backgrounds
|
|
134
|
-
npm install
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
You can then run the unit tests to verify that everything works correctly:
|
|
138
|
-
|
|
139
|
-
```
|
|
140
|
-
npm run test:run
|
|
141
|
-
```
|
|
153
|
+
Contributions of any kind (pull requests, bug reports, feature requests, documentation, design) are more than welcome! Read the [contributing guide](./CONTRIBUTING.md) to get started. Fixes for the Tailwind CSS v3 line go to the `v1` branch.
|
|
142
154
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
```
|
|
146
|
-
npm run build
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
The output will appear in the `dist` directory.
|
|
150
|
-
|
|
151
|
-
Happy hacking!
|
|
152
|
-
|
|
153
|
-
## Contributors โจ
|
|
155
|
+
## Contributors
|
|
154
156
|
|
|
155
157
|
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
|
156
|
-
[](#contributors
|
|
158
|
+
[](#contributors)
|
|
157
159
|
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
|
160
|
+
|
|
161
|
+
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
|
162
|
+
|
|
158
163
|
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
159
164
|
<!-- prettier-ignore-start -->
|
|
160
165
|
<!-- markdownlint-disable -->
|
|
@@ -171,17 +176,4 @@ Happy hacking!
|
|
|
171
176
|
|
|
172
177
|
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
173
178
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
## Contributors
|
|
177
|
-
|
|
178
|
-
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
179
|
-
<!-- prettier-ignore-start -->
|
|
180
|
-
<!-- markdownlint-disable -->
|
|
181
|
-
|
|
182
|
-
<!-- markdownlint-restore -->
|
|
183
|
-
<!-- prettier-ignore-end -->
|
|
184
|
-
|
|
185
|
-
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
186
|
-
|
|
187
|
-
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
|
179
|
+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { PluginCreator } from 'tailwindcss/types/config';
|
|
3
|
-
|
|
4
|
-
declare const tailwindDotGridBackgrounds: {
|
|
5
|
-
handler: PluginCreator;
|
|
6
|
-
config?: Partial<Config>;
|
|
7
|
-
};
|
|
8
|
-
export default tailwindDotGridBackgrounds;
|
|
9
|
-
|
|
10
|
-
export { }
|
|
1
|
+
export { default } from "./plugin.js";
|
package/dist/plugin.d.ts
ADDED
|
@@ -1,101 +1,55 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import e from "tailwindcss/plugin.js";
|
|
2
|
+
// src/theme-values.ts
|
|
3
|
+
var t = 16, n = /* @__PURE__ */ new Set(["inherit"]);
|
|
4
|
+
function r(e) {
|
|
5
|
+
if (typeof e != "string") return null;
|
|
6
|
+
let n = /^(-?\d*\.?\d+)(px|rem)$/.exec(e.trim());
|
|
7
|
+
if (!n) return null;
|
|
8
|
+
let r = Number.parseFloat(n[1]);
|
|
9
|
+
return n[2] === "rem" ? r * t : r;
|
|
3
10
|
}
|
|
4
|
-
|
|
5
|
-
(
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
const o = u;
|
|
50
|
-
})(p);
|
|
51
|
-
(function(t) {
|
|
52
|
-
Object.defineProperty(t, "__esModule", {
|
|
53
|
-
value: !0
|
|
54
|
-
}), Object.defineProperty(t, "default", {
|
|
55
|
-
enumerable: !0,
|
|
56
|
-
get: function() {
|
|
57
|
-
return r;
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
const u = /* @__PURE__ */ o(p);
|
|
61
|
-
function o(n) {
|
|
62
|
-
return n && n.__esModule ? n : {
|
|
63
|
-
default: n
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
const r = u.default;
|
|
67
|
-
})(s);
|
|
68
|
-
let c = s;
|
|
69
|
-
var g = (c.__esModule ? c : { default: c }).default;
|
|
70
|
-
const b = /* @__PURE__ */ d(g), $ = 16, P = b(
|
|
71
|
-
({
|
|
72
|
-
matchUtilities: t,
|
|
73
|
-
theme: u
|
|
74
|
-
}) => {
|
|
75
|
-
const o = _(u("backgroundColor")), r = ["1", ...Object.keys(u("borderWidth"))], n = Object.entries(u("width")).filter(([, e]) => e.endsWith("rem")).map(([e, a]) => [
|
|
76
|
-
e,
|
|
77
|
-
Number.parseFloat(a.replace("rem", "")) * $
|
|
78
|
-
]);
|
|
79
|
-
for (const e of r)
|
|
80
|
-
for (const [a, i] of n)
|
|
81
|
-
t(
|
|
82
|
-
{
|
|
83
|
-
// This key is for the square grid background
|
|
84
|
-
[`bg-grid-${a}-s-${e}`]: (l) => ({
|
|
85
|
-
backgroundImage: `linear-gradient(to right, ${l} ${e}px, transparent ${e}px),linear-gradient(to bottom, ${l} ${e}px, transparent ${e}px)`,
|
|
86
|
-
backgroundSize: `${i}px ${i}px`
|
|
87
|
-
}),
|
|
88
|
-
// And this key is for the dotted background
|
|
89
|
-
[`bg-dot-${a}-s-${e}`]: (l) => ({
|
|
90
|
-
backgroundImage: `radial-gradient(${l} ${e}px, transparent ${e}px)`,
|
|
91
|
-
backgroundSize: `${i}px ${i}px`
|
|
92
|
-
})
|
|
93
|
-
},
|
|
94
|
-
{ values: o, type: "color" }
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
);
|
|
98
|
-
export {
|
|
99
|
-
P as default
|
|
100
|
-
};
|
|
101
|
-
//# sourceMappingURL=tailwind-dot-grid-backgrounds.js.map
|
|
11
|
+
function i(e) {
|
|
12
|
+
return Object.entries(e ?? {}).flatMap(([e, t]) => {
|
|
13
|
+
let n = r(t);
|
|
14
|
+
return n === null ? [] : [[e, n]];
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
function a(e, t) {
|
|
18
|
+
return Object.entries(e).flatMap(([e, r]) => {
|
|
19
|
+
let i = e === "DEFAULT" ? t : t ? `${t}-${e}` : e;
|
|
20
|
+
return typeof r == "object" && r ? a(r, i) : n.has(i) ? [] : [[i, r]];
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
function o(e) {
|
|
24
|
+
return Object.fromEntries(a(e ?? {}, ""));
|
|
25
|
+
}
|
|
26
|
+
function s(e) {
|
|
27
|
+
let t = i(e).filter(([e]) => e !== "DEFAULT");
|
|
28
|
+
return t.some(([e]) => e === "1") ? t : [["1", 1], ...t];
|
|
29
|
+
}
|
|
30
|
+
// src/plugin.ts
|
|
31
|
+
function c(e, t) {
|
|
32
|
+
return (n) => ({
|
|
33
|
+
backgroundImage: `linear-gradient(to right, ${n} ${t}px, transparent ${t}px),linear-gradient(to bottom, ${n} ${t}px, transparent ${t}px)`,
|
|
34
|
+
backgroundSize: `${e}px ${e}px`
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
function l(e, t) {
|
|
38
|
+
return (n) => ({
|
|
39
|
+
backgroundImage: `radial-gradient(${n} ${t}px, transparent ${t}px)`,
|
|
40
|
+
backgroundSize: `${e}px ${e}px`
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
var u = e(({ matchUtilities: e, theme: t }) => {
|
|
44
|
+
let n = o(t("backgroundColor")), r = s(t("borderWidth")), a = i(t("width")), u = n;
|
|
45
|
+
for (let [t, n] of r) for (let [r, i] of a) e({
|
|
46
|
+
[`bg-grid-${r}-s-${t}`]: c(i, n),
|
|
47
|
+
[`bg-dot-${r}-s-${t}`]: l(i, n)
|
|
48
|
+
}, {
|
|
49
|
+
values: u,
|
|
50
|
+
type: "color"
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
export { u as default };
|
|
54
|
+
|
|
55
|
+
//# sourceMappingURL=tailwind-dot-grid-backgrounds.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tailwind-dot-grid-backgrounds.js","
|
|
1
|
+
{"version":3,"file":"tailwind-dot-grid-backgrounds.js","names":["plugin","REM_TO_PX","UNSUPPORTED_COLORS","toPx","value","match","amount","toPxEntries","section","key","px","colorEntries","palette","name","prefix","flattenColors","strokeWidths","entries","borderWidth","gridBackground","color","stroke","size","dotBackground","dotSize","tailwindDotGridBackgrounds","colors","theme","strokes","sizes","values","strokeKey","sizeKey"],"sources":["../src/theme-values.ts","../src/plugin.ts"],"sourcesContent":["const REM_TO_PX = 16; // 1rem = 16px\n\n// Colors that cannot be used inside a gradient color stop.\nconst UNSUPPORTED_COLORS = new Set([\"inherit\"]);\n\ntype ColorValue = string | ((...args: never[]) => string);\ntype ColorPalette = { [key: string]: ColorValue | ColorPalette };\n\n// Convert a \"px\" or \"rem\" length to a number of pixels. Other values (percentages, keywords, other units...) return null.\nexport function toPx(value: unknown): number | null {\n\tif (typeof value !== \"string\") return null;\n\n\tconst match = /^(-?\\d*\\.?\\d+)(px|rem)$/.exec(value.trim());\n\tif (!match) return null;\n\n\tconst amount = Number.parseFloat(match[1] as string);\n\treturn match[2] === \"rem\" ? amount * REM_TO_PX : amount;\n}\n\n// Turn a theme section into [key, px] pairs, keeping only the values expressed in \"px\" or \"rem\".\nexport function toPxEntries(\n\tsection: Record<string, unknown> | undefined,\n): Array<[string, number]> {\n\treturn Object.entries(section ?? {}).flatMap(([key, value]) => {\n\t\tconst px = toPx(value);\n\t\treturn px === null ? [] : [[key, px] as [string, number]];\n\t});\n}\n\n// Flatten a nested color palette into [name, color] pairs (\"DEFAULT\" maps to the parent name), like Tailwind does.\nfunction colorEntries(\n\tpalette: ColorPalette,\n\tprefix: string,\n): Array<[string, ColorValue]> {\n\treturn Object.entries(palette).flatMap(([key, value]) => {\n\t\tconst name = key === \"DEFAULT\" ? prefix : prefix ? `${prefix}-${key}` : key;\n\n\t\tif (typeof value === \"object\" && value !== null) {\n\t\t\treturn colorEntries(value, name);\n\t\t}\n\n\t\treturn UNSUPPORTED_COLORS.has(name)\n\t\t\t? []\n\t\t\t: [[name, value] as [string, ColorValue]];\n\t});\n}\n\nexport function flattenColors(\n\tpalette: ColorPalette | undefined,\n): Record<string, ColorValue> {\n\treturn Object.fromEntries(colorEntries(palette ?? {}, \"\"));\n}\n\n// The stroke widths: every border width expressed in px or rem, except \"DEFAULT\" (it would create \"-s-DEFAULT-\" classes). \"1\" is always available since Tailwind has no \"border-1\".\nexport function strokeWidths(\n\tborderWidth: Record<string, unknown> | undefined,\n): Array<[string, number]> {\n\tconst entries = toPxEntries(borderWidth).filter(([key]) => key !== \"DEFAULT\");\n\treturn entries.some(([key]) => key === \"1\")\n\t\t? entries\n\t\t: [[\"1\", 1], ...entries];\n}\n","// The \".js\" extension is required: Tailwind CSS v3 has no \"exports\" map, so Node ESM needs the full file name.\nimport plugin from \"tailwindcss/plugin.js\";\nimport type { CSSRuleObject, PluginAPI } from \"tailwindcss/types/config.js\";\nimport { flattenColors, strokeWidths, toPxEntries } from \"./theme-values.js\";\n\ntype UtilityFactory = (color: string) => CSSRuleObject;\n\nfunction gridBackground(size: number, stroke: number): UtilityFactory {\n\treturn (color) => ({\n\t\tbackgroundImage: `linear-gradient(to right, ${color} ${stroke}px, transparent ${stroke}px),linear-gradient(to bottom, ${color} ${stroke}px, transparent ${stroke}px)`,\n\t\tbackgroundSize: `${size}px ${size}px`,\n\t});\n}\n\nfunction dotBackground(size: number, dotSize: number): UtilityFactory {\n\treturn (color) => ({\n\t\tbackgroundImage: `radial-gradient(${color} ${dotSize}px, transparent ${dotSize}px)`,\n\t\tbackgroundSize: `${size}px ${size}px`,\n\t});\n}\n\nconst tailwindDotGridBackgrounds = plugin(\n\t({ matchUtilities, theme }: PluginAPI) => {\n\t\t// Colors come from the \"backgroundColor\" theme (it includes \"colors\").\n\t\tconst colors = flattenColors(theme(\"backgroundColor\"));\n\n\t\t// Stroke widths (grid) and dot sizes come from the \"borderWidth\" theme, plus \"1\".\n\t\tconst strokes = strokeWidths(theme(\"borderWidth\"));\n\n\t\t// Grid square sizes and dot spacings come from the \"width\" theme values expressed in px or rem.\n\t\tconst sizes = toPxEntries(theme(\"width\"));\n\n\t\t// Tailwind types color values as strings, but a palette may also contain functions: both are handled by matchUtilities.\n\t\tconst values = colors as Record<string, string>;\n\n\t\tfor (const [strokeKey, stroke] of strokes) {\n\t\t\tfor (const [sizeKey, size] of sizes) {\n\t\t\t\tmatchUtilities(\n\t\t\t\t\t{\n\t\t\t\t\t\t[`bg-grid-${sizeKey}-s-${strokeKey}`]: gridBackground(size, stroke),\n\t\t\t\t\t\t[`bg-dot-${sizeKey}-s-${strokeKey}`]: dotBackground(size, stroke),\n\t\t\t\t\t},\n\t\t\t\t\t{ values, type: \"color\" },\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t},\n);\n\nexport default tailwindDotGridBackgrounds;\n"],"mappings":";;AAAA,IAAMC,IAAY,IAGZC,oBAAqB,IAAI,IAAI,CAAC,SAAS,CAAC;AAM9C,SAAgBC,EAAK,GAA+B;CACnD,IAAI,OAAOC,KAAU,UAAU,OAAO;CAEtC,IAAMC,IAAQ,0BAA0B,KAAKD,EAAM,KAAK,CAAC;CACzD,IAAI,CAACC,GAAO,OAAO;CAEnB,IAAMC,IAAS,OAAO,WAAWD,EAAM,EAAY;CACnD,OAAOA,EAAM,OAAO,QAAQC,IAASL,IAAYK;AAClD;AAGA,SAAgBC,EACf,GAC0B;CAC1B,OAAO,OAAO,QAAQC,KAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAACC,GAAKL,OAAW;EAC9D,IAAMM,IAAKP,EAAKC,CAAK;EACrB,OAAOM,MAAO,OAAO,CAAC,IAAI,CAAC,CAACD,GAAKC,CAAE,CAAqB;CACzD,CAAC;AACF;AAGA,SAASC,EACR,GACA,GAC8B;CAC9B,OAAO,OAAO,QAAQC,CAAO,CAAC,CAAC,SAAS,CAACH,GAAKL,OAAW;EACxD,IAAMS,IAAOJ,MAAQ,YAAYK,IAASA,IAAS,GAAGA,EAAO,GAAGL,MAAQA;EAMxE,OAJI,OAAOL,KAAU,YAAYA,IACzBO,EAAaP,GAAOS,CAAI,IAGzBX,EAAmB,IAAIW,CAAI,IAC/B,CAAC,IACD,CAAC,CAACA,GAAMT,CAAK,CAAyB;CAC1C,CAAC;AACF;AAEA,SAAgBW,EACf,GAC6B;CAC7B,OAAO,OAAO,YAAYJ,EAAaC,KAAW,CAAC,GAAG,EAAE,CAAC;AAC1D;AAGA,SAAgBI,EACf,GAC0B;CAC1B,IAAMC,IAAUV,EAAYW,CAAW,CAAC,CAAC,QAAQ,CAACT,OAASA,MAAQ,SAAS;CAC5E,OAAOQ,EAAQ,MAAM,CAACR,OAASA,MAAQ,GAAG,IACvCQ,IACA,CAAC,CAAC,KAAK,CAAC,GAAG,GAAGA,CAAO;AACzB;;ACtDA,SAASE,EAAe,GAAc,GAAgC;CACrE,QAAQ,OAAW;EAClB,iBAAiB,6BAA6BC,EAAM,GAAGC,EAAO,kBAAkBA,EAAO,iCAAiCD,EAAM,GAAGC,EAAO,kBAAkBA,EAAO;EACjK,gBAAgB,GAAGC,EAAK,KAAKA,EAAK;CACnC;AACD;AAEA,SAASC,EAAc,GAAc,GAAiC;CACrE,QAAQ,OAAW;EAClB,iBAAiB,mBAAmBH,EAAM,GAAGI,EAAQ,kBAAkBA,EAAQ;EAC/E,gBAAgB,GAAGF,EAAK,KAAKA,EAAK;CACnC;AACD;AAEA,IAAMG,IAA6BzB,GACjC,EAAE,mBAAgB,eAAuB;CAEzC,IAAM0B,IAASX,EAAcY,EAAM,iBAAiB,CAAC,GAG/CC,IAAUZ,EAAaW,EAAM,aAAa,CAAC,GAG3CE,IAAQtB,EAAYoB,EAAM,OAAO,CAAC,GAGlCG,IAASJ;CAEf,KAAK,IAAM,CAACK,GAAWV,MAAWO,GACjC,KAAK,IAAM,CAACI,GAASV,MAASO,GAC7B,EACC;GACE,WAAWG,EAAQ,KAAKD,MAAcZ,EAAeG,GAAMD,CAAM;GACjE,UAAUW,EAAQ,KAAKD,MAAcR,EAAcD,GAAMD,CAAM;CACjE,GACA;EAAE;EAAQ,MAAM;CAAQ,CACzB;AAGH,CACD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
//# sourceMappingURL=tailwind-dot-grid-backgrounds.umd.cjs.map
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?module.exports=t(require("tailwindcss/plugin.js")):typeof define==`function`&&define.amd?define([`tailwindcss/plugin.js`],t):(e=typeof globalThis<`u`?globalThis:e||self,e.tailwindDotGridBackgrounds=t(e.tailwindcss.plugin))})(this,function(e){var t=Object.create,n=Object.defineProperty,r=Object.getOwnPropertyDescriptor,i=Object.getOwnPropertyNames,a=Object.getPrototypeOf,o=Object.prototype.hasOwnProperty,s=(e,t,a,s)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=i(t),l=0,u=c.length,d;l<u;l++)d=c[l],!o.call(e,d)&&d!==a&&n(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(s=r(t,d))||s.enumerable});return e};e=((e,r,i)=>(i=e==null?{}:t(a(e)),s(n(i,`default`,{value:e,enumerable:!0}),e)))(e,1);var c=16,l=new Set([`inherit`]);function u(e){if(typeof e!=`string`)return null;let t=/^(-?\d*\.?\d+)(px|rem)$/.exec(e.trim());if(!t)return null;let n=Number.parseFloat(t[1]);return t[2]===`rem`?n*c:n}function d(e){return Object.entries(e??{}).flatMap(([e,t])=>{let n=u(t);return n===null?[]:[[e,n]]})}function f(e,t){return Object.entries(e).flatMap(([e,n])=>{let r=e===`DEFAULT`?t:t?`${t}-${e}`:e;return typeof n==`object`&&n?f(n,r):l.has(r)?[]:[[r,n]]})}function p(e){return Object.fromEntries(f(e??{},``))}function m(e){let t=d(e).filter(([e])=>e!==`DEFAULT`);return t.some(([e])=>e===`1`)?t:[[`1`,1],...t]}function h(e,t){return n=>({backgroundImage:`linear-gradient(to right, ${n} ${t}px, transparent ${t}px),linear-gradient(to bottom, ${n} ${t}px, transparent ${t}px)`,backgroundSize:`${e}px ${e}px`})}function g(e,t){return n=>({backgroundImage:`radial-gradient(${n} ${t}px, transparent ${t}px)`,backgroundSize:`${e}px ${e}px`})}return(0,e.default)(({matchUtilities:e,theme:t})=>{let n=p(t(`backgroundColor`)),r=m(t(`borderWidth`)),i=d(t(`width`)),a=n;for(let[t,n]of r)for(let[r,o]of i)e({[`bg-grid-${r}-s-${t}`]:h(o,n),[`bg-dot-${r}-s-${t}`]:g(o,n)},{values:a,type:`color`})})});
|
|
2
|
+
//# sourceMappingURL=tailwind-dot-grid-backgrounds.umd.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tailwind-dot-grid-backgrounds.umd.cjs","
|
|
1
|
+
{"version":3,"file":"tailwind-dot-grid-backgrounds.umd.cjs","names":["plugin","factory","global","__create","__defProp","__getOwnPropDesc","__getOwnPropNames","__getProtoOf","__hasOwnProp","__copyProps","from","keys","i","n","key","to","except","k","desc","mod","target","tailwindcss_plugin_js","REM_TO_PX","UNSUPPORTED_COLORS","toPx","value","match","amount","toPxEntries","section","px","colorEntries","palette","name","prefix","flattenColors","strokeWidths","entries","borderWidth","gridBackground","color","stroke","size","dotBackground","dotSize","colors","theme","strokes","sizes","values","strokeKey","sizeKey","matchUtilities"],"sources":["../src/theme-values.ts","../src/plugin.ts"],"sourcesContent":["const REM_TO_PX = 16; // 1rem = 16px\n\n// Colors that cannot be used inside a gradient color stop.\nconst UNSUPPORTED_COLORS = new Set([\"inherit\"]);\n\ntype ColorValue = string | ((...args: never[]) => string);\ntype ColorPalette = { [key: string]: ColorValue | ColorPalette };\n\n// Convert a \"px\" or \"rem\" length to a number of pixels. Other values (percentages, keywords, other units...) return null.\nexport function toPx(value: unknown): number | null {\n\tif (typeof value !== \"string\") return null;\n\n\tconst match = /^(-?\\d*\\.?\\d+)(px|rem)$/.exec(value.trim());\n\tif (!match) return null;\n\n\tconst amount = Number.parseFloat(match[1] as string);\n\treturn match[2] === \"rem\" ? amount * REM_TO_PX : amount;\n}\n\n// Turn a theme section into [key, px] pairs, keeping only the values expressed in \"px\" or \"rem\".\nexport function toPxEntries(\n\tsection: Record<string, unknown> | undefined,\n): Array<[string, number]> {\n\treturn Object.entries(section ?? {}).flatMap(([key, value]) => {\n\t\tconst px = toPx(value);\n\t\treturn px === null ? [] : [[key, px] as [string, number]];\n\t});\n}\n\n// Flatten a nested color palette into [name, color] pairs (\"DEFAULT\" maps to the parent name), like Tailwind does.\nfunction colorEntries(\n\tpalette: ColorPalette,\n\tprefix: string,\n): Array<[string, ColorValue]> {\n\treturn Object.entries(palette).flatMap(([key, value]) => {\n\t\tconst name = key === \"DEFAULT\" ? prefix : prefix ? `${prefix}-${key}` : key;\n\n\t\tif (typeof value === \"object\" && value !== null) {\n\t\t\treturn colorEntries(value, name);\n\t\t}\n\n\t\treturn UNSUPPORTED_COLORS.has(name)\n\t\t\t? []\n\t\t\t: [[name, value] as [string, ColorValue]];\n\t});\n}\n\nexport function flattenColors(\n\tpalette: ColorPalette | undefined,\n): Record<string, ColorValue> {\n\treturn Object.fromEntries(colorEntries(palette ?? {}, \"\"));\n}\n\n// The stroke widths: every border width expressed in px or rem, except \"DEFAULT\" (it would create \"-s-DEFAULT-\" classes). \"1\" is always available since Tailwind has no \"border-1\".\nexport function strokeWidths(\n\tborderWidth: Record<string, unknown> | undefined,\n): Array<[string, number]> {\n\tconst entries = toPxEntries(borderWidth).filter(([key]) => key !== \"DEFAULT\");\n\treturn entries.some(([key]) => key === \"1\")\n\t\t? entries\n\t\t: [[\"1\", 1], ...entries];\n}\n","// The \".js\" extension is required: Tailwind CSS v3 has no \"exports\" map, so Node ESM needs the full file name.\nimport plugin from \"tailwindcss/plugin.js\";\nimport type { CSSRuleObject, PluginAPI } from \"tailwindcss/types/config.js\";\nimport { flattenColors, strokeWidths, toPxEntries } from \"./theme-values.js\";\n\ntype UtilityFactory = (color: string) => CSSRuleObject;\n\nfunction gridBackground(size: number, stroke: number): UtilityFactory {\n\treturn (color) => ({\n\t\tbackgroundImage: `linear-gradient(to right, ${color} ${stroke}px, transparent ${stroke}px),linear-gradient(to bottom, ${color} ${stroke}px, transparent ${stroke}px)`,\n\t\tbackgroundSize: `${size}px ${size}px`,\n\t});\n}\n\nfunction dotBackground(size: number, dotSize: number): UtilityFactory {\n\treturn (color) => ({\n\t\tbackgroundImage: `radial-gradient(${color} ${dotSize}px, transparent ${dotSize}px)`,\n\t\tbackgroundSize: `${size}px ${size}px`,\n\t});\n}\n\nconst tailwindDotGridBackgrounds = plugin(\n\t({ matchUtilities, theme }: PluginAPI) => {\n\t\t// Colors come from the \"backgroundColor\" theme (it includes \"colors\").\n\t\tconst colors = flattenColors(theme(\"backgroundColor\"));\n\n\t\t// Stroke widths (grid) and dot sizes come from the \"borderWidth\" theme, plus \"1\".\n\t\tconst strokes = strokeWidths(theme(\"borderWidth\"));\n\n\t\t// Grid square sizes and dot spacings come from the \"width\" theme values expressed in px or rem.\n\t\tconst sizes = toPxEntries(theme(\"width\"));\n\n\t\t// Tailwind types color values as strings, but a palette may also contain functions: both are handled by matchUtilities.\n\t\tconst values = colors as Record<string, string>;\n\n\t\tfor (const [strokeKey, stroke] of strokes) {\n\t\t\tfor (const [sizeKey, size] of sizes) {\n\t\t\t\tmatchUtilities(\n\t\t\t\t\t{\n\t\t\t\t\t\t[`bg-grid-${sizeKey}-s-${strokeKey}`]: gridBackground(size, stroke),\n\t\t\t\t\t\t[`bg-dot-${sizeKey}-s-${strokeKey}`]: dotBackground(size, stroke),\n\t\t\t\t\t},\n\t\t\t\t\t{ values, type: \"color\" },\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t},\n);\n\nexport default tailwindDotGridBackgrounds;\n"],"mappings":"C,0vBAAA,IAAMsB,EAAY,GAGZC,EAAqB,IAAI,IAAI,CAAC,SAAS,CAAC,EAM9C,SAAgBC,EAAK,EAA+B,CACnD,GAAI,OAAOC,GAAU,SAAU,OAAO,KAEtC,IAAMC,EAAQ,0BAA0B,KAAKD,EAAM,KAAK,CAAC,EACzD,GAAI,CAACC,EAAO,OAAO,KAEnB,IAAMC,EAAS,OAAO,WAAWD,EAAM,EAAY,EACnD,OAAOA,EAAM,KAAO,MAAQC,EAASL,EAAYK,CAClD,CAGA,SAAgBC,EACf,EAC0B,CAC1B,OAAO,OAAO,QAAQC,GAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAACf,EAAKW,KAAW,CAC9D,IAAMK,EAAKN,EAAKC,CAAK,EACrB,OAAOK,IAAO,KAAO,CAAC,EAAI,CAAC,CAAChB,EAAKgB,CAAE,CAAqB,CACzD,CAAC,CACF,CAGA,SAASC,EACR,EACA,EAC8B,CAC9B,OAAO,OAAO,QAAQC,CAAO,CAAC,CAAC,SAAS,CAAClB,EAAKW,KAAW,CACxD,IAAMQ,EAAOnB,IAAQ,UAAYoB,EAASA,EAAS,GAAGA,EAAO,GAAGpB,IAAQA,EAMxE,OAJI,OAAOW,GAAU,UAAYA,EACzBM,EAAaN,EAAOQ,CAAI,EAGzBV,EAAmB,IAAIU,CAAI,EAC/B,CAAC,EACD,CAAC,CAACA,EAAMR,CAAK,CAAyB,CAC1C,CAAC,CACF,CAEA,SAAgBU,EACf,EAC6B,CAC7B,OAAO,OAAO,YAAYJ,EAAaC,GAAW,CAAC,EAAG,EAAE,CAAC,CAC1D,CAGA,SAAgBI,EACf,EAC0B,CAC1B,IAAMC,EAAUT,EAAYU,CAAW,CAAC,CAAC,QAAQ,CAACxB,KAASA,IAAQ,SAAS,EAC5E,OAAOuB,EAAQ,MAAM,CAACvB,KAASA,IAAQ,GAAG,EACvCuB,EACA,CAAC,CAAC,IAAK,CAAC,EAAG,GAAGA,CAAO,CACzB,CCtDA,SAASE,EAAe,EAAc,EAAgC,CACrE,MAAQ,KAAW,CAClB,gBAAiB,6BAA6BC,EAAM,GAAGC,EAAO,kBAAkBA,EAAO,iCAAiCD,EAAM,GAAGC,EAAO,kBAAkBA,EAAO,KACjK,eAAgB,GAAGC,EAAK,KAAKA,EAAK,GACnC,EACD,CAEA,SAASC,EAAc,EAAc,EAAiC,CACrE,MAAQ,KAAW,CAClB,gBAAiB,mBAAmBH,EAAM,GAAGI,EAAQ,kBAAkBA,EAAQ,KAC/E,eAAgB,GAAGF,EAAK,KAAKA,EAAK,GACnC,EACD,C,OAEM,EAA6B1C,EAAAA,QAAAA,EACjC,CAAE,iBAAgB,WAAuB,CAEzC,IAAM6C,EAASV,EAAcW,EAAM,iBAAiB,CAAC,EAG/CC,EAAUX,EAAaU,EAAM,aAAa,CAAC,EAG3CE,EAAQpB,EAAYkB,EAAM,OAAO,CAAC,EAGlCG,EAASJ,EAEf,IAAK,GAAM,CAACK,EAAWT,KAAWM,EACjC,IAAK,GAAM,CAACI,EAAST,KAASM,EAC7BI,EACC,EACE,WAAWD,EAAQ,KAAKD,KAAcX,EAAeG,EAAMD,CAAM,GACjE,UAAUU,EAAQ,KAAKD,KAAcP,EAAcD,EAAMD,CAAM,CACjE,EACA,CAAE,SAAQ,KAAM,OAAQ,CACzB,CAGH,C"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
type ColorValue = string | ((...args: never[]) => string);
|
|
2
|
+
type ColorPalette = {
|
|
3
|
+
[key: string]: ColorValue | ColorPalette;
|
|
4
|
+
};
|
|
5
|
+
export declare function toPx(value: unknown): number | null;
|
|
6
|
+
export declare function toPxEntries(section: Record<string, unknown> | undefined): Array<[string, number]>;
|
|
7
|
+
export declare function flattenColors(palette: ColorPalette | undefined): Record<string, ColorValue>;
|
|
8
|
+
export declare function strokeWidths(borderWidth: Record<string, unknown> | undefined): Array<[string, number]>;
|
|
9
|
+
export {};
|
package/package.json
CHANGED
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
"url": "https://albertadler.com"
|
|
7
7
|
},
|
|
8
8
|
"license": "MIT",
|
|
9
|
-
"homepage": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds",
|
|
9
|
+
"homepage": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/tree/v1#readme",
|
|
10
10
|
"repository": {
|
|
11
11
|
"type": "git",
|
|
12
|
-
"url": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds.git"
|
|
12
|
+
"url": "git+https://github.com/TheNaubit/tailwind-dot-grid-backgrounds.git"
|
|
13
13
|
},
|
|
14
14
|
"bugs": {
|
|
15
15
|
"url": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/issues"
|
|
@@ -23,13 +23,13 @@
|
|
|
23
23
|
"grid-background",
|
|
24
24
|
"dot-background"
|
|
25
25
|
],
|
|
26
|
-
"version": "1.2.
|
|
26
|
+
"version": "1.2.15",
|
|
27
27
|
"type": "module",
|
|
28
28
|
"main": "./dist/tailwind-dot-grid-backgrounds.umd.cjs",
|
|
29
29
|
"module": "./dist/tailwind-dot-grid-backgrounds.js",
|
|
30
30
|
"types": "./dist/index.d.ts",
|
|
31
31
|
"engines": {
|
|
32
|
-
"node": ">=
|
|
32
|
+
"node": ">=22.0.0"
|
|
33
33
|
},
|
|
34
34
|
"exports": {
|
|
35
35
|
".": {
|
|
@@ -47,29 +47,49 @@
|
|
|
47
47
|
"dist"
|
|
48
48
|
],
|
|
49
49
|
"scripts": {
|
|
50
|
-
"build": "tsc && vite build",
|
|
50
|
+
"build": "tsc --noEmit && vite build && tsc -p tsconfig.build.json",
|
|
51
51
|
"test": "vitest",
|
|
52
52
|
"test:run": "vitest run",
|
|
53
53
|
"test:coverage": "vitest run --coverage",
|
|
54
54
|
"lint": "biome check",
|
|
55
55
|
"lint:fix": "biome check --write",
|
|
56
|
-
"prepare": "husky"
|
|
56
|
+
"prepare": "husky",
|
|
57
|
+
"typecheck": "tsc --noEmit"
|
|
57
58
|
},
|
|
58
59
|
"devDependencies": {
|
|
59
|
-
"@biomejs/biome": "
|
|
60
|
-
"@commitlint/cli": "
|
|
61
|
-
"@commitlint/config-conventional": "
|
|
62
|
-
"@
|
|
63
|
-
"@
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
60
|
+
"@biomejs/biome": "2.6.3",
|
|
61
|
+
"@commitlint/cli": "21.2.4",
|
|
62
|
+
"@commitlint/config-conventional": "21.2.4",
|
|
63
|
+
"@semantic-release/changelog": "6.0.3",
|
|
64
|
+
"@semantic-release/git": "10.0.1",
|
|
65
|
+
"@types/node": "24.19.2",
|
|
66
|
+
"@vitest/coverage-v8": "5.0.5",
|
|
67
|
+
"husky": "9.1.7",
|
|
68
|
+
"postcss": "8.5.31",
|
|
69
|
+
"semantic-release": "25.0.9",
|
|
70
|
+
"tailwindcss": "3.4.19",
|
|
71
|
+
"typescript": "7.0.2",
|
|
72
|
+
"vite": "8.3.5",
|
|
73
|
+
"vitest": "5.0.5"
|
|
71
74
|
},
|
|
72
75
|
"peerDependencies": {
|
|
73
|
-
"tailwindcss": "
|
|
76
|
+
"tailwindcss": "^3.4.0"
|
|
77
|
+
},
|
|
78
|
+
"sideEffects": false,
|
|
79
|
+
"devEngines": {
|
|
80
|
+
"runtime": {
|
|
81
|
+
"name": "node",
|
|
82
|
+
"version": "^22.14.0 || >=24.10.0",
|
|
83
|
+
"onFail": "error"
|
|
84
|
+
},
|
|
85
|
+
"packageManager": {
|
|
86
|
+
"name": "npm",
|
|
87
|
+
"version": ">=10.9.0",
|
|
88
|
+
"onFail": "warn"
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"publishConfig": {
|
|
92
|
+
"access": "public",
|
|
93
|
+
"registry": "https://registry.npmjs.org/"
|
|
74
94
|
}
|
|
75
95
|
}
|