tailwind-scrollbar - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

index.js

 const plugin = require('tailwindcss/plugin');
 
+const CUSTOM_VARIANTS = ['rounded'];
+
 /**
- * Generates a track style, a thumb style, and a thumb hover style for a given
- * name/color pair
- *
- * @param name  The text to use in the class name
- * @param color The color to set the element to
- *
- * @return An object containing the generated classes
+ * Base resets to make the plugin's utilities work
  */
-const generateScrollbarClasses = (key, value) => ({
-  [`.scrollbar-track-${key}`]: {
-    '--scrollbar-track': value
-  },
-
-  [`.scrollbar-thumb-${key}`]: {
-    '--scrollbar-thumb': value
-  },
-
-  [`.hover\\:scrollbar-thumb-${key}`]: {
-    '&::-webkit-scrollbar-thumb:hover': {
-      '--scrollbar-thumb': value
-    }
+const BASE_STYLES = {
+  '*': {
+    'scrollbar-color': 'initial',
+    'scrollbar-width': 'initial'
   }
-});
+};
 
@@ -32,3 +19,3 @@ /**
  */
-const scrollbarBase = {
+const SCROLLBAR_SIZE_BASE = {
   '--scrollbar-track': 'initial',
@@ -52,4 +39,73 @@ '--scrollbar-thumb': 'initial',
 
+/**
+ * Utilities for initializing a custom styled scrollbar, which implicitly set
+ * the scrollbar's size
+ */
+const SCROLLBAR_SIZE_UTILITIES = {
+  '.scrollbar': {
+    ...SCROLLBAR_SIZE_BASE,
+    'scrollbar-width': 'auto',
+
+    '&::-webkit-scrollbar': {
+      width: '16px',
+      height: '16px'
+    }
+  },
+
+  '.scrollbar-thin': {
+    ...SCROLLBAR_SIZE_BASE,
+    'scrollbar-width': 'thin',
+
+    '&::-webkit-scrollbar': {
+      width: '8px',
+      height: '8px'
+    }
+  }
+};
+
+/**
+ * Generates a track style, a thumb style, and a thumb hover style for a given
+ * name/color pair
+ *
+ * @param key   The text to use in the class name
+ * @param value The color to set the element to
+ *
+ * @return An object containing the generated utilities
+ */
+const generateScrollbarColorUtilities = (key, value) => ({
+  [`.scrollbar-track-${key}`]: {
+    '--scrollbar-track': value
+  },
+
+  [`.scrollbar-thumb-${key}`]: {
+    '--scrollbar-thumb': value
+  },
+
+  [`.hover\\:scrollbar-thumb-${key}`]: {
+    '&::-webkit-scrollbar-thumb:hover': {
+      '--scrollbar-thumb': value
+    }
+  }
+});
+
+/**
+ * Generates a rounded style for a given name/value pair
+ *
+ * @param key   The text to use in the class name
+ * @param value The CSS value to use as the border-radius
+ *
+ * @return an object containing the generated utility
+ */
+const generateScrollbarRadiusUtilities = (key, value) => ({
+  [`.scrollbar-thumb-rounded-${key}`]: {
+    '&::-webkit-scrollbar-thumb': {
+      'border-radius': value
+    }
+  }
+});
+
 module.exports = plugin(function ({ e, addUtilities, theme, addBase, variants }) {
-  const generateScrollbarColorUtilities = (colors, prefix = '') => Object.entries(colors)
+  const scrollbarVariants = variants('scrollbar', []);
+
+  const generateAllScrollbarColorUtilities = (colors, prefix = '') => Object.entries(colors)
     .reduce((memo, [key, value]) => ({
@@ -59,37 +115,27 @@ ...memo,
         typeof value === 'object'
-        ? generateScrollbarColorUtilities(value, `${e(key)}-`)
-        : generateScrollbarClasses(`${prefix}${e(key)}`, value)
+          ? generateAllScrollbarColorUtilities(value, `${e(key)}-`)
+          : generateScrollbarColorUtilities(`${prefix}${e(key)}`, value)
       )
     }), {});
 
-  addBase({
-    '*': {
-      'scrollbar-color': 'initial',
-      'scrollbar-width': 'initial'
-    }
-  });
+  const generateAllScrollbarRadiusUtilities = radii => Object.entries(radii)
+    .reduce((memo, [key, value]) => ({
+      ...memo,
+      ...generateScrollbarRadiusUtilities(e(key), value)
+    }), {});
 
-  addUtilities({
-    '.scrollbar': {
-      ...scrollbarBase,
-      'scrollbar-width': 'auto',
+  let scrollbarRadiusUtilities = {};
+  const scrollbarColorUtilities = generateAllScrollbarColorUtilities(theme('colors', {}));
 
-      '&::-webkit-scrollbar': {
-        width: '16px',
-        height: '16px'
-      }
-    },
+  if (scrollbarVariants.includes('rounded')) {
+    scrollbarRadiusUtilities = generateAllScrollbarRadiusUtilities(theme('borderRadius', {}));
+  }
 
-    '.scrollbar-thin': {
-      ...scrollbarBase,
-      'scrollbar-width': 'thin',
+  addBase(BASE_STYLES);
 
-      '&::-webkit-scrollbar': {
-        width: '8px',
-        height: '8px'
-      }
-    },
-
-    ...generateScrollbarColorUtilities(theme('colors', {}))
-  }, variants('scrollbar'));
+  addUtilities({
+    ...SCROLLBAR_SIZE_UTILITIES,
+    ...scrollbarRadiusUtilities,
+    ...scrollbarColorUtilities
+  }, [scrollbarVariants.filter(variant => !CUSTOM_VARIANTS.includes(variant))]);
 });

package.json

 {
   "name": "tailwind-scrollbar",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Tailwind plugin for styling scrollbars",
-  "author": "Graham Still <[e-mail]>",
+  "author": "Graham Still <[e-mail]>",
   "main": "index.js",
@@ -11,5 +11,12 @@ "repository": "https://github.com/adoxography/tailwind-scrollbar",
   "private": false,
+  "scripts": {
+    "test": "jest"
+  },
   "devDependencies": {
-    "tailwindcss": "^1.7.6"
+    "jest": "^26.6.3",
+    "lodash": "^4.17.20",
+    "postcss": "^8.2.4",
+    "snapshot-diff": "^0.8.1",
+    "tailwindcss": "^2.0.0"
   }
 }

README.md

@@ -17,3 +17,3 @@ # Scrollbar Plugin for Tailwind CSS
 
-```
+```js
 plugins: [
@@ -27,9 +27,21 @@ // ...
 
-For every element that you want to style, add either the `.scrollbar` or `.scrollbar-thin` class. You may then add any `scrollbar-track-{color}`, `scrollbar-thumb-{color}` or `hover:scrollbar-thumb-{color}` classes you like. (Note that `hover:scrollbar-thumb-{color}` classes only have effects in webkit-based browsers.
+**NB:** This plugin *styles* scrollbars; it does not force them to appear. Use typical CSS techniques to force content to overflow and trigger a scrollbar.
 
+For every element that you want to style, add either the `.scrollbar` or `.scrollbar-thin` class. You may then add any `scrollbar-track-{color}`, `scrollbar-thumb-{color}` or `hover:scrollbar-thumb-{color}` classes you like. (Note that `hover:scrollbar-thumb-{color}` classes only have effects in webkit-based browsers.)
+
+Here's a minimal example (keeping in mind that the `h-32` and `h-64` classes are just there to force the scrollbar to appear):
+
+```html
+<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
+    <div class="h-64"></div>
+</div>
+```
+
+A live version of this demo [can be found here](https://tailwind-scrollbar-example.adoxography.repl.co/).
+
 ## Configuration
 
-If you'd like to add varients for the scrollbar utilities (e.g. [dark mode](https://tailwindcss.com/docs/dark-mode)), add them to the `variants` object in your Tailwind config:
+If you'd like to add variants for the scrollbar utilities (e.g. [dark mode](https://tailwindcss.com/docs/dark-mode)), add them to the `variants` object in your Tailwind config:
 
-```
+```js
 variants: {
@@ -41,4 +53,6 @@ // ...
 
+This plugin also capable of adding utilties for creating rounded scrollbars (by referencing your configured [border radius](https://tailwindcss.com/docs/border-radius#customizing) settings). However, as they are only supported in Webkit-based browsers, their usage is inadvisable in cross-browser applications. To enable rounded scrollbar utilities, add `'rounded'` to the list of scrollbar variants in your config file. This will add utilities such as `scrollbar-thumb-rounded-md`.
+
 ## License
 
 This project is licensed under the [MIT License](/LICENSE).

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

98307755

increased by3189.02%

Number of package files

6

increased by20%

Lines of code

318

increased by307.69%

Number of lines in readme file

56

increased by33.33%

Worsened metrics

Dev dependency count

5

increased by400%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes