tailwind-scrollbar - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0-preview.0

package.json

 {
   "name": "tailwind-scrollbar",
-  "version": "2.0.1",
+  "version": "2.1.0-preview.0",
   "description": "Tailwind plugin for styling scrollbars",
@@ -5,0 +5,0 @@ "author": "Graham Still <[e-mail]>",

README.md

 # Scrollbar Plugin for Tailwind CSS
 ![Tests](https://github.com/adoxography/tailwind-scrollbar/workflows/Tests/badge.svg)
 [![Codacy Badge](https://app.codacy.com/project/badge/Grade/af892fe4afc048c4860462c5fc736675)](https://www.codacy.com/gh/adoxography/tailwind-scrollbar/dashboard?utm_source=github.com&utm_medium=referral&utm_content=adoxography/tailwind-scrollbar&utm_campaign=Badge_Grade)
+![npm](https://img.shields.io/npm/dt/tailwind-scrollbar)
 
@@ -57,4 +58,34 @@ Adds styling utilities for scrollbars in Firefox and webkit-based browsers.
 
+## Complete list of utilities
+All utilities are compatible with variants, unless otherwise specified.
+
+### Width utilities
+These utilities initialize scrollbar styling. You always need one of them, even if you're using custom widths. (See below.)
+
+| Utility     | Effect | Notes |
+|-------------|--------|-------|
+| `scrollbar` | Enables custom scrollbar styling, using the default width | On Firefox, this is `scrollbar-width: auto`, which is `16px`. Chrome is hard coded to `16px` for consistency. |
+| `scrollbar-thin` | Enables custom scrollbar styling, using the thin width | On Firefox, this is `scrollbar-width: thin`, which is `8px`. Chrome is hard coded to `8px` for consistency. |
+| `scrollbar-none` | Hides the scrollbar completely | Because of browser quirks, this cannot be used to hide an existing styled scrollbar - i.e. `scrollbar hover:scrollbar-none` will not work. |
+
+### Colour utilities
+All of the asterisks can be replaced [with any tailwind colour](https://tailwindcss.com/docs/customizing-colors#using-custom-colors), including [arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) and [opacity modifiers](https://tailwindcss.com/docs/background-color#changing-the-opacity).
+
+| Utility     | Effect | Notes |
+|-------------|--------|-------|
+| `scrollbar-thumb-*` | Sets the colour of the scrollbar thumb | |
+| `scrollbar-track-*` | Sets the colour of the scrollbar track | |
+| `scrollbar-corner-*` | Sets the colour of the scrollbar corner | The corner will only appear if you have both vertical and horizontal scrollbars. |
+
+### Noncompatible utilities
+These styles are only available in `noncompatible` mode. They won't have any effect in Firefox.
+
+| Utility     | Effect | Notes |
+|-------------|--------|-------|
+|  scrollbar-w-*  | Sets the width of vertical scrollbars | The asterisk can be replaced with any Tailwind [width setting](https://tailwindcss.com/docs/width), including arbitrary values. |
+|  scrollbar-h-*  | Sets the height of horizontal scrollbars | The asterisk can be replaced with any Tailwind [height setting](https://tailwindcss.com/docs/height), including arbitrary values. |
+| `scrollbar-rounded-*` | Rounds a scrollbar thumb's corners | The asterisk can be replaced with any Tailwind [rounded setting](https://tailwindcss.com/docs/border-radius#using-custom-values), including arbitrary values. |
+
 ## License
 
 This project is licensed under the [MIT License](/LICENSE).

src/index.js

 const plugin = require('tailwindcss/plugin');
-const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette');
-const toColorValue = require('tailwindcss/lib/util/toColorValue');
-const { flagEnabled } = require('tailwindcss/lib/featureFlags');
-
 const {
-  COMPONENTS,
   BASE_STYLES,
-  SCROLLBAR_SIZE_UTILITIES
+  SCROLLBAR_SIZE_UTILITIES,
+  addColorUtilities,
+  addRoundedUtilities,
+  addSizeUtilities
 } = require('./utilities');
+const { addVariantOverrides } = require('./variants');
 
-module.exports = plugin.withOptions((options = {}) => (tailwind => {
+module.exports = plugin.withOptions((options = {}) => tailwind => {
   const areRoundedVariantsSpecified = () => {
@@ -23,80 +22,14 @@ if (tailwind.config('variants.scrollbar', []).includes('rounded')) {
 
-  const themeColors = flattenColorPalette.default(tailwind.theme('colors'));
-  const colors = Object.fromEntries(
-    Object.entries(themeColors).map(([k, v]) => [k, toColorValue.default(v)])
-  );
-
   tailwind.addBase(BASE_STYLES);
   tailwind.addUtilities(SCROLLBAR_SIZE_UTILITIES);
+  addColorUtilities(tailwind);
+  addVariantOverrides(tailwind);
 
-  COMPONENTS.forEach(component => {
-    tailwind.matchUtilities(
-      {
-        [`scrollbar-${component}`]: value => ({
-          [`--scrollbar-${component}`]: `${value} !important`
-        })
-      },
-      {
-        values: colors,
-        type: 'color'
-      }
-    );
-  });
-
   if (options.nocompatible || areRoundedVariantsSpecified()) {
-    COMPONENTS.forEach(component => {
-      tailwind.matchUtilities(
-        {
-          [`scrollbar-${component}-rounded`]: value => ({
-            [`&::-webkit-scrollbar-${component}`]: {
-              'border-radius': value
-            }
-          })
-        },
-        {
-          values: tailwind.theme('borderRadius')
-        }
-      );
-    });
+    addRoundedUtilities(tailwind);
   }
 
-  const variantOverrides = [
-    ...[
-      !flagEnabled(tailwind.config(), 'hoverOnlyWhenSupported')
-        ? {
-          variant: 'hover',
-          defaultFormat: '&:hover',
-          scrollbarFormat: '&'
-        }
-        : {
-          variant: 'hover',
-          defaultFormat: '@media (hover: hover) and (pointer: fine) { &:hover }',
-          scrollbarFormat: '@media (hover: hover) and (pointer: fine) { & }'
-        }
-    ],
-    {
-      variant: 'active',
-      defaultFormat: '&:active',
-      scrollbarFormat: '&'
-    }
-  ];
-
-  variantOverrides.forEach(({ variant, defaultFormat, scrollbarFormat }) => {
-    tailwind.addVariant(variant, ({ container }) => {
-      const suffix = `-${variant}`;
-      let found = false;
-
-      container.walkRules(rule => {
-        rule.walkDecls(/^--scrollbar-/, decl => {
-          found = true;
-          if (!decl.prop.endsWith(suffix)) {
-            /* eslint-disable-next-line no-param-reassign */
-            decl.prop += suffix;
-          }
-        });
-      });
-
-      return found ? scrollbarFormat : defaultFormat;
-    });
-  });
-}));
+  if (options.nocompatible) {
+    addSizeUtilities(tailwind);
+  }
+});

src/utilities.d.ts

@@ -10,3 +10,2 @@ /**
 };
-export const COMPONENTS: string[];
 /**
@@ -26,1 +25,21 @@ * Utilities for initializing a custom styled scrollbar, which implicitly set
 };
+/**
+ * Adds scrollbar-COMPONENT-COLOR utilities for every scrollbar component.
+ *
+ * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
+ */
+export function addColorUtilities({ matchUtilities, theme }: typedefs.TailwindPlugin): void;
+/**
+ * Adds scrollbar-COMPONENT-rounded-VALUE utilities for every scrollbar
+ * component.
+ *
+ * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
+ */
+export function addRoundedUtilities({ theme, matchUtilities }: typedefs.TailwindPlugin): void;
+/**
+ * Adds scrollbar-w-* and scrollbar-h-* utilities
+ *
+ * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
+ */
+export function addSizeUtilities({ matchUtilities, theme }: typedefs.TailwindPlugin): void;
+import typedefs = require("./typedefs");

src/utilities.js

@@ -0,1 +1,5 @@
+const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette');
+const toColorValue = require('tailwindcss/lib/util/toColorValue');
+const typedefs = require('./typedefs');
+
 const VARIANTS = ['hover', 'active'];
@@ -92,6 +96,76 @@ const COMPONENTS = ['track', 'thumb', 'corner'];
 
+/**
+ * Adds scrollbar-COMPONENT-COLOR utilities for every scrollbar component.
+ *
+ * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
+ */
+const addColorUtilities = ({ matchUtilities, theme }) => {
+  const themeColors = flattenColorPalette.default(theme('colors'));
+  const colors = Object.fromEntries(
+    Object.entries(themeColors).map(([k, v]) => [k, toColorValue.default(v)])
+  );
+
+  COMPONENTS.forEach(component => {
+    matchUtilities(
+      {
+        [`scrollbar-${component}`]: value => ({
+          [`--scrollbar-${component}`]: `${value} !important`
+        })
+      },
+      {
+        values: colors,
+        type: 'color'
+      }
+    );
+  });
+};
+
+/**
+ * Adds scrollbar-COMPONENT-rounded-VALUE utilities for every scrollbar
+ * component.
+ *
+ * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
+ */
+const addRoundedUtilities = ({ theme, matchUtilities }) => {
+  COMPONENTS.forEach(component => {
+    matchUtilities(
+      {
+        [`scrollbar-${component}-rounded`]: value => ({
+          [`&::-webkit-scrollbar-${component}`]: {
+            'border-radius': value
+          }
+        })
+      },
+      {
+        values: theme('borderRadius')
+      }
+    );
+  });
+};
+
+/**
+ * Adds scrollbar-w-* and scrollbar-h-* utilities
+ *
+ * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
+ */
+const addSizeUtilities = ({ matchUtilities, theme }) => {
+  ['width', 'height'].forEach(dimension => {
+    matchUtilities({
+      [`scrollbar-${dimension[0]}`]: value => ({
+        '&::-webkit-scrollbar': {
+          [dimension]: value
+        }
+      })
+    }, {
+      values: theme(dimension)
+    });
+  });
+};
+
 module.exports = {
   BASE_STYLES,
-  COMPONENTS,
-  SCROLLBAR_SIZE_UTILITIES
+  SCROLLBAR_SIZE_UTILITIES,
+  addColorUtilities,
+  addRoundedUtilities,
+  addSizeUtilities
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

17997

increased by70.18%

Number of package files

11

increased by57.14%

Lines of code

355

increased by74.88%

Number of lines in readme file

91

increased by51.67%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes