fix: updates to where the assets live

Author: Gary Tokman

README.md

@@ -7,7 +7,9 @@
 Install the plugin from npm:
 
 ```sh
-$ npm install tailwind-corner-smoothing
+npm install tailwind-corner-smoothing --save-dev
+
+mkdir -p ./masks && cp -r ./node_modules/corner-smoothing/masks/* ./masks/
 ```
 
 # Usage

index.js

@@ -1,60 +1,39 @@
-const plugin = require('tailwindcss/plugin');
-
-module.exports = plugin(
-  function (_a) {
-    const { addUtilities } = _a;
-    const { theme } = _a;
-    const options = theme('cornerSmoothing') || {};
-    const sizes = options.sizes || {
-      sm: '25px',
-      md: '60px',
-      lg: '75px',
+var plugin = require('tailwindcss/plugin');
+module.exports = plugin(function (_a) {
+    var addUtilities = _a.addUtilities, theme = _a.theme;
+    var options = theme('cornerSmoothing') || {};
+    var sizes = options.sizes || {
+        sm: '25px',
+        md: '60px',
+        lg: '75px',
     };
-    const utilities = {};
+    var utilities = {};
     Object.entries(sizes).forEach(function (_a) {
-      const key = _a[0];
-      const size = _a[1];
-      utilities['.smooth-corners-'.concat(key)] = {
-        '@supports (mask-border-width: 50px)': {
-          'mask-border': 'url("'
-            .concat(
-              options.maskPath || './assets/masks/[email protected]',
-              '") 49% fill / '
-            )
-            .concat(size),
-          '@media (min-resolution: 2x)': {
-            'mask-border': 'url("'
-              .concat(
-                options.maskPath2x || './assets/masks/[email protected]',
-                '") 49% fill / '
-              )
-              .concat(size),
-          },
-          '@media (min-resolution: 3x)': {
-            'mask-border': 'url("'
-              .concat(
-                options.maskPath3x || './assets/masks/[email protected]',
-                '") 49% fill / '
-              )
-              .concat(size),
-          },
-        },
-      };
+        var key = _a[0], size = _a[1];
+        utilities[".smooth-corners-".concat(key)] = {
+            '@supports (mask-border-width: 50px)': {
+                'mask-border': "url(\"".concat(options.maskPath || './assets/masks/[email protected]', "\") 49% fill / ").concat(size),
+                '@media (min-resolution: 2x)': {
+                    'mask-border': "url(\"".concat(options.maskPath2x || './assets/masks/[email protected]', "\") 49% fill / ").concat(size),
+                },
+                '@media (min-resolution: 3x)': {
+                    'mask-border': "url(\"".concat(options.maskPath3x || './assets/masks/[email protected]', "\") 49% fill / ").concat(size),
+                },
+            },
+        };
     });
     addUtilities(utilities);
-  },
-  {
+}, {
     theme: {
-      cornerSmoothing: {
-        maskPath: './assets/masks/[email protected]',
-        maskPath2x: './assets/masks/[email protected]',
-        maskPath3x: './assets/masks/[email protected]',
-        sizes: {
-          sm: '25px',
-          md: '60px',
-          lg: '75px',
+        cornerSmoothing: {
+            maskPath: './assets/masks/[email protected]',
+            maskPath2x: './assets/masks/[email protected]',
+            maskPath3x: './assets/masks/[email protected]',
+            sizes: {
+                sm: '25px',
+                md: '60px',
+                lg: '75px',
+            },
         },
-      },
     },
-  }
-);
+});

index.ts

@@ -15,16 +15,16 @@ module.exports = plugin(
       utilities[`.smooth-corners-${key}`] = {
         '@supports (mask-border-width: 50px)': {
           'mask-border': `url("${
-            options.maskPath || './assets/masks/[email protected]'
+            options.maskPath || '/masks/[email protected]'
           }") 49% fill / ${size}`,
           '@media (min-resolution: 2x)': {
             'mask-border': `url("${
-              options.maskPath2x || './assets/masks/[email protected]'
+              options.maskPath2x || '/masks/[email protected]'
             }") 49% fill / ${size}`,
           },
           '@media (min-resolution: 3x)': {
             'mask-border': `url("${
-              options.maskPath3x || './assets/masks/[email protected]'
+              options.maskPath3x || '/masks/[email protected]'
             }") 49% fill / ${size}`,
           },
         },
@@ -36,9 +36,9 @@ module.exports = plugin(
   {
     theme: {
       cornerSmoothing: {
-        maskPath: './assets/masks/[email protected]',
-        maskPath2x: './assets/masks/[email protected]',
-        maskPath3x: './assets/masks/[email protected]',
+        maskPath: '/masks/[email protected]',
+        maskPath2x: '/masks/[email protected]',
+        maskPath3x: '/masks/[email protected]',
         sizes: {
           sm: '25px',
           md: '60px',

assets/masks/[email protected] renamed to masks/[email protected]

@@ -19,6 +19,6 @@ describe('Smooth Corners Plugin', () => {
       utilities['.smooth-corners-md']['@supports (mask-border-width: 50px)'][
         'mask-border'
       ]
-    ).toBe('url("./assets/masks/[email protected]") 49% fill / 60px');
+    ).toBe('url("/masks/[email protected]") 49% fill / 60px');
   });
 });