From 0efd6d54a79bf6b4a96b4dc15189cecca406be5b Mon Sep 17 00:00:00 2001 From: kkopitehong Date: Tue, 30 Jan 2024 16:44:12 +0800 Subject: [PATCH] fix: add noCompatible config --- README.md | 43 +++++++++++++--- README.zh-CN.md | 41 +++++++++++++--- playground/index.html | 13 +++-- playground/unocss.config.ts | 1 + src/index.ts | 49 +++++++++++++++++-- .../index-compatible.test.ts.snap | 28 +++++++++++ test/__snapshots__/index.test.ts.snap | 18 ++----- test/index-compatible.test.ts | 35 +++++++++++++ test/index.test.ts | 2 +- 9 files changed, 194 insertions(+), 36 deletions(-) create mode 100644 test/__snapshots__/index-compatible.test.ts.snap create mode 100644 test/index-compatible.test.ts diff --git a/README.md b/README.md index fb7196f..ea30ef0 100644 --- 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
`${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
``` -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 index 7577034..513b175 100644 --- 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
`${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({
``` -如果你使用默认的配置, `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 index aabcb83..1b8cf44 100644 --- a/playground/index.html +++ b/playground/index.html @@ -23,7 +23,7 @@ default scrollbar default scrollbar default scrollbar default scrollbar
-
+
track color is gray-800 thumb color is teal-700
@@ -33,7 +33,12 @@ rounded scrollbar rounded scrollbar rounded scrollbar rounded scrollbar
-
+
+
+ scrollbar height is 4px scrollbar height is 4px scrollbar height is 4px +
+
+
scrollbar height is 4px scrollbar height is 4px scrollbar height is 4px
@@ -55,12 +60,12 @@ track color is gray-800 thumb color is teal-700
-
+
rounded scrollbar rounded scrollbar rounded scrollbar rounded scrollbar
-
+
scrollbar width is 4px scrollbar height is 4px scrollbar width is 4px
diff --git a/playground/unocss.config.ts b/playground/unocss.config.ts index a0af90d..3e97fe7 100644 --- 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 index a12042c..ba345e8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,6 +11,7 @@ const defaultOption: Required = { 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 = {} + 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('|')})-` }, ], + [ + 'hidden', + { display: 'none' }, + ], ], } } diff --git a/test/__snapshots__/index-compatible.test.ts.snap b/test/__snapshots__/index-compatible.test.ts.snap new file mode 100644 index 0000000..833896a --- /dev/null +++ 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);}" +`; diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap index f5e76b5..0447bc7 100644 --- a/test/__snapshots__/index.test.ts.snap +++ b/test/__snapshots__/index.test.ts.snap @@ -6,17 +6,9 @@ exports[`scrollbar > custom value to unit 1`] = ` .scrollbar-w-1{--scrollbar-width:2px;}" `; -exports[`scrollbar > preset prefix 1`] = ` -"/* layer: shortcuts */ -.scrollbar{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);--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 > preset set prefix 1`] = ` "/* layer: default */ -.un-scrollbar{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);--scrollbar-track:#f5f5f5;--scrollbar-thumb:#ddd;--scrollbar-width:8px;--scrollbar-height:8px;--scrollbar-track-radius:4px;--scrollbar-thumb-radius:4px;overflow:auto;} +.un-scrollbar{--scrollbar-track:#f5f5f5;--scrollbar-thumb:#ddd;--scrollbar-width:8px;--scrollbar-height:8px;--scrollbar-track-radius:4px;--scrollbar-thumb-radius:4px;overflow:auto;} .un-scrollbar::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-height);} .un-scrollbar::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);} .un-scrollbar::-webkit-scrollbar-track{background-color:var(--scrollbar-track);}" @@ -24,7 +16,7 @@ exports[`scrollbar > preset set prefix 1`] = ` exports[`scrollbar > presetUno prefix 1`] = ` "/* layer: shortcuts */ -.scrollbar{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);--scrollbar-track:#f5f5f5;--scrollbar-thumb:#ddd;--scrollbar-width:8px;--scrollbar-height:8px;--scrollbar-track-radius:4px;--scrollbar-thumb-radius:4px;overflow:auto;} +.scrollbar{--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);}" @@ -32,7 +24,7 @@ exports[`scrollbar > presetUno prefix 1`] = ` exports[`scrollbar > scrollbar 1`] = ` "/* layer: shortcuts */ -.scrollbar{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);--scrollbar-track:#f5f5f5;--scrollbar-thumb:#ddd;--scrollbar-width:8px;--scrollbar-height:8px;--scrollbar-track-radius:4px;--scrollbar-thumb-radius:4px;overflow:auto;} +.scrollbar{--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);} @@ -55,7 +47,7 @@ exports[`scrollbar > scrollbar custom unit 1`] = ` exports[`scrollbar > should work in atributify mode 1`] = ` "/* layer: shortcuts */ -[scrollbar~=\\"\\\\~\\"]{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);--scrollbar-track:#f5f5f5;--scrollbar-thumb:#ddd;--scrollbar-width:8px;--scrollbar-height:8px;--scrollbar-track-radius:4px;--scrollbar-thumb-radius:4px;overflow:auto;} +[scrollbar~=\\"\\\\~\\"]{--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);} @@ -70,7 +62,7 @@ exports[`scrollbar > should work in atributify mode 1`] = ` exports[`scrollbar > var prefix 1`] = ` "/* layer: shortcuts */ -.scrollbar{scrollbar-color:var(--my-custom-prefix-scrollbar-thumb) var(--my-custom-prefix-scrollbar-track);--my-custom-prefix-scrollbar-track:#f5f5f5;--my-custom-prefix-scrollbar-thumb:#ddd;--my-custom-prefix-scrollbar-width:8px;--my-custom-prefix-scrollbar-height:8px;--my-custom-prefix-scrollbar-track-radius:4px;--my-custom-prefix-scrollbar-thumb-radius:4px;overflow:auto;} +.scrollbar{--my-custom-prefix-scrollbar-track:#f5f5f5;--my-custom-prefix-scrollbar-thumb:#ddd;--my-custom-prefix-scrollbar-width:8px;--my-custom-prefix-scrollbar-height:8px;--my-custom-prefix-scrollbar-track-radius:4px;--my-custom-prefix-scrollbar-thumb-radius:4px;overflow:auto;} .scrollbar::-webkit-scrollbar{width:var(--my-custom-prefix-scrollbar-width);height:var(--my-custom-prefix-scrollbar-height);} .scrollbar::-webkit-scrollbar-thumb{background-color:var(--my-custom-prefix-scrollbar-thumb);} .scrollbar::-webkit-scrollbar-track{background-color:var(--my-custom-prefix-scrollbar-track);} diff --git a/test/index-compatible.test.ts b/test/index-compatible.test.ts new file mode 100644 index 0000000..63b62e7 --- /dev/null +++ b/test/index-compatible.test.ts @@ -0,0 +1,35 @@ +import { describe, expect, it } from 'vitest' +import { createGenerator } from 'unocss' +import { presetScrollbar } from '../src' + +describe('scrollbar (compatible)', () => { + const generator = createGenerator({ + presets: [ + presetScrollbar({ + noCompatible: false, + }), + ], + }) + + it('scrollbar-auto', async () => { + const { css } = await generator.generate('scrollbar') + expect(css).toMatchSnapshot() + }) + + it('scrollbar-thin', async () => { + const { css } = await generator.generate([ + 'scrollbar', + 'scrollbar-thin', + ]) + expect(css).toMatchSnapshot() + }) + + it('scrollbar-none', async () => { + const { css } = await generator.generate([ + 'scrollbar', + 'scrollbar-none', + ]) + expect(css).toMatchSnapshot() + }) + +}) diff --git a/test/index.test.ts b/test/index.test.ts index 3d03676..a405e7e 100644 --- a/test/index.test.ts +++ b/test/index.test.ts @@ -111,7 +111,7 @@ describe('scrollbar', () => { ).toMatchInlineSnapshot(` { "sccrollbar-thumb-radius-": "", - "scrollbar-": "scrollbar-rounded scrollbar-track-color-red scrollbar-w-4px scrollbar-radius-2 scrollbar-w-1px", + "scrollbar-": "scrollbar-none scrollbar-rounded scrollbar-thin scrollbar-track-color-red scrollbar-w-4px scrollbar-radius-2 scrollbar-w-1px", "scrollbar-radius-": "scrollbar-radius-2 scrollbar-radius-0 scrollbar-radius-1 scrollbar-radius-3 scrollbar-radius-4 scrollbar-radius-5 scrollbar-radius-6 scrollbar-radius-8 scrollbar-radius-10 scrollbar-radius-12", "scrollbar-thumb-": "", "scrollbar-thumb-color-": "scrollbar-thumb-color-amber scrollbar-thumb-color-black scrollbar-thumb-color-blue scrollbar-thumb-color-bluegray scrollbar-thumb-color-blueGray scrollbar-thumb-color-coolgray scrollbar-thumb-color-coolGray scrollbar-thumb-color-current scrollbar-thumb-color-cyan scrollbar-thumb-color-dark",