@nauverse/tailwind-dot-grid-backgrounds 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Albert Adler | Naucode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,167 @@
+<h1 align="center">
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+  🎨 tailwind-dot-grid-backgrounds
+  <br>
+</h1>
+
+<h4 align="center">A tiny Tailwind plugin to add dot and grid customizable backgrounds fast</h4>
+
+<p align="center">
+  <a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions">
+    <img src="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/release.yml/badge.svg"
+         alt="Build Status">
+  </a>
+  <a href="https://www.npmjs.com/package/@nauverse/tailwind-dot-grid-backgrounds">
+    <img src="https://img.shields.io/npm/v/@nauverse/tailwind-dot-grid-backgrounds.svg?style=flat" alt="npm version">
+  </a>
+  <a href="https://bundlephobia.com/result?p=@nauverse/tailwind-dot-grid-backgrounds">
+    <img src="https://img.shields.io/bundlephobia/minzip/%40nauverse/tailwind-dot-grid-backgrounds" alt="minzipped size">
+  </a>
+</p>
+
+<p align="center">
+  <a href="#what">What?</a> •
+  <a href="#guide-and-examples">Guide and examples</a> •
+  <a href="#help">Help</a> •
+  <a href="#contribute">Contribute</a>
+</p>
+
+## tl;dr
+This is a Tailwind plugin that allows you to add background grids and background dots in an easy and customizable way:
+
+### 1. Installing the dependency:
+```bash
+npm install --save @nauverse/tailwind-dot-grid-backgrounds
+```
+
+### 2. Add the plugin to the `tailwind.config.js` file:
+~~~js
+// ... the rest of your tailwind.config.js file
+
+const config: Config = {
+  // ... the rest of your config
+  plugins: [
+    require('@nauverse/tailwind-dot-grid-backgrounds')
+    // ... the rest of your Tailwind plugins
+  ],
+};
+~~~
+
+### 3. You are done! 🪄
+Try it by adding this HTML to your UI:
+```html
+<div class="h-screen w-screen bg-yellow-300 bg-grid-8-s-2-neutral-950"></div>
+```
+
+## What
+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 background but at the same allowing all the customization offered by Tailwind.
+
+## Guide and examples
+
+### Background Grid
+Pattern: `bg-grid-<SIZE>-s-<STROKE_WIDTH>-<COLOR>`
+
+- `<SIZE>` is the size of the grid squares. It allows the numeric values of the `width` prop in Tailwind. You will see the available options in Intellisense.
+- `<STROKE_WIDTH>` is the width of the strokes of the grid squares. It allows the numeric values of the `borderWidth` prop in Tailwind and also the value `1` (since Tailwind does not have a `border-1` class).
+- `<COLOR>` is the color of the strokes. It allows any valid classname color in Tailwind.
+
+#### Examples:
+`bg-grid-8-s-2-neutral-950`
+
+`bg-grid-48-s-8-blue-700/80`
+
+### Background Dots
+Pattern: `bg-dot-<SIZE>-s-<DOT_SIZE>-<COLOR>`
+
+- `<SIZE>` is the size of the space (in both axis) between the dots. It allows the numeric values of the `width` prop in Tailwind. You will see the available options in Intellisense.
+- `<DOT_SIZE>` is the size of the dots. It allows the numeric values of the `borderWidth` prop in Tailwind and also the value `1` (since Tailwind does not have a `border-1` class).
+- `<COLOR>` is the color of the dots. It allows any valid classname color in Tailwind.
+
+#### Examples:
+`bg-dot-8-s-2-neutral-950`
+
+`bg-dot-48-s-8-blue-700/80`
+
+## Help
+
+Thank you for using *tailwind-dot-grid-backgrounds*!
+
+If you need any help using this plugin, feel free to [create a GitHub issue](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/issues/new/choose), and ask your questions. I'll try to answer as quickly as possible.
+
+## Contribute
+
+Contributions of any kind (pull requests, bug reports, feature requests, documentation, design) are more than welcome! If you like this project and want to help, but feel like you are stuck, feel free to contact the maintainers.
+
+### Building from source
+
+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.
+
+You need to have a reasonably recent version of node.js to build *tailwind-dot-grid-backgrounds*. 
+Tested on node version 18.0.0 and npm version 8.6.0.
+
+First, clone the git repository:
+
+```
+git clone git@github.com:TheNaubit/tailwind-dot-grid-backgrounds.git
+```
+
+Then switch to the newly created tailwind-dot-grid-backgrounds directory and install the dependencies:
+
+```
+cd tailwind-dot-grid-backgrounds
+npm install
+```
+
+You can then run the unit tests to verify that everything works correctly:
+
+```
+npm run test:run
+```
+
+And finally, build the library:
+
+```
+npm run build
+```
+
+The output will appear in the `dist` directory.
+
+Happy hacking!
+
+## Contributors ✨
+
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://albertadler.com"><img src="https://avatars.githubusercontent.com/u/22015497?v=4?s=100" width="100px;" alt="Al &#124; Naucode"/><br /><sub><b>Al &#124; Naucode</b></sub></a><br /><a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/issues?q=author%3ATheNaubit" title="Bug reports">🐛</a> <a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/commits?author=TheNaubit" title="Code">💻</a> <a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/commits?author=TheNaubit" title="Documentation">📖</a> <a href="#maintenance-TheNaubit" title="Maintenance">🚧</a> <a href="#infra-TheNaubit" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/commits?author=TheNaubit" title="Tests">⚠️</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+## Contributors
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import { Config } from 'tailwindcss/types/config';
+import { PluginCreator } from 'tailwindcss/types/config';
+
+declare const tailwindDotGridBackgrounds: {
+    handler: PluginCreator;
+    config?: Partial<Config> | undefined;
+};
+export default tailwindDotGridBackgrounds;
+
+export { }

package/dist/tailwind-dot-grid-backgrounds.js

@@ -0,0 +1,101 @@
+function f(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var s = {}, p = {};
+(function(t) {
+  Object.defineProperty(t, "__esModule", {
+    value: !0
+  }), Object.defineProperty(t, "default", {
+    enumerable: !0,
+    get: function() {
+      return o;
+    }
+  });
+  function a(r, n) {
+    return {
+      handler: r,
+      config: n
+    };
+  }
+  a.withOptions = function(r, n = () => ({})) {
+    const e = function(u) {
+      return {
+        __options: u,
+        handler: r(u),
+        config: n(u)
+      };
+    };
+    return e.__isOptionsFunction = !0, e.__pluginFunction = r, e.__configFunction = n, e;
+  };
+  const o = a;
+})(p);
+(function(t) {
+  Object.defineProperty(t, "__esModule", {
+    value: !0
+  }), Object.defineProperty(t, "default", {
+    enumerable: !0,
+    get: function() {
+      return r;
+    }
+  });
+  const a = /* @__PURE__ */ o(p);
+  function o(n) {
+    return n && n.__esModule ? n : {
+      default: n
+    };
+  }
+  const r = a.default;
+})(s);
+let i = s;
+var _ = (i.__esModule ? i : { default: i }).default;
+const g = /* @__PURE__ */ f(_);
+var d = {};
+(function(t) {
+  Object.defineProperty(t, "__esModule", {
+    value: !0
+  }), Object.defineProperty(t, "default", {
+    enumerable: !0,
+    get: function() {
+      return o;
+    }
+  });
+  const a = (r) => Object.assign({}, ...Object.entries(r ?? {}).flatMap(([n, e]) => typeof e == "object" ? Object.entries(a(e)).map(([u, c]) => ({
+    [n + (u === "DEFAULT" ? "" : `-${u}`)]: c
+  })) : [
+    {
+      [`${n}`]: e
+    }
+  ])), o = a;
+})(d);
+const $ = /* @__PURE__ */ f(d), P = 16, O = g(function({
+  matchUtilities: t,
+  theme: a
+}) {
+  const o = $(a("backgroundColor")), r = ["1", ...Object.keys(a("borderWidth"))], n = Object.entries(a("width")).filter(([, e]) => e.endsWith("rem")).map(([e, u]) => [
+    e,
+    parseFloat(u.replace("rem", "")) * P
+  ]);
+  r.forEach((e) => {
+    n.forEach(([u, c]) => {
+      t(
+        {
+          // This key is for the square grid background
+          [`bg-grid-${u}-s-${e}`]: (l) => ({
+            backgroundImage: `linear-gradient(to right, ${l} ${e}px, transparent ${e}px),linear-gradient(to bottom, ${l} ${e}px, transparent ${e}px)`,
+            backgroundSize: `${c}px ${c}px`
+          }),
+          // And this key is for the dotted background
+          [`bg-dot-${u}-s-${e}`]: (l) => ({
+            backgroundImage: `radial-gradient(${l} ${e}px, transparent ${e}px)`,
+            backgroundSize: `${c}px ${c}px`
+          })
+        },
+        { values: o, type: "color" }
+      );
+    });
+  });
+});
+export {
+  O as default
+};
+//# sourceMappingURL=tailwind-dot-grid-backgrounds.js.map

package/dist/tailwind-dot-grid-backgrounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-dot-grid-backgrounds.js","sources":["../node_modules/tailwindcss/lib/util/createPlugin.js","../node_modules/tailwindcss/lib/public/create-plugin.js","../node_modules/tailwindcss/plugin.js","../node_modules/tailwindcss/lib/util/flattenColorPalette.js","../src/plugin.ts"],"sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nfunction createPlugin(plugin, config) {\n    return {\n        handler: plugin,\n        config\n    };\n}\ncreatePlugin.withOptions = function(pluginFunction, configFunction = ()=>({})) {\n    const optionsFunction = function(options) {\n        return {\n            __options: options,\n            handler: pluginFunction(options),\n            config: configFunction(options)\n        };\n    };\n    optionsFunction.__isOptionsFunction = true;\n    // Expose plugin dependencies so that `object-hash` returns a different\n    // value if anything here changes, to ensure a rebuild is triggered.\n    optionsFunction.__pluginFunction = pluginFunction;\n    optionsFunction.__configFunction = configFunction;\n    return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n    return obj && obj.__esModule ? obj : {\n        default: obj\n    };\n}\nconst _default = _createPlugin.default;\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nconst flattenColorPalette = (colors)=>Object.assign({}, ...Object.entries(colors !== null && colors !== void 0 ? colors : {}).flatMap(([color, values])=>typeof values == \"object\" ? Object.entries(flattenColorPalette(values)).map(([number, hex])=>({\n                [color + (number === \"DEFAULT\" ? \"\" : `-${number}`)]: hex\n            })) : [\n            {\n                [`${color}`]: values\n            }\n        ]));\nconst _default = flattenColorPalette;\n","import plugin from \"tailwindcss/plugin\";\n// @ts-expect-error - flattenColorPalette file does not export a type declaration\nimport flattenColorPalette from \"tailwindcss/lib/util/flattenColorPalette\";\nimport type { PluginAPI } from \"tailwindcss/types/config\";\n\nconst REM_TO_PX = 16; // 1rem = 16px\n\nconst tailwindDotGridBackgrounds = plugin(function ({\n  matchUtilities,\n  theme\n}: {\n  matchUtilities: PluginAPI[\"matchUtilities\"];\n  theme: PluginAPI[\"theme\"];\n}) {\n  // Obtain the color palette from the theme\n  const colorPalette = flattenColorPalette(theme(\"backgroundColor\"));\n\n  // The border widths from Tailwind CSS will be the values used for the grid stoke widths. We also add the value \"1\" to the list of border widths (since Tailwind CSS does not include it by default).\n  const borderWidths = [\"1\", ...Object.keys(theme(\"borderWidth\"))];\n\n  // For the sizes (the size of the squares in the grid or the distance between the dots in the dotted background), we will use the numeric width values from the \"width\" theme object. We will filter out the values that are not in \"rem\" units and convert the remaining values to pixels.\n  const numericWidths: Array<[string, number]> = (\n    Object.entries(theme(\"width\")) as Array<[string, string]>\n  )\n    .filter(([, value]) => value.endsWith(\"rem\"))\n    .map(([key, value]) => [\n      key,\n      parseFloat(value.replace(\"rem\", \"\")) * REM_TO_PX\n    ]);\n\n  // Now iterate to generate all the utility classes\n  borderWidths.forEach(borderWidth => {\n    numericWidths.forEach(([widthKey, widthValue]) => {\n      matchUtilities(\n        {\n          // This key is for the square grid background\n          [`bg-grid-${widthKey}-s-${borderWidth}`]: (colorValue: string) => {\n            return {\n              backgroundImage: `linear-gradient(to right, ${colorValue} ${borderWidth}px, transparent ${borderWidth}px),linear-gradient(to bottom, ${colorValue} ${borderWidth}px, transparent ${borderWidth}px)`,\n              backgroundSize: `${widthValue}px ${widthValue}px`\n            };\n          },\n          // And this key is for the dotted background\n          [`bg-dot-${widthKey}-s-${borderWidth}`]: (colorValue: string) => {\n            return {\n              backgroundImage: `radial-gradient(${colorValue} ${borderWidth}px, transparent ${borderWidth}px)`,\n              backgroundSize: `${widthValue}px ${widthValue}px`\n            };\n          }\n        },\n        { values: colorPalette, type: \"color\" }\n      );\n    });\n  });\n});\n\nexport default tailwindDotGridBackgrounds;\n"],"names":["exports","_default","createPlugin","plugin","config","pluginFunction","configFunction","optionsFunction","options","_createPlugin","_interop_require_default","require$$0","obj","flattenColorPalette","colors","color","values","number","hex","REM_TO_PX","tailwindDotGridBackgrounds","matchUtilities","theme","colorPalette","borderWidths","numericWidths","value","key","borderWidth","widthKey","widthValue","colorValue"],"mappings":"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","x_google_ignoreList":[0,1,2,3]}

package/dist/tailwind-dot-grid-backgrounds.umd.cjs

@@ -0,0 +1,2 @@
+(function(i,c){typeof exports=="object"&&typeof module<"u"?module.exports=c():typeof define=="function"&&define.amd?define(c):(i=typeof globalThis<"u"?globalThis:i||self,i["tailwind-dot-grid-backgrounds"]=c())})(this,function(){"use strict";function i(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var c={},s={};(function(t){Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return a}});function u(r,n){return{handler:r,config:n}}u.withOptions=function(r,n=()=>({})){const e=function(o){return{__options:o,handler:r(o),config:n(o)}};return e.__isOptionsFunction=!0,e.__pluginFunction=r,e.__configFunction=n,e};const a=u})(s),function(t){Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return r}});const u=a(s);function a(n){return n&&n.__esModule?n:{default:n}}const r=u.default}(c);let d=c;var g=(d.__esModule?d:{default:d}).default;const _=i(g);var p={};(function(t){Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return a}});const u=r=>Object.assign({},...Object.entries(r??{}).flatMap(([n,e])=>typeof e=="object"?Object.entries(u(e)).map(([o,l])=>({[n+(o==="DEFAULT"?"":`-${o}`)]:l})):[{[`${n}`]:e}])),a=u})(p);const $=i(p),b=16;return _(function({matchUtilities:t,theme:u}){const a=$(u("backgroundColor")),r=["1",...Object.keys(u("borderWidth"))],n=Object.entries(u("width")).filter(([,e])=>e.endsWith("rem")).map(([e,o])=>[e,parseFloat(o.replace("rem",""))*b]);r.forEach(e=>{n.forEach(([o,l])=>{t({[`bg-grid-${o}-s-${e}`]:f=>({backgroundImage:`linear-gradient(to right, ${f} ${e}px, transparent ${e}px),linear-gradient(to bottom, ${f} ${e}px, transparent ${e}px)`,backgroundSize:`${l}px ${l}px`}),[`bg-dot-${o}-s-${e}`]:f=>({backgroundImage:`radial-gradient(${f} ${e}px, transparent ${e}px)`,backgroundSize:`${l}px ${l}px`})},{values:a,type:"color"})})})})});
+//# sourceMappingURL=tailwind-dot-grid-backgrounds.umd.cjs.map

package/dist/tailwind-dot-grid-backgrounds.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-dot-grid-backgrounds.umd.cjs","sources":["../node_modules/tailwindcss/lib/util/createPlugin.js","../node_modules/tailwindcss/lib/public/create-plugin.js","../node_modules/tailwindcss/plugin.js","../node_modules/tailwindcss/lib/util/flattenColorPalette.js","../src/plugin.ts"],"sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nfunction createPlugin(plugin, config) {\n    return {\n        handler: plugin,\n        config\n    };\n}\ncreatePlugin.withOptions = function(pluginFunction, configFunction = ()=>({})) {\n    const optionsFunction = function(options) {\n        return {\n            __options: options,\n            handler: pluginFunction(options),\n            config: configFunction(options)\n        };\n    };\n    optionsFunction.__isOptionsFunction = true;\n    // Expose plugin dependencies so that `object-hash` returns a different\n    // value if anything here changes, to ensure a rebuild is triggered.\n    optionsFunction.__pluginFunction = pluginFunction;\n    optionsFunction.__configFunction = configFunction;\n    return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n    return obj && obj.__esModule ? obj : {\n        default: obj\n    };\n}\nconst _default = _createPlugin.default;\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nconst flattenColorPalette = (colors)=>Object.assign({}, ...Object.entries(colors !== null && colors !== void 0 ? colors : {}).flatMap(([color, values])=>typeof values == \"object\" ? Object.entries(flattenColorPalette(values)).map(([number, hex])=>({\n                [color + (number === \"DEFAULT\" ? \"\" : `-${number}`)]: hex\n            })) : [\n            {\n                [`${color}`]: values\n            }\n        ]));\nconst _default = flattenColorPalette;\n","import plugin from \"tailwindcss/plugin\";\n// @ts-expect-error - flattenColorPalette file does not export a type declaration\nimport flattenColorPalette from \"tailwindcss/lib/util/flattenColorPalette\";\nimport type { PluginAPI } from \"tailwindcss/types/config\";\n\nconst REM_TO_PX = 16; // 1rem = 16px\n\nconst tailwindDotGridBackgrounds = plugin(function ({\n  matchUtilities,\n  theme\n}: {\n  matchUtilities: PluginAPI[\"matchUtilities\"];\n  theme: PluginAPI[\"theme\"];\n}) {\n  // Obtain the color palette from the theme\n  const colorPalette = flattenColorPalette(theme(\"backgroundColor\"));\n\n  // The border widths from Tailwind CSS will be the values used for the grid stoke widths. We also add the value \"1\" to the list of border widths (since Tailwind CSS does not include it by default).\n  const borderWidths = [\"1\", ...Object.keys(theme(\"borderWidth\"))];\n\n  // For the sizes (the size of the squares in the grid or the distance between the dots in the dotted background), we will use the numeric width values from the \"width\" theme object. We will filter out the values that are not in \"rem\" units and convert the remaining values to pixels.\n  const numericWidths: Array<[string, number]> = (\n    Object.entries(theme(\"width\")) as Array<[string, string]>\n  )\n    .filter(([, value]) => value.endsWith(\"rem\"))\n    .map(([key, value]) => [\n      key,\n      parseFloat(value.replace(\"rem\", \"\")) * REM_TO_PX\n    ]);\n\n  // Now iterate to generate all the utility classes\n  borderWidths.forEach(borderWidth => {\n    numericWidths.forEach(([widthKey, widthValue]) => {\n      matchUtilities(\n        {\n          // This key is for the square grid background\n          [`bg-grid-${widthKey}-s-${borderWidth}`]: (colorValue: string) => {\n            return {\n              backgroundImage: `linear-gradient(to right, ${colorValue} ${borderWidth}px, transparent ${borderWidth}px),linear-gradient(to bottom, ${colorValue} ${borderWidth}px, transparent ${borderWidth}px)`,\n              backgroundSize: `${widthValue}px ${widthValue}px`\n            };\n          },\n          // And this key is for the dotted background\n          [`bg-dot-${widthKey}-s-${borderWidth}`]: (colorValue: string) => {\n            return {\n              backgroundImage: `radial-gradient(${colorValue} ${borderWidth}px, transparent ${borderWidth}px)`,\n              backgroundSize: `${widthValue}px ${widthValue}px`\n            };\n          }\n        },\n        { values: colorPalette, type: \"color\" }\n      );\n    });\n  });\n});\n\nexport default tailwindDotGridBackgrounds;\n"],"names":["exports","_default","createPlugin","plugin","config","pluginFunction","configFunction","optionsFunction","options","_createPlugin","_interop_require_default","require$$0","obj","flattenColorPalette","colors","color","values","number","hex","REM_TO_PX","matchUtilities","theme","colorPalette","borderWidths","numericWidths","value","key","borderWidth","widthKey","widthValue","colorValue"],"mappings":"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","x_google_ignoreList":[0,1,2,3]}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@nauverse/tailwind-dot-grid-backgrounds",
+  "description": "🎨 A tiny Tailwind plugin to add dot and grid customizable backgrounds fast",
+  "author": {
+    "name": "Albert Adler | @albertadler",
+    "url": "https://albertadler.com"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/issues"
+  },
+  "keywords": [
+    "tailwind",
+    "tailwindcss",
+    "tailwindcss-plugin",
+    "tailwindcss-grid-background",
+    "tailwindcss-dot-background",
+    "grid-background",
+    "dot-background"
+  ],
+  "version": "1.2.0",
+  "type": "module",
+  "main": "./dist/tailwind-dot-grid-backgrounds.umd.cjs",
+  "module": "./dist/tailwind-dot-grid-backgrounds.js",
+  "types": "./dist/index.d.ts",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/tailwind-dot-grid-backgrounds.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/tailwind-dot-grid-backgrounds.umd.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint . --ext .ts --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint --fix . --ext .ts --report-unused-disable-directives --max-warnings 0",
+    "prepare": "husky"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "19.2.2",
+    "@commitlint/config-conventional": "19.2.2",
+    "@types/eslint": "8.56.9",
+    "@types/node": "20.12.7",
+    "@typescript-eslint/eslint-plugin": "7.7.0",
+    "@typescript-eslint/parser": "7.7.0",
+    "@vitest/coverage-v8": "1.5.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "husky": "9.0.11",
+    "prettier": "3.2.5",
+    "tailwindcss": "3.4.3",
+    "postcss": "8.4.38",
+    "typescript": "5.4.5",
+    "vite": "5.2.9",
+    "vite-plugin-dts": "3.8.3",
+    "vitest": "1.5.0"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3.4.0"
+  }
+}