Initial commit

.gitignore

@@ -0,0 +1,21 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 locksten
+
+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.

README.md

@@ -0,0 +1,57 @@
+# Tailwind CSS Pulgin for Matching Border Radii
+
+<p align="center">
+  <img src="./image.png" width="525" height="350"/>
+</p>
+
+## Installation
+
+```bash
+npm install tailwindcss-padded-radius
+```
+
+## Setup
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      paddedRadius: {
+        /* The number of spacings to generate */
+        // numberOfSpacings: 64,
+
+        /* The spacing that the other spacings are multiples of */
+        // baseSpacing: "0.25rem",
+
+        /* A spacigns object to use in place of numberOfSpacings and baseSpacing */
+        // spacings: { '1': '0.25rem', '2': '0.5rem', '3': '0.75rem' }
+
+        /* Whether negative versions should be generated */
+        // generateNegative: false,
+      },
+    },
+  },
+  plugins: [require("tailwindcss-padded-radius")],
+  variants: {
+    borderRadius: ["responsive", "paddedRadius"],
+  },
+};
+```
+
+## Usage
+
+For nested border radii to match,
+the outer radius must be equal to
+the inner radius plus the distance between them.
+This plugin adds variants to borderRadius utilties
+that let you easily tweak border radii
+using the same scale that is used for padding and margin.
+So if the inner div has `rounded-md` and `m-2` and the outer div has `p-3`,
+the outer radius should be `rounded-md-5`.
+
+```html
+<div class="rounded-md-5 p-3  bg-gray-700">
+  <div class="rounded-md m-2  w-32 h-32 bg-gray-200"></div>
+</div>
+```

index.js

@@ -0,0 +1,49 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(
+  function ({ e, theme, addVariant }) {
+    const {
+      numberOfSpacings,
+      baseSpacing,
+      generateNegative,
+      spacings: configSpacings,
+    } = theme("paddedRadius");
+
+    const spacings =
+      configSpacings ??
+      [...Array(numberOfSpacings).keys()].reduce((obj, spacing, idx) => {
+        obj[idx + 1] = `${spacing + 1} * ${baseSpacing}`;
+        return obj;
+      }, {});
+
+    const generate = (container, rule, name, spacing, negative) => {
+      const newRule = rule.clone();
+      newRule.selector = `.${e(
+        `${rule.selector.slice(1)}-${negative ? "-" : ""}${name}`
+      )}`;
+      newRule.walkDecls((decl) => {
+        decl.value = `calc(${decl.value} ${negative ? "-" : "+"} ${spacing})`;
+      });
+      container.prepend(newRule);
+    };
+
+    addVariant("paddedRadius", ({ container }) => {
+      container.walkRules((rule) => {
+        Object.entries(spacings).map(([name, spacing]) => {
+          generate(container, rule, name, spacing, false);
+          generateNegative && generate(container, rule, name, spacing, true);
+        });
+      });
+    });
+  },
+  {
+    theme: {
+      paddedRadius: (theme) => ({
+        baseSpacing: theme("spacing")["1"],
+        numberOfSpacings: 64,
+        spacings: undefined,
+        generateNegative: false,
+      }),
+    },
+  }
+);