Skip to content

Commit

Permalink
fix: add noCompatible config
Browse files Browse the repository at this point in the history
  • Loading branch information
@action-hong
action-hong committed Jan 30, 2024
1 parent 5de7061 commit 0efd6d5
Show file tree
Hide file tree
Showing 9 changed files with 194 additions and 36 deletions.
43 changes: 36 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -36,7 +36,7 @@ export default defineConfig({
/>
```

it will generate below css:
it will generate below css：

```css
/* layer: shortcuts */
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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({
Expand All @@ -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`
Expand All @@ -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)
Expand Down
41 changes: 33 additions & 8 deletions README.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -36,7 +36,7 @@ export default defineConfig({
/>
```

上述代码将生成如下的css代码：
上述代码将生成如下的 css 代码：

```css
/* layer: shortcuts */
Expand All @@ -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
Expand Down Expand Up @@ -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` 会失效 |


举个例子
Expand All @@ -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({
Expand All @@ -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`
Expand All @@ -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`
Expand Down
13 changes: 9 additions & 4 deletions playground/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions playground/unocss.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export default defineConfig({
presetScrollbar({
varPrefix: 'un',
prefix: ['un', ''],
noCompatible: false,
}),
],
transformers: [
Expand Down
49 changes: 46 additions & 3 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const defaultOption: Required<PresetScrollbarDefaultOption> = {
varPrefix: '',
prefix: '',
numberToUnit: value => `${value / 4}rem`,
noCompatible: true,
}

export interface PresetScrollbarDefaultOption {
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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')})]`,
Expand All @@ -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
Expand All @@ -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$/,
Expand Down Expand Up @@ -180,6 +219,10 @@ export function presetScrollbar(option?: PresetScrollbarDefaultOption): Preset {
},
{ autocomplete: `scrollbar-(${Object.keys(customRules).join('|')})-<num>` },
],
[
'hidden',
{ display: 'none' },
],
],
}
}
28 changes: 28 additions & 0 deletions test/__snapshots__/index-compatible.test.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -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);}"
`;
Loading

0 comments on commit 0efd6d5

Please sign in to comment.