@gradin/tailwindcss-scrollbar - npm Package Compare versions

Comparing version 2.1.1-beta.2 to 2.1.1-beta.3

dist/index.js

 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const plugin_1 = require("tailwindcss/plugin");
-const lodash_es_1 = require("lodash-es");
-exports.default = (0, plugin_1.withOptions)(function (options) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return function ({ addBase, theme, config, prefix }) {
-        var _a, _b, _c;
-        const getSize = () => {
-            var _a;
-            return (_a = options === null || options === void 0 ? void 0 : options.size) !== null && _a !== void 0 ? _a : theme('scrollbar.DEFAULT.size', '5px');
+const themeKey = 'scrollbar'; // theme.scrollbar
+const darkClass = 'dark';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const omit = (key, _a) => {
+    var _b = key, _ = _a[_b], obj = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+    return obj;
+};
+/**
+ * Handle plugin.withOptions and theme.scrollbar.DEFAULT
+ */
+const getDefaultStyle = (options, pluginAPI) => {
+    var _a, _b, _c;
+    const { theme, config, prefix } = pluginAPI;
+    const getSize = () => {
+        var _a;
+        return (_a = options === null || options === void 0 ? void 0 : options.size) !== null && _a !== void 0 ? _a : theme(`${themeKey}.DEFAULT.size`, '5px');
+    };
+    const getStyleTrack = () => {
+        var _a;
+        const background = '#f1f1f1'; // default
+        const fromConfig = theme(`${themeKey}.DEFAULT.track`, {}); // with tailwind.config.js
+        const fromOptions = (_a = options === null || options === void 0 ? void 0 : options.track) !== null && _a !== void 0 ? _a : {}; // with plugin options
+        const finalConfig = Object.assign(Object.assign({ background }, fromConfig), fromOptions);
+        if (!finalConfig.darkBackground) {
+            finalConfig.darkBackground = finalConfig.background;
+        }
+        return finalConfig;
+    };
+    const getStyleThumb = () => {
+        var _a;
+        const background = '#c1c1c1';
+        const fromConfig = theme(`${themeKey}.DEFAULT.thumb`, {}); // with tailwind.config.js
+        const fromOptions = (_a = options === null || options === void 0 ? void 0 : options.thumb) !== null && _a !== void 0 ? _a : {}; // with plugin options
+        const finalConfig = Object.assign(Object.assign({ background }, fromConfig), fromOptions);
+        return finalConfig;
+    };
+    const getStyleThumbHover = () => {
+        var _a;
+        const background = '#a8a8a8';
+        const fromConfig = theme(`${themeKey}.DEFAULT.hover`, {}); // with tailwind.config.js
+        const fromOptions = (_a = options === null || options === void 0 ? void 0 : options.hover) !== null && _a !== void 0 ? _a : {}; // with plugin options
+        const finalConfig = Object.assign(Object.assign({ background }, fromConfig), fromOptions);
+        return finalConfig;
+    };
+    const size = getSize();
+    const track = getStyleTrack();
+    const thumb = getStyleThumb();
+    const hover = getStyleThumbHover();
+    const styles = [
+        {
+            '::-webkit-scrollbar': {
+                width: size,
+                height: size,
+            },
+            '::-webkit-scrollbar-track': omit('darkBackground', track),
+            '::-webkit-scrollbar-thumb': omit('darkBackground', thumb),
+            '::-webkit-scrollbar-thumb:hover': omit('darkBackground', hover),
+        },
+    ];
+    const dark = {
+        '::-webkit-scrollbar-track': {
+            background: (_a = track.darkBackground) !== null && _a !== void 0 ? _a : track.background,
+        },
+        '::-webkit-scrollbar-thumb': {
+            background: (_b = thumb.darkBackground) !== null && _b !== void 0 ? _b : thumb.background,
+        },
+        '::-webkit-scrollbar-thumb:hover': {
+            background: (_c = hover.darkBackground) !== null && _c !== void 0 ? _c : hover.background,
+        },
+    };
+    const light = {
+        '::-webkit-scrollbar-track': {
+            background: track.background,
+        },
+        '::-webkit-scrollbar-thumb': {
+            background: thumb.background,
+        },
+        '::-webkit-scrollbar-thumb:hover': {
+            background: hover.background,
+        },
+    };
+    if (config('darkMode') === 'media') {
+        styles.push({
+            '@media (prefers-color-scheme: dark)': dark,
+            '@media (prefers-color-scheme: light)': light,
+        });
+    }
+    else {
+        styles.push({
+            [prefix(`.${darkClass}`)]: dark,
+        });
+    }
+    return styles;
+};
+const getCustomStyles = (pluginAPI) => {
+    const { theme, config, prefix } = pluginAPI;
+    const styles = Object.entries(theme(themeKey, {}))
+        .filter(([key]) => key !== 'DEFAULT')
+        .map(([key, val]) => {
+        const className = `.${themeKey}-${key}`;
+        const { size, track, thumb, hover } = val;
+        if (!size) {
+            throw new Error(`[@gradin/tailwindcss-scrollbar] theme.${themeKey}.${key} should have property [size].`);
+        }
+        if (!track) {
+            throw new Error(`[@gradin/tailwindcss-scrollbar] theme.${themeKey}.${key} should have property [size].`);
+        }
+        if (!thumb) {
+            throw new Error(`[@gradin/tailwindcss-scrollbar] theme.${themeKey}.${key} should have property [size].`);
+        }
+        if (!hover) {
+            throw new Error(`[@gradin/tailwindcss-scrollbar] theme.${themeKey}.${key} should have property [size].`);
+        }
+        return {
+            [`${className}::-webkit-scrollbar`]: {
+                width: size,
+                height: size,
+            },
+            [`${className}::-webkit-scrollbar-track`]: omit('darkBackground', track),
+            [`${className}::-webkit-scrollbar-thumb`]: omit('darkBackground', thumb),
+            [`${className}::-webkit-scrollbar-thumb:hover`]: omit('darkBackground', hover),
         };
-        const getStyleTrack = () => {
-            var _a;
-            const background = '#f1f1f1'; // default
-            const fromConfig = theme('scrollbar.DEFAULT.track', {}); // with tailwind.config.js
-            const fromOptions = (_a = options === null || options === void 0 ? void 0 : options.track) !== null && _a !== void 0 ? _a : {}; // with plugin options
-            const finalConfig = Object.assign(Object.assign({ background }, fromConfig), fromOptions);
-            if (!finalConfig.darkBackground) {
-                finalConfig.darkBackground = finalConfig.background;
-            }
-            return finalConfig;
-        };
-        const getStyleThumb = () => {
-            var _a;
-            const background = '#c1c1c1';
-            const fromConfig = theme('scrollbar.DEFAULT.thumb', {}); // with tailwind.config.js
-            const fromOptions = (_a = options === null || options === void 0 ? void 0 : options.thumb) !== null && _a !== void 0 ? _a : {}; // with plugin options
-            const finalConfig = Object.assign(Object.assign({ background }, fromConfig), fromOptions);
-            return finalConfig;
-        };
-        const getStyleThumbHover = () => {
-            var _a;
-            const background = '#a8a8a8';
-            const fromConfig = theme('scrollbar.DEFAULT.hover', {}); // with tailwind.config.js
-            const fromOptions = (_a = options === null || options === void 0 ? void 0 : options.hover) !== null && _a !== void 0 ? _a : {}; // with plugin options
-            const finalConfig = Object.assign(Object.assign({ background }, fromConfig), fromOptions);
-            return finalConfig;
-        };
-        const size = getSize();
-        const track = getStyleTrack();
-        const thumb = getStyleThumb();
-        const hover = getStyleThumbHover();
-        addBase([
-            {
-                '::-webkit-scrollbar': {
-                    width: size,
-                    height: size,
-                },
-                '::-webkit-scrollbar-track': (0, lodash_es_1.omit)(track, ['darkBackground']),
-                '::-webkit-scrollbar-thumb': (0, lodash_es_1.omit)(thumb, ['darkBackground']),
-                '::-webkit-scrollbar-thumb:hover': (0, lodash_es_1.omit)(hover, ['darkBackground']),
+    });
+    const dark = Object.entries(theme(themeKey, {}))
+        .filter(([key]) => key !== 'DEFAULT')
+        .map(([key, val]) => {
+        var _a, _b, _c, _d, _e, _f;
+        const className = `.${themeKey}-${key}`;
+        const value = val;
+        const track = (_a = value.track) !== null && _a !== void 0 ? _a : {};
+        const thumb = (_b = value.thumb) !== null && _b !== void 0 ? _b : {};
+        const hover = (_c = value.hover) !== null && _c !== void 0 ? _c : {};
+        return {
+            [`${className}::-webkit-scrollbar-track`]: {
+                background: (_d = track.darkBackground) !== null && _d !== void 0 ? _d : track.background,
             },
-        ]);
-        const dark = {
-            '::-webkit-scrollbar-track': {
-                background: (_a = track.darkBackground) !== null && _a !== void 0 ? _a : track.background,
+            [`${className}::-webkit-scrollbar-thumb`]: {
+                background: (_e = thumb.darkBackground) !== null && _e !== void 0 ? _e : thumb.background,
             },
-            '::-webkit-scrollbar-thumb': {
-                background: (_b = thumb.darkBackground) !== null && _b !== void 0 ? _b : thumb.background,
+            [`${className}::-webkit-scrollbar-thumb:hover`]: {
+                background: (_f = hover.darkBackground) !== null && _f !== void 0 ? _f : hover.background,
             },
-            '::-webkit-scrollbar-thumb:hover': {
-                background: (_c = hover.darkBackground) !== null && _c !== void 0 ? _c : hover.background,
-            },
         };
-        const light = {
-            '::-webkit-scrollbar-track': {
+    });
+    const light = Object.entries(theme(themeKey, {}))
+        .filter(([key]) => key !== 'DEFAULT')
+        .map(([key, val]) => {
+        var _a, _b, _c;
+        const className = `.${themeKey}-${key}`;
+        const value = val;
+        const track = (_a = value.track) !== null && _a !== void 0 ? _a : {};
+        const thumb = (_b = value.thumb) !== null && _b !== void 0 ? _b : {};
+        const hover = (_c = value.hover) !== null && _c !== void 0 ? _c : {};
+        return {
+            [`${className}::-webkit-scrollbar-track`]: {
                 background: track.background,
             },
-            '::-webkit-scrollbar-thumb': {
+            [`${className}::-webkit-scrollbar-thumb`]: {
                 background: thumb.background,
             },
-            '::-webkit-scrollbar-thumb:hover': {
+            [`${className}::-webkit-scrollbar-thumb:hover`]: {
                 background: hover.background,
             },
         };
-        if (config('darkMode') === 'media') {
-            addBase([{
-                    '@media (prefers-color-scheme: dark)': dark,
-                    '@media (prefers-color-scheme: light)': light,
-                }]);
-        }
-        else {
-            addBase([{ [prefix('.dark')]: dark }]);
-        }
-        const getStyleScrollbarNone = () => {
-            return [
-                {
-                    '.scrollbar-none': {
-                        '-ms-overflow-style': 'none',
-                        'scrollbar-width': 'none', /* Firefox */
-                    },
-                },
-                {
-                    '.scrollbar-none::-webkit-scrollbar': {
-                        'display': 'none', /* Chrome, Safari, Opera */
-                    },
-                },
-            ];
-        };
-        addBase(getStyleScrollbarNone());
+    });
+    if (config('darkMode') === 'media') {
+        styles.push({
+            '@media (prefers-color-scheme: dark)': dark,
+            '@media (prefers-color-scheme: light)': light,
+        });
+    }
+    else {
+        styles.push({
+            [prefix(`.${darkClass}`)]: dark,
+        });
+    }
+    return styles;
+};
+const scrollbarNoneStyle = [
+    {
+        [`.${themeKey}-none`]: {
+            '-ms-overflow-style': 'none',
+            'scrollbar-width': 'none', /* Firefox */
+        },
+    },
+    {
+        [`.${themeKey}-none::-webkit-scrollbar`]: {
+            'display': 'none', /* Chrome, Safari, Opera */
+        },
+    },
+];
+exports.default = (0, plugin_1.withOptions)(function (options) {
+    return function (pluginAPI) {
+        const { addBase, addUtilities } = pluginAPI;
+        addBase(getDefaultStyle(options, pluginAPI));
+        addUtilities(getCustomStyles(pluginAPI));
+        addUtilities(scrollbarNoneStyle);
     };
 });

package.json

 {
   "name": "@gradin/tailwindcss-scrollbar",
-  "version": "2.1.1-beta.2",
+  "version": "2.1.1-beta.3",
   "description": "Tailwindcss plugin to customize scrollbar.",
@@ -8,5 +8,5 @@ "main": "dist/index.js",
     "clean": "rm -fr dist",
-    "build": "npm run clean && tsc",
-    "release": "np --tag=next --branch=next --no-tests --no-release-draft",
-    "release:latest": "np"
+    "build": "tsc",
+    "release": "npm run clean && npm run build && np --tag=next --branch=next --no-tests --no-release-draft",
+    "release:latest": "npm run clean && npm run build && np"
   },
@@ -13,0 +13,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

14904

39.15%

Lines of code

213

106.8%

No dependency changes