Merge pull request #2 from dgknca/v2

feat: read the values from `colors` and `borderWidth`

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Doğukan Çavuş
+Copyright (c) 2023 Doğukan Çavuş
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -56,22 +56,57 @@ module.exports = {
 | `bleed-none` | To remove any full-bleeding. |
 
 
-## Configuration
+## Extending the Plugin
 
-You can configure which values and variants are generated by this plugin under the `bleedBorder` and `bleedColor` keys in your `tailwind.config.js` file:
+`bleed-{color}` and `bleed-border-{borderWidth}` values are using Tailwind's `colors` and `borderWidth` configuration. If you want to extend the classes provided by this plugin, you will need to extend the `colors` (or `bleedColors`) and `borderWidth` (or `bleedBorderWidth`) utilities in your `tailwind.config.js` file.
+
+For example, to add a new color to the `bleed-{color}` utility, add the color to your `colors` configuration:
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#4f46e5'
+        }
+      }
+    }
+  },
+  // ...
+}
+```
+
+Similarly, to add a new border width to the `bleed-border` utility, add the width to your `borderWidth` configuration:
 
 ```js
-// tailwind.config.js
 module.exports = {
   theme: {
     extend: {
-      bleedBorder: {
-        // ...
-      },
-      bleedColor: {
-        // ...
+      borderWidth: {
+        10: '10px'
       }
     }
-  }
+  },
+  // ...
 }
-```
+```
+
+If you want to add colors that only apply to bleed utilities, use `bleedColors` property instead:
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      bleedColors: {
+        primary: {
+          DEFAULT: '#4f46e5' // <- only avaiable for bleed-{color} classes
+        }
+      }
+    }
+  },
+  // ...
+}
+```
+
+If the same color is avaiable in `colors`, `bleedColors` will override the color value for `bleed-{color}` classes. Use `bleedBorderWidth` property for bleed only border widths as well.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-full-bleed",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "license": "MIT",

src/index.js

@@ -1,15 +1,6 @@
 const plugin = require('tailwindcss/plugin')
-const colors = require('tailwindcss/colors')
 const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
-// const createUtilityPlugin = require('tailwindcss/lib/util/createUtilityPlugin').default
-
-// silence color deprecation warnings
-delete colors['lightBlue'];
-delete colors['warmGray'];
-delete colors['trueGray'];
-delete colors['coolGray'];
-delete colors['blueGray'];
 
 const fullBleed = plugin(
   function ({ matchUtilities, addDefaults, addUtilities, theme }) {
@@ -49,7 +40,10 @@ const fullBleed = plugin(
           return { '--tw-full-bleed-color': toColorValue(value) }
         },
       },
-      { values: flattenColorPalette(theme('bleedColor')), type: ['color'] }
+      { values: flattenColorPalette({
+        ...theme('colors'),
+        ...theme('bleedColors'),
+      }), type: ['color'] }
     )
 
     const bleedBorderUtilityVariations = [
@@ -143,11 +137,6 @@ const fullBleed = plugin(
       ]
     ]
 
-    /* TODO: the imported function from 'tailwindcss/lib/util' below is not working, so I had to move the function here and tweak a bit. if you can make it work, please create a PR
-
-      createUtilityPlugin('bleedBorder', bleedBorderUtilityVariations, {type: ['length']})
-    */
-
     const createUtilityPlugin = (themeKey, utilityVariations = [[themeKey, [themeKey]]], { filterDefault = false, ...options }  = {}) => {
       for (let utilityVariation of utilityVariations) {
         let group = Array.isArray(utilityVariation[0]) ? utilityVariation : [utilityVariation]
@@ -168,32 +157,16 @@ const fullBleed = plugin(
           }, {}),
           {
             ...options,
-            values: filterDefault
-              ? Object.fromEntries(
-                  Object.entries(theme(themeKey) ?? {}).filter(([modifier]) => modifier !== 'DEFAULT')
-                )
-              : theme(themeKey),
           }
         )
       }
     }
 
-    createUtilityPlugin('bleedBorder', bleedBorderUtilityVariations, { type: ['length'] })
-
+    createUtilityPlugin('bleedBorderWidth', bleedBorderUtilityVariations, { values: {
+      ...theme('borderWidth'),
+      ...theme('bleedBorderWidth'),
+    }, type: ['length'] })
   },
-  {
-    theme: {
-      bleedBorder: {
-        DEFAULT: '1px',
-        2: '2px',
-        4: '4px',
-        8: '8px',
-      },
-      bleedColor: {
-        ...colors
-      }
-    },
-  }
 )
 
 module.exports = fullBleed