@nauverse/tailwind-dot-grid-backgrounds 1.2.14 → 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
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<img src="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/ci.yml/badge.svg?branch=v1" alt="CI status">
|
|
15
15
|
</a>
|
|
16
16
|
<a href="https://www.npmjs.com/package/@nauverse/tailwind-dot-grid-backgrounds">
|
|
17
|
-
<img src="https://img.shields.io/npm/v/@nauverse/tailwind-dot-grid-backgrounds/v1.svg?style=flat&label=npm%40v1" 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">
|
|
18
18
|
</a>
|
|
19
19
|
<a href="https://bundlephobia.com/result?p=@nauverse/tailwind-dot-grid-backgrounds">
|
|
20
20
|
<img src="https://img.shields.io/bundlephobia/minzip/%40nauverse/tailwind-dot-grid-backgrounds" alt="minzipped size">
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import e from "tailwindcss/plugin.js";
|
|
2
|
-
|
|
2
|
+
// src/theme-values.ts
|
|
3
3
|
var t = 16, n = /* @__PURE__ */ new Set(["inherit"]);
|
|
4
4
|
function r(e) {
|
|
5
5
|
if (typeof e != "string") return null;
|
|
@@ -27,8 +27,7 @@ function s(e) {
|
|
|
27
27
|
let t = i(e).filter(([e]) => e !== "DEFAULT");
|
|
28
28
|
return t.some(([e]) => e === "1") ? t : [["1", 1], ...t];
|
|
29
29
|
}
|
|
30
|
-
|
|
31
|
-
//#region src/plugin.ts
|
|
30
|
+
// src/plugin.ts
|
|
32
31
|
function c(e, t) {
|
|
33
32
|
return (n) => ({
|
|
34
33
|
backgroundImage: `linear-gradient(to right, ${n} ${t}px, transparent ${t}px),linear-gradient(to bottom, ${n} ${t}px, transparent ${t}px)`,
|
|
@@ -51,7 +50,6 @@ var u = e(({ matchUtilities: e, theme: t }) => {
|
|
|
51
50
|
type: "color"
|
|
52
51
|
});
|
|
53
52
|
});
|
|
54
|
-
//#endregion
|
|
55
53
|
export { u as default };
|
|
56
54
|
|
|
57
55
|
//# sourceMappingURL=tailwind-dot-grid-backgrounds.js.map
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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(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(
|
|
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
2
|
//# sourceMappingURL=tailwind-dot-grid-backgrounds.umd.cjs.map
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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"}
|
package/package.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
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,7 +23,7 @@
|
|
|
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",
|
|
@@ -57,20 +57,20 @@
|
|
|
57
57
|
"typecheck": "tsc --noEmit"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@biomejs/biome": "2.
|
|
61
|
-
"@commitlint/cli": "21.2.
|
|
62
|
-
"@commitlint/config-conventional": "21.2.
|
|
60
|
+
"@biomejs/biome": "2.6.3",
|
|
61
|
+
"@commitlint/cli": "21.2.4",
|
|
62
|
+
"@commitlint/config-conventional": "21.2.4",
|
|
63
63
|
"@semantic-release/changelog": "6.0.3",
|
|
64
64
|
"@semantic-release/git": "10.0.1",
|
|
65
|
-
"@types/node": "24.19.
|
|
66
|
-
"@vitest/coverage-v8": "5.0.
|
|
65
|
+
"@types/node": "24.19.2",
|
|
66
|
+
"@vitest/coverage-v8": "5.0.5",
|
|
67
67
|
"husky": "9.1.7",
|
|
68
|
-
"postcss": "8.5.
|
|
68
|
+
"postcss": "8.5.31",
|
|
69
69
|
"semantic-release": "25.0.9",
|
|
70
70
|
"tailwindcss": "3.4.19",
|
|
71
71
|
"typescript": "7.0.2",
|
|
72
|
-
"vite": "8.3.
|
|
73
|
-
"vitest": "5.0.
|
|
72
|
+
"vite": "8.3.5",
|
|
73
|
+
"vitest": "5.0.5"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
76
76
|
"tailwindcss": "^3.4.0"
|