Merge pull request #13 from unpreset/fix-new-version

fix: add noCompatible config
unocss-community · Feb 18, 2024 · 2f74a57 · 2f74a57
2 parents 5de7061 + 0efd6d5
commit 2f74a57
Show file tree

Hide file tree

Showing 9 changed files with 194 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![NPM version](https://img.shields.io/npm/v/unocss-preset-scrollbar?color=a1b858&label=)](https://www.npmjs.com/package/unocss-preset-scrollbar) ![npm](https://img.shields.io/npm/dw/unocss-preset-scrollbar)
 
-a [unocss](https://github.com/unocss/unocss) preset for scrollbar, here is a [demo](https://stackblitz.com/edit/vitejs-vite-gyun7j?file=src/components/HelloWorld.vue)
+a [unocss](https://github.com/unocss/unocss) preset for scrollbar，here is a [demo](https://stackblitz.com/edit/vitejs-vite-gyun7j?file=src/components/HelloWorld.vue)
 
 English | [简体中文](./README.zh-CN.md)
 
@@ -36,7 +36,7 @@ export default defineConfig({
 />
 ```
 
-it will generate below css:
+it will generate below css：
 
 ```css
 /* layer: shortcuts */
@@ -53,7 +53,7 @@ it will generate below css:
 .scrollbar-w-4px{--scrollbar-width:4px;}
 ```
 
-you can also use [`Attributify Mode`](https://github.com/unocss/unocss/tree/main/packages/preset-attributify):
+you can also use [`Attributify Mode`](https://github.com/unocss/unocss/tree/main/packages/preset-attributify)：
 
 ```html
 <div
@@ -99,6 +99,7 @@ export default defineConfig({
 |`numberToUnit`|``value => `${value / 4}rem` ``| number to unit
 |`varPrefix`|`''`|the css variable prefix of this preset|
 |`prefix`|`''`|Apply prefix to all utilities and shortcuts|
+|`noCompatible`|`'true'`|if `false`, it use `scrollbar-width` and `scrollbar-color`，work in Firefox, but `scrollbar-h`, `scrollbar-w` and `scrollbar-radius` will not work |
 
 
 for example
@@ -107,9 +108,9 @@ for example
 <div class="scrollbar scrollbar-w-4">
 ```
 
-if we use default options, `scrollbar-w-4` will generate `--scrollbar-width: 1rem`
+if we use default options，`scrollbar-w-4` will generate `--scrollbar-width: 1rem`
 
-if we set custom `numberToUnit`:
+if we set custom `numberToUnit`：
 
 ```ts
 export default defineConfig({
@@ -126,6 +127,30 @@ will generate `--scrollbar-width: 4px`
 
 ## Utilities
 
+### scrollbar
+
+`scrollbar-thin`
+
+```css
+.scrollbar-thin {
+  scrollbar-width: thin; // if noCompatible is true, remove this line
+  --un-scrollbar-width: 8px;
+  --un-scrollbar-height: 8px;
+}
+```
+
+`scrollbar-none`
+
+```css
+.scrollbar-none {
+  scrollbar-width: none;
+}
+
+.scrollbar-none::-webkit-scrollbar {
+  display:none;
+}
+```
+
 ### rounded
 
 `scrollbar-rounded`
@@ -150,13 +175,17 @@ set track or thumb background color
 |track-radius|set track radius|
 |thumb-radius|set thumb radius|
 
-**Attention,** if it ends with number, the preset will use numberToUnit to generate length with number as params, Otherwise it will use the captured length information directly
+**Attention，**if it ends with number，the preset will use numberToUnit to generate length with number as params，Otherwise it will use the captured length information directly
 
-for example:
+for example：
 - `scrollbar-w-4` will be `--scrollbar-width: 1rem`
 - `scrollbar-w-4px` will be `--scrollbar-width: 4px`
 - `scrollbar-w-4rem` will be `--scrollbar-width: 4rem`
 
+::: warning
+if set `noCompatible` value `false`，it not work
+:::
+
 ## other
 
 base [starter-ts](https://github.com/antfu/starter-ts)

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -2,7 +2,7 @@
 
 [![NPM version](https://img.shields.io/npm/v/unocss-preset-scrollbar?color=a1b858&label=)](https://www.npmjs.com/package/unocss-preset-scrollbar) ![npm](https://img.shields.io/npm/dw/unocss-preset-scrollbar)
 
-[`unocss`](https://github.com/unocss/unocss)的滚动预设, [一个简单的实例](https://stackblitz.com/edit/vitejs-vite-gyun7j?file=src/components/HelloWorld.vue)
+[`unocss`](https://github.com/unocss/unocss) 的滚动预设，[一个简单的实例](https://stackblitz.com/edit/vitejs-vite-gyun7j?file=src/components/HelloWorld.vue)
 
 简体中文 | [English](./README.md)
 
@@ -36,7 +36,7 @@ export default defineConfig({
 />
 ```
 
-上述代码将生成如下的css代码：
+上述代码将生成如下的 css 代码：
 
 ```css
 /* layer: shortcuts */
@@ -53,7 +53,7 @@ export default defineConfig({
 .scrollbar-w-4px{--scrollbar-width:4px;}
 ```
 
-你也可以使用[`Attributify Mode`](https://github.com/unocss/unocss/tree/main/packages/preset-attributify)：
+你也可以使用 [`Attributify Mode`](https://github.com/unocss/unocss/tree/main/packages/preset-attributify)：
 
 ```html
 <div
@@ -99,6 +99,7 @@ export default defineConfig({
 |`numberToUnit`|``value => `${value / 4}rem` ``|捕获到的数字转化成单位的方法|
 |`varPrefix`|`''`|该预设生成的`css`变量的前缀| 
 |`prefix`|`''`|该预设生成的shortcuts加上前缀|
+|`noCompatible`|`'true'`|如果为 `false` 的话 会使用 `scrollbar-width` 和 `scrollbar-color` 这两个规则，能够在Firefox上兼容, 但是`scrollbar-h`、`scrollbar-w` 以及 `scrollbar-raidus` 会失效 |
 
 
 举个例子
@@ -107,9 +108,9 @@ export default defineConfig({
 <div class="scrollbar scrollbar-w-4">
 ```
 
-如果你使用默认的配置, `scrollbar-w-4` 将会转化成 `--scrollbar-width: 1rem`
+如果你使用默认的配置，`scrollbar-w-4` 将会转化成 `--scrollbar-width: 1rem`
 
-而如果你自定义`numberToUnit`项:
+而如果你自定义 `numberToUnit` 项：
 
 ```ts
 export default defineConfig({
@@ -126,6 +127,30 @@ export default defineConfig({
 
 ## 规则
 
+### scrollbar
+
+`scrollbar-thin`
+
+```css
+.scrollbar-thin {
+  scrollbar-width: thin; // 如果 noCompatible 为 true, 则不会生成该行
+  --un-scrollbar-width: 8px;
+  --un-scrollbar-height: 8px;
+}
+```
+
+`scrollbar-none`
+
+```css
+.scrollbar-none {
+  scrollbar-width: none;
+}
+
+.scrollbar-none::-webkit-scrollbar {
+  display:none;
+}
+```
+
 ### rounded
 
 `scrollbar-rounded`
@@ -150,11 +175,11 @@ export default defineConfig({
 |track-radius|设置轨迹圆角|
 |thumb-radius|设置滑块圆角|
 
-> **注意** 如果以数字结尾，则会通过`numberToUnit`转化成带有单位的长度，反之直接生成对应的单位长度。
+> **注意**如果以数字结尾，则会通过 `numberToUnit` 转化成带有单位的长度，反之直接生成对应的单位长度。
 
-> **注意** 想要设置滚动条的圆角，必须先使用`scrollbar-rounded`
+> **注意**想要设置滚动条的圆角，必须先使用 `scrollbar-rounded`
 
-例如:
+例如：
 - `scrollbar-w-4` -> `--scrollbar-width: 1rem`
 - `scrollbar-w-4px` -> `--scrollbar-width: 4px`
 - `scrollbar-w-4rem` -> `--scrollbar-width: 4rem`

diff --git a/playground/index.html b/playground/index.html
@@ -23,7 +23,7 @@
             default scrollbar default scrollbar default scrollbar default scrollbar
           </div>
         </div>
-        <div tw-p="4" tw-w="50" un-scrollbar="~ track-color-gray-800 thumb-color-teal-700">
+        <div tw-p="4" tw-w="50" un-scrollbar="~ track-color-gray-800 thumb-color-teal-700 h-20px rounded radius-10px">
           <div tw-w="200">
             track color is gray-800 thumb color is teal-700
           </div>
@@ -33,7 +33,12 @@
             rounded scrollbar rounded scrollbar rounded scrollbar rounded scrollbar
           </div>
         </div>
-        <div tw-p="4" tw-w="50" scrollbar="~ h-4px">
+        <div tw-p="4" tw-w="50" scrollbar="~ h-4px thin">
+          <div tw-w="200">
+            scrollbar height is 4px scrollbar height is 4px scrollbar height is 4px 
+          </div>
+        </div>
+        <div tw-p="4" tw-w="50" scrollbar="~ h-4px none">
           <div tw-w="200">
             scrollbar height is 4px scrollbar height is 4px scrollbar height is 4px 
           </div>
@@ -55,12 +60,12 @@
             track color is gray-800 thumb color is teal-700
           </div>
         </div>
-        <div tw-p="4" tw-h="50" tw-flex="1" scrollbar="~ rounded">
+        <div tw-p="4" tw-h="50" tw-flex="1" scrollbar="~ rounded thin">
           <div tw-h="200">
             rounded scrollbar rounded scrollbar rounded scrollbar rounded scrollbar
           </div>
         </div>
-        <div tw-p="4" tw-h="50" tw-flex="1" scrollbar="~ w-4px">
+        <div tw-p="4" tw-h="50" tw-flex="1" scrollbar="~ w-4px none">
           <div tw-h="200">
             scrollbar width is 4px scrollbar height is 4px scrollbar width is 4px 
           </div>

diff --git a/playground/unocss.config.ts b/playground/unocss.config.ts
@@ -11,6 +11,7 @@ export default defineConfig({
     presetScrollbar({
       varPrefix: 'un',
       prefix: ['un', ''],
+      noCompatible: false,
     }),
   ],
   transformers: [

diff --git a/src/index.ts b/src/index.ts
@@ -11,6 +11,7 @@ const defaultOption: Required<PresetScrollbarDefaultOption> = {
   varPrefix: '',
   prefix: '',
   numberToUnit: value => `${value / 4}rem`,
+  noCompatible: true,
 }
 
 export interface PresetScrollbarDefaultOption {
@@ -66,6 +67,14 @@ export interface PresetScrollbarDefaultOption {
    * p-4 => padding: 4rpx
    */
   numberToUnit?: (value: number) => string
+
+  /**
+   * if false will use scrollbar-color and scrollbar-width, rounded and scrollbar-w, scrollbar-h and scrollbar-radius will not work
+   * if true, won't have any effect in Firefox
+   * 
+   * @default true
+   */
+  noCompatible?: boolean
 }
 
 const customRules = {
@@ -99,6 +108,7 @@ export function presetScrollbar(option?: PresetScrollbarDefaultOption): Preset {
         'scrollbar', [
           { overflow: 'auto' },
           'scrollbar-custom-property',
+          'scrollbar-width-auto',
           `scrollbar-color-[var(${resolveVar('thumb')})_var(${resolveVar('track')})]`,
           `scrollbar-track:scrollbar-background-color-[var(${resolveVar('track')})]`,
           `scrollbar-thumb:scrollbar-background-color-[var(${resolveVar('thumb')})]`,
@@ -112,6 +122,19 @@ export function presetScrollbar(option?: PresetScrollbarDefaultOption): Preset {
           scrollbar-thumb:scrollbar-border-radius-[var(${resolveVar('thumb-radius')})]
         `,
       ],
+      [
+        'scrollbar-thin', `
+          scrollbar-w-8px
+          scrollbar-h-8px
+          scrollbar-width-thin
+        `,
+      ],
+      [
+        'scrollbar-none', `
+          scrollbar:hidden
+          scrollbar-width-none
+        `,
+      ],
     ],
     variants: [
       // ::-webkit-scrollbar-track
@@ -134,9 +157,25 @@ export function presetScrollbar(option?: PresetScrollbarDefaultOption): Preset {
     rules: [
       [
         /^scrollbar-color-(.+)$/,
-        ([_, prop]) => ({
-          'scrollbar-color': handler.bracket.cssvar.auto.fraction.rem(prop),
-        }),
+        ([_, prop]) => {
+          if (config.noCompatible) 
+            return {}
+
+          // when use scrollbar-color, ::-webkit-scrollbar styling is disabled.
+          // https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
+          return {
+            'scrollbar-color': handler.bracket.cssvar.auto.fraction.rem(prop),
+          }
+        },
+      ],
+      [
+        /^scrollbar-width-(auto|thin|none)/,
+        ([_, prop]) => {
+          const res: Record<string, string> = {}
+          if (!config.noCompatible || prop === 'none') 
+            res['scrollbar-width'] = prop
+          return res
+        },
       ],
       [
         /^scrollbar-custom-property$/,
@@ -180,6 +219,10 @@ export function presetScrollbar(option?: PresetScrollbarDefaultOption): Preset {
         },
         { autocomplete: `scrollbar-(${Object.keys(customRules).join('|')})-<num>` },
       ],
+      [
+        'hidden',
+        { display: 'none' },
+      ],
     ],
   }
 }
diff --git a/test/__snapshots__/index-compatible.test.ts.snap b/test/__snapshots__/index-compatible.test.ts.snap
@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`scrollbar (compatible) > scrollbar-auto 1`] = `
+"/* layer: shortcuts */
+.scrollbar{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);scrollbar-width:auto;--scrollbar-track:#f5f5f5;--scrollbar-thumb:#ddd;--scrollbar-width:8px;--scrollbar-height:8px;--scrollbar-track-radius:4px;--scrollbar-thumb-radius:4px;overflow:auto;}
+.scrollbar::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-height);}
+.scrollbar::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);}
+.scrollbar::-webkit-scrollbar-track{background-color:var(--scrollbar-track);}"
+`;
+
+exports[`scrollbar (compatible) > scrollbar-none 1`] = `
+"/* layer: shortcuts */
+.scrollbar{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);scrollbar-width:auto;--scrollbar-track:#f5f5f5;--scrollbar-thumb:#ddd;--scrollbar-width:8px;--scrollbar-height:8px;--scrollbar-track-radius:4px;--scrollbar-thumb-radius:4px;overflow:auto;}
+.scrollbar-none{scrollbar-width:none;}
+.scrollbar::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-height);}
+.scrollbar::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);}
+.scrollbar::-webkit-scrollbar-track{background-color:var(--scrollbar-track);}
+.scrollbar-none::-webkit-scrollbar{display:none;}"
+`;
+
+exports[`scrollbar (compatible) > scrollbar-thin 1`] = `
+"/* layer: shortcuts */
+.scrollbar{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);scrollbar-width:auto;--scrollbar-track:#f5f5f5;--scrollbar-thumb:#ddd;--scrollbar-width:8px;--scrollbar-height:8px;--scrollbar-track-radius:4px;--scrollbar-thumb-radius:4px;overflow:auto;}
+.scrollbar-thin{scrollbar-width:thin;--scrollbar-width:8px;--scrollbar-height:8px;}
+.scrollbar::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-height);}
+.scrollbar::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);}
+.scrollbar::-webkit-scrollbar-track{background-color:var(--scrollbar-track);}"
+`;