Base Presets: CSS var --p-scrollbar-width is not defined

[eneeio-nm]

Describe the bug

Since v4 release, when a Dialog is opened, .p-overflow-hidden class is expecting var(--p-scrollbar-width), however --p-scrollbar-width is not being defined. See screenshot from Chrome Devtools below:

Chrome Devtools screenshot showing CSS var is not defined

This results in the page (when a vertical scrollbar is visible) expanding to the right once the overlay appears. This degrades the UX of v4 over v3.

Note

Whilst this is being reported against v4.0.1 it was also present in v4.0.0

Reproducer

https://primevue.org/dialog/

PrimeVue version

4.0.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Go to https://primevue.org/dialog/
2. Select 'Show' button in the first example
3. Open Devtools
4. Select body node, under 'Elements' tab
5. Notice in the 'Styles' tab on the right that --p-scrollbar-width is greyed out and when mouse hovers over it a tooltip is displayed stating it is not defined

Expected behavior

Expectations are the when a Dialog (or similar component that displays a page overlay) is open, the content of the page should not expand to the right (by the width of the browser's scrollbar).

[eneeio-nm]

Probably a duplicate of #6089 ?

[murshex]

Same problem

[mertsincan]

The scrollbar-width is calculated automatically using the blockBodyScroll method in @primeuix/utils.

Fixed for next version.