tailwind-scrollbar-utilities/dist/index.js

Tailwind plugin for scrollbar class utilities

function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };
  return _extends.apply(this, arguments);
}

function scrollbarGutter() {
  return function ({
    addUtilities,
    addBase
  }) {
    addBase({
      '@defaults scrollbar-gutter': {
        '--tw-scrollbar-gutter-modifier': ''
      }
    });
    addUtilities([{
      '.scrollbar-gutter-auto': {
        'scrollbar-gutter': 'auto'
      },
      '.scrollbar-stable': {
        '@defaults scrollbar-gutter': {},
        'scrollbar-gutter': 'stable var(--tw-scrollbar-gutter-modifier)'
      },
      '.scrollbar-both-edges': {
        '--tw-scrollbar-gutter-modifier': 'both-edges'
      }
    }]);
  };
}
function scrollbarWidth() {
  return function ({
    addUtilities
  }) {
    addUtilities([{
      '.scrollbar-width-auto': {
        'scrollbar-width': 'auto'
      },
      '.scrollbar-none': {
        'scrollbar-width': 'none',
        '&::-webkit-scrollbar': {
          'display': 'none'
        }
      },
      '.scrollbar-thin': {
        'scrollbar-width': 'thin'
      }
    }]);
  };
}
function scrollbarColor() {
  return function ({
    addUtilities,
    addBase,
    theme,
    matchUtilities,
    e
  }) {
    const themeColors = theme('colors');
    addUtilities([{
      '.scrollbar-color-auto': {
        'scrollbar-color': 'auto'
      },
      '.scrollbar-color': {
        '@defaults scrollbar-color': {},
        'scrollbar-color': 'var(--tw-scrollbar-thumb-color) var(--tw-scrollbar-track-color)'
      }
    }]);
    addBase({
      '@defaults scrollbar-color': {
        '--tw-scrollbar-thumb-color': '',
        '--tw-scrollbar-track-color': ''
      }
    });
    const scrollbarColors = Object.keys(themeColors).reduce((acc, key) => {
      if (typeof themeColors[key] === 'string') {
        return _extends({}, acc, {
          [`.scrollbar-thumb-${e(key)}`]: {
            '--tw-scrollbar-thumb-color': themeColors[key]
          },
          [`.scrollbar-track-${e(key)}`]: {
            '--tw-scrollbar-track-color': themeColors[key]
          }
        });
      }
      if (typeof themeColors[key] === 'function') {
        return _extends({}, acc, {
          [`.scrollbar-thumb-${e(key)}`]: {
            '--tw-scrollbar-thumb-color': themeColors[key]({})
          },
          [`.scrollbar-track-${e(key)}`]: {
            '--tw-scrollbar-track-color': themeColors[key]({})
          }
        });
      }
      const colorShades = Object.keys(themeColors[key]);
      return _extends({}, acc, colorShades.reduce((a, shade) => _extends({}, a, {
        [`.scrollbar-thumb-${e(key)}-${shade}`]: {
          '--tw-scrollbar-thumb-color': themeColors[key][shade]
        },
        [`.scrollbar-track-${e(key)}-${shade}`]: {
          '--tw-scrollbar-track-color': themeColors[key][shade]
        }
      }), {}));
    }, {});
    addUtilities(scrollbarColors);
    matchUtilities({
      'scrollbar-thumb': value => ({
        '--tw-scrollbar-thumb-color': value
      }),
      'scrollbar-track': value => ({
        '--tw-scrollbar-track-color': value
      })
    });
  };
}

export { scrollbarColor, scrollbarGutter, scrollbarWidth };