feat(svelte-scoped): add hashSafelistClasses boolean, by default do not hash safelisted classes (#5157)

henrikvilhelmberglund · web-flow · commit e5f894689885 · 2026-04-07T07:50:37.000Z
diff --git a/packages-integrations/svelte-scoped/src/_preprocess/transformClasses/index.test.ts b/packages-integrations/svelte-scoped/src/_preprocess/transformClasses/index.test.ts
@@ -28,8 +28,8 @@ describe('transform', async () => {
     safelist: [safelistClassToSkip],
   })
 
-  async function transform(content: string, { combine = true, format = true } = {}) {
-    const transformed = (await transformClasses({ content, filename: 'Foo.svelte', uno, options: { combine } }))?.code
+  async function transform(content: string, { combine = true, format = true, hashSafelistClasses }: { combine?: boolean, format?: boolean, hashSafelistClasses?: boolean } = {}) {
+    const transformed = (await transformClasses({ content, filename: 'Foo.svelte', uno, options: { combine, hashSafelistClasses } }))?.code
     if (transformed && format) {
       return prettier(transformed, {
         parser: 'svelte',
@@ -403,3 +403,56 @@ describe('transform', async () => {
     `)
   })
 })
+
+describe('safelist shortcut handling', async () => {
+  const uno = await createGenerator({
+    presets: [presetWind3()],
+    shortcuts: [
+      { btn: 'px-4 py-2 font-bold' },
+    ],
+    safelist: ['btn', 'mr-7'],
+  })
+
+  async function transform(content: string, { combine = true, hashSafelistClasses }: { combine?: boolean, hashSafelistClasses?: boolean } = {}) {
+    const result = await transformClasses({ content, filename: 'Foo.svelte', uno, options: { combine, hashSafelistClasses } })
+    return result?.code
+  }
+
+  it('does not hash shortcut classes in safelist by default', async () => {
+    const code = '<div class="btn mb-1" />'
+    const output = await transform(code)
+    // btn is passed through as-is, only mb-1 gets hashed
+    expect(output).toContain('btn')
+    expect(output).toMatch(/class="[^ ]+ btn"/)
+  })
+
+  it('does not hash utility classes in safelist by default', async () => {
+    const code = '<div class="bg-red-500 mr-7" />'
+    const output = await transform(code)
+    expect(output).toContain('mr-7')
+  })
+
+  it('does not hash shortcut classes in safelist in dev mode (combine: false)', async () => {
+    const code = '<div class="btn mb-1" />'
+    const output = await transform(code, { combine: false })
+    // btn is passed through as-is, mb-1 gets its own hashed class
+    expect(output).toContain('btn')
+    expect(output).toMatch(/_mb-1_\w+/)
+    expect(output).not.toMatch(/_btn_\w+/)
+  })
+
+  it('hashes shortcut classes in safelist when hashSafelistClasses is true', async () => {
+    const code = '<div class="btn mb-1" />'
+    const output = await transform(code, { hashSafelistClasses: true })
+    // btn should be hashed along with mb-1
+    expect(output).not.toMatch(/\bbtn\b/)
+  })
+
+  it('hashes shortcut classes in safelist in dev mode when hashSafelistClasses is true', async () => {
+    const code = '<div class="btn mb-1" />'
+    const output = await transform(code, { combine: false, hashSafelistClasses: true })
+    // btn should get its own hashed class
+    expect(output).toMatch(/_btn_\w+/)
+    expect(output).not.toMatch(/\bbtn\b/)
+  })
+})
diff --git a/packages-integrations/svelte-scoped/src/_preprocess/transformClasses/sortClassesIntoCategories.ts b/packages-integrations/svelte-scoped/src/_preprocess/transformClasses/sortClassesIntoCategories.ts
@@ -11,7 +11,7 @@ export async function sortClassesIntoCategories(
   uno: UnoGenerator<object>,
   filename: string,
 ) {
-  const { combine = true } = options
+  const { combine = true, hashSafelistClasses = false } = options
 
   const rulesToGenerate: ProcessResult['rulesToGenerate'] = {}
   const ignore: string[] = []
@@ -20,6 +20,11 @@ export async function sortClassesIntoCategories(
   const knownClassesToCombine: string[] = []
 
   for (const token of classes) {
+    if (!hashSafelistClasses && uno.config.safelist.includes(token)) {
+      ignore.push(token)
+      continue
+    }
+
     const isShortcutOrUtility = isShortcut(token, uno.config.shortcuts) || await needsGenerated(token, uno)
 
     if (!isShortcutOrUtility) {
diff --git a/packages-integrations/svelte-scoped/src/_preprocess/types.d.ts b/packages-integrations/svelte-scoped/src/_preprocess/types.d.ts
@@ -24,6 +24,13 @@ export interface TransformClassesOptions {
    * Used to generate hash for compiled class names
    */
   hashFn?: (str: string) => string
+  /**
+   * Hash safelist classes (including shortcuts in the safelist) instead of passing them through as-is.
+   * When false (default), safelist classes are left unhashed so they match the globally generated safelist CSS.
+   * Set to true to restore the legacy behavior where shortcut classes in the safelist were still hashed.
+   * @default false
+   */
+  hashSafelistClasses?: boolean
 }
 
 export interface TransformApplyOptions {
