Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add noCompatible config #13

Merged
merged 1 commit into from
Feb 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 36 additions & 7 deletions README.md
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 scrollbarhere 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 numberthe preset will use numberToUnit to generate length with number as paramsOtherwise 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
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
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
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
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
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
Loading