tailwind-scrollbar - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

package.json

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

src/utilities.js

@@ -52,2 +52,3 @@ const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette');
     '&::-webkit-scrollbar': {
+      display: 'block',
       width: 'var(--scrollbar-width, 16px)',
@@ -63,2 +64,3 @@ height: 'var(--scrollbar-height, 16px)'
     '&::-webkit-scrollbar': {
+      display: 'block',
       width: '8px',
@@ -65,0 +67,0 @@ height: '8px'

src/variants.js

@@ -12,32 +12,46 @@ const { flagEnabled } = require('tailwindcss/lib/featureFlags');
 /**
- * Generates the variants that will need overriding for scrollbar variants to
- * work as expected.
+ * The variants tailwind-scrollbar cares about. hover and focus are the real
+ * targets, but we include the others so that their relative order can be
+ * preserved.
+ */
+const variants = [
+  'hover',
+  'focus',
+  'focus-visible',
+  'active',
+  'enabled',
+  'disabled'
+];
+
+/**
+ * Gets the variant format string used by Tailwind for a variant.
  *
- * Each entry consists of the variant name, the format all non scrollbar
- * variants should take, and the format scrollbar variants should take.
+ * @param {string} variant The name of the variant
+ * @param {typedefs.TailwindPlugin.config} config - Tailwind's configuration
+ * @returns {string} The variant format string
+ */
+const getDefaultFormat = (variant, config) => {
+  if (variant === 'hover' && flagEnabled(config(), 'hoverOnlyWhenSupported')) {
+    return '@media (hover: hover) and (pointer: fine) { &:hover }';
+  }
+
+  return `&:${variant}`;
+};
+
+/**
+ * Gets the variant format string that should be used if a rule is detected to
+ * target a scrollbar
  *
- * @param {Function} config - Accesses Tailwind's configuration
- * @returns {VariantOverride[]} - The overrides
+ * @param {string} variant The name of the variant
+ * @param {typedefs.TailwindPlugin.config} config - Tailwind's configuration
+ * @returns {string} The variant format string
  */
-const generateVariantOverrides = config => [
-  ...[
-    !flagEnabled(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: '&'
+const getScrollbarFormat = (variant, config) => {
+  if (variant === 'hover' && flagEnabled(config(), 'hoverOnlyWhenSupported')) {
+    return '@media (hover: hover) and (pointer: fine) { & }';
   }
-];
 
+  return '&';
+};
+
 /**
@@ -55,5 +69,3 @@ * Modifies the way variant utilities are generated for scrollbars.
 const addVariantOverrides = ({ addVariant, config }) => {
-  const variantOverrides = generateVariantOverrides(config);
-
-  variantOverrides.forEach(({ variant, defaultFormat, scrollbarFormat }) => {
+  variants.forEach(variant => {
     addVariant(variant, ({ container }) => {
@@ -73,3 +85,7 @@ const suffix = `-${variant}`;
 
-      return found ? scrollbarFormat : defaultFormat;
+      if (found) {
+        return getScrollbarFormat(variant, config);
+      }
+
+      return getDefaultFormat(variant, config);
     });
@@ -76,0 +92,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

17549

increased by2.31%

Lines of code

342

increased by4.27%

No dependency changes