wrap new scrollbar utilities in feature flag

Author: RobinMalfait

packages/tailwindcss/src/feature-flags.ts

@@ -1 +1,2 @@
 export const enableContainerSizeUtility = process.env.FEATURES_ENV !== 'stable'
+export const enableScrollbarUtilities = process.env.FEATURES_ENV !== 'stable'

packages/tailwindcss/src/utilities.ts

@@ -12,7 +12,7 @@ import {
 } from './ast'
 import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidate'
 import type { DesignSystem } from './design-system'
-import { enableContainerSizeUtility } from './feature-flags'
+import { enableContainerSizeUtility, enableScrollbarUtilities } from './feature-flags'
 import type { Theme, ThemeKey } from './theme'
 import { compareBreakpoints } from './utils/compare-breakpoints'
 import { DefaultMap } from './utils/default-map'
@@ -2209,35 +2209,37 @@ export function createUtilities(theme: Theme) {
   staticUtility('scroll-auto', [['scroll-behavior', 'auto']])
   staticUtility('scroll-smooth', [['scroll-behavior', 'smooth']])
 
-  staticUtility('scrollbar-auto', [['scrollbar-width', 'auto']])
-  staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']])
-  staticUtility('scrollbar-none', [['scrollbar-width', 'none']])
+  if (enableScrollbarUtilities) {
+    staticUtility('scrollbar-auto', [['scrollbar-width', 'auto']])
+    staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']])
+    staticUtility('scrollbar-none', [['scrollbar-width', 'none']])
 
-  {
-    let scrollbarColorProperties = () => {
-      return atRoot([
-        property('--tw-scrollbar-thumb', '#0000', '<color>'),
-        property('--tw-scrollbar-track', '#0000', '<color>'),
-      ])
-    }
+    {
+      let scrollbarColorProperties = () => {
+        return atRoot([
+          property('--tw-scrollbar-thumb', '#0000', '<color>'),
+          property('--tw-scrollbar-track', '#0000', '<color>'),
+        ])
+      }
 
-    colorUtility('scrollbar-thumb', {
-      themeKeys: ['--scrollbar-thumb-color', '--color'],
-      handle: (value) => [
-        scrollbarColorProperties(),
-        decl('--tw-scrollbar-thumb', value),
-        decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'),
-      ],
-    })
+      colorUtility('scrollbar-thumb', {
+        themeKeys: ['--scrollbar-thumb-color', '--color'],
+        handle: (value) => [
+          scrollbarColorProperties(),
+          decl('--tw-scrollbar-thumb', value),
+          decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'),
+        ],
+      })
 
-    colorUtility('scrollbar-track', {
-      themeKeys: ['--scrollbar-track-color', '--color'],
-      handle: (value) => [
-        scrollbarColorProperties(),
-        decl('--tw-scrollbar-track', value),
-        decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'),
-      ],
-    })
+      colorUtility('scrollbar-track', {
+        themeKeys: ['--scrollbar-track-color', '--color'],
+        handle: (value) => [
+          scrollbarColorProperties(),
+          decl('--tw-scrollbar-track', value),
+          decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'),
+        ],
+      })
+    }
   }
 
   staticUtility('truncate', [