feat(svelte-scoped): handle clsx like classes (#4758)

Author: fehnomenal

docs/integrations/svelte-scoped.md

@@ -42,14 +42,15 @@ A regular UnoCSS/Tailwind CSS setup places utility styles in a global CSS file w
 
 Because Svelte Scoped rewrites your utility class names, you are limited in where you can write them:
 
-| Supported Syntax          | Example                          |
-| ------------------------- | -------------------------------- |
-| Class attribute           | `<div class="mb-1" />`           |
-| Class directive           | `<div class:mb-1={condition} />` |
-| Class directive shorthand | `<div class:logo />`             |
-| Class prop                | `<Button class="mb-1" />`        |
-
-Svelte Scoped is designed to be a drop-in replacement for a project that uses utility styles. As such, expressions found within class attributes are also supported (e.g. `<div class="mb-1 {foo ? 'mr-1' : 'mr-2'}" />`) but we recommend you use the class directive syntax moving forward. Note also that if you've used class names in other ways like placing them in a `<script>` block or using attributify mode then you'll need to take additional steps before using Svelte Scoped. You can utilize the `safelist` option and also check the [presets](#presets-support) section below for more tips.
+| Supported Syntax          | Example                                                                                     |
+| ------------------------- | ------------------------------------------------------------------------------------------- |
+| Class attribute           | `<div class="mb-1" />`                                                                      |
+| Class directive           | `<div class:mb-1={condition} />`                                                            |
+| Class directive shorthand | `<div class:logo />`                                                                        |
+| Class prop                | `<Button class="mb-1" />`                                                                   |
+| `clsx` like               | `<div class={["mb-1", { logo, 'font-bold': isBold() }, isUnderlined() && 'underline' ]} />` |
+
+Svelte Scoped is designed to be a drop-in replacement for a project that uses utility styles. As such, expressions found within class attributes are also supported (e.g. `<div class="mb-1 {foo ? 'mr-1' : 'mr-2'}" />`) but we recommend you use the `clsx` syntax moving forward. Note also that if you've used class names in other ways like placing them in a `<script>` block or using attributify mode then you'll need to take additional steps before using Svelte Scoped. You can utilize the `safelist` option and also check the [presets](#presets-support) section below for more tips.
 
 ### Context aware
 

examples/sveltekit-scoped/src/lib/ClsxDemo.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Button from './Button.svelte';
+
+  let underline = $state(false);
+  let bold = $state(false);
+  let italic = $state(false);
+  let red = $state(false);
+</script>
+
+<p class={['p-3', { underline, 'font-bold': bold }, italic && 'italic']} class:c-red={red}>
+  Demo text using clsx classes and <code>`class:`</code> directive
+</p>
+
+<Button onclick={() => (underline = !underline)}>toggle underline</Button>
+<Button onclick={() => (bold = !bold)}>toggle bold</Button>
+<Button onclick={() => (italic = !italic)}>toggle italic</Button>
+<Button onclick={() => (red = !red)}>toggle red</Button>

examples/sveltekit-scoped/src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Button from "$lib/Button.svelte";
+  import ClsxDemo from "$lib/ClsxDemo.svelte";
   import Counter from "$lib/Counter.svelte";
   import Forms from "$lib/Forms.svelte";
   import Logos from "./Logos.svelte";
@@ -45,10 +46,14 @@
 
   <Counter />
 
-  <div class="my-5 border" />
+  <div class="my-5 border"></div>
 
   <Forms />
 
+  <div class="my-5 border"></div>
+
+  <ClsxDemo />
+
   <div class="corner">Fixed</div>
 </div>
 

packages-integrations/svelte-scoped/package.json

@@ -60,8 +60,10 @@
     "@unocss/config": "workspace:*",
     "@unocss/preset-uno": "workspace:*",
     "@unocss/reset": "workspace:*",
+    "acorn": "catalog:",
     "css-tree": "catalog:",
-    "magic-string": "catalog:"
+    "magic-string": "catalog:",
+    "zimmerframe": "catalog:"
   },
   "devDependencies": {
     "prettier-plugin-svelte": "catalog:",

packages-integrations/svelte-scoped/src/_preprocess/transformClasses/findClasses.test.ts

@@ -72,4 +72,141 @@ describe(findClasses, () => {
     ]
     expect(result).toEqual(expected)
   })
+
+  it('finds clsx like classes (singleton array)', () => {
+    const code = '<span class={["abc"]} />'
+    const result = findClasses(code)
+    const expected: FoundClass[] = [
+      {
+        body: 'abc',
+        start: 15,
+        end: 18,
+        type: 'regular',
+      },
+    ]
+    expect(result).toEqual(expected)
+  })
+
+  it('finds clsx like classes (simple array)', () => {
+    // eslint-disable-next-line no-template-curly-in-string
+    const code = '<span class={["abc def", `ghi`, `button-${dynamic}`]} />'
+    const result = findClasses(code)
+    const expected: FoundClass[] = [
+      {
+        body: 'abc def',
+        start: 15,
+        end: 22,
+        type: 'regular',
+      },
+      {
+        body: 'ghi',
+        start: 26,
+        end: 29,
+        type: 'regular',
+      },
+    ]
+    expect(result).toEqual(expected)
+  })
+
+  it('finds clsx like classes (conditional array)', () => {
+    const code = '<span class={["abc def", true && `ghi`, false ? \'jkl\' : "mno"]} />'
+    const result = findClasses(code)
+    const expected: FoundClass[] = [
+      {
+        body: 'abc def',
+        start: 15,
+        end: 22,
+        type: 'regular',
+      },
+      {
+        body: 'ghi',
+        start: 34,
+        end: 37,
+        type: 'regular',
+      },
+      {
+        body: 'jkl',
+        start: 49,
+        end: 52,
+        type: 'regular',
+      },
+      {
+        body: 'mno',
+        start: 57,
+        end: 60,
+        type: 'regular',
+      },
+    ]
+    expect(result).toEqual(expected)
+  })
+
+  it('finds clsx like classes (object)', () => {
+    const code = '<span class={{ "abc def": true, "ghi": !bool, show }} />'
+    const result = findClasses(code)
+    const expected: FoundClass[] = [
+      {
+        body: 'abc def',
+        start: 15,
+        end: 24,
+        type: 'clsxObject',
+      },
+      {
+        body: 'ghi',
+        start: 32,
+        end: 37,
+        type: 'clsxObject',
+      },
+      {
+        body: 'show',
+        start: 46,
+        end: 50,
+        type: 'clsxObjectShorthand',
+      },
+    ]
+    expect(result).toEqual(expected)
+  })
+
+  it('finds clsx like classes (complex array)', () => {
+    const code = '<span class={[{ "abc def": true, "ghi": !bool, show }, "jkl", ["mno"], { pqr: 0 }]} />'
+    const result = findClasses(code)
+    const expected: FoundClass[] = [
+      {
+        body: 'abc def',
+        start: 16,
+        end: 25,
+        type: 'clsxObject',
+      },
+      {
+        body: 'ghi',
+        start: 33,
+        end: 38,
+        type: 'clsxObject',
+      },
+      {
+        body: 'show',
+        start: 47,
+        end: 51,
+        type: 'clsxObjectShorthand',
+      },
+      {
+        body: 'jkl',
+        start: 56,
+        end: 59,
+        type: 'regular',
+      },
+      {
+        body: 'mno',
+        start: 64,
+        end: 67,
+        type: 'regular',
+      },
+      {
+        body: 'pqr',
+        start: 73,
+        end: 76,
+        type: 'clsxObject',
+      },
+    ]
+    expect(result).toEqual(expected)
+  })
 })

packages-integrations/svelte-scoped/src/_preprocess/transformClasses/findClasses.ts

@@ -1,30 +1,36 @@
+import * as acorn from 'acorn'
+import { walk } from 'zimmerframe'
+
 export interface FoundClass {
   body: string
   start: number
   end: number
   type: ClassForms
 }
 
-type ClassForms = 'regular' | 'directive' | 'directiveShorthand'
+type ClassForms = 'regular' | 'directive' | 'directiveShorthand' | 'clsxObject' | 'clsxObjectShorthand'
 
 const classesRE = /class=(["'`])([\s\S]*?)\1/g // class="mb-1"
 const classDirectivesRE = /class:(\S+?)="?\{/g // class:mb-1={foo} and class:mb-1="{foo}"
 const classDirectivesShorthandRE = /class:([^=>\s/]+)[{>\s/]/g // class:logo (compiled to class:uno-1hashz={logo})
+const classClsxRE = /(?<prefix>class=\{\w*)[[{(]/g // class={[...]}, class={{...}} and class={clsx(...)} (in fact any function call)
 
 export function findClasses(code: string) {
   const matchedClasses = [...code.matchAll(classesRE)]
   const matchedClassDirectives = [...code.matchAll(classDirectivesRE)]
   const matchedClassDirectivesShorthand = [...code.matchAll(classDirectivesShorthandRE)]
+  const matchedClassClsx = [...code.matchAll(classClsxRE)]
 
   const classes = parseMatches(matchedClasses, 'regular', 'class="'.length)
   const classDirectives = parseMatches(matchedClassDirectives, 'directive', 'class:'.length)
   const classDirectivesShorthand = parseMatches(matchedClassDirectivesShorthand, 'directiveShorthand', 'class:'.length)
+  const classClsx = parseMatchesWithAcorn(matchedClassClsx, code)
 
-  return [...classes, ...classDirectives, ...classDirectivesShorthand]
+  return [...classes, ...classDirectives, ...classDirectivesShorthand, ...classClsx]
 }
 
 function parseMatches(matches: RegExpMatchArray[], type: ClassForms, prefixLength: number) {
-  return matches.map((match) => {
+  return matches.map((match): FoundClass => {
     const body = match[type === 'regular' ? 2 : 1]
     const start = match.index! + prefixLength
     return {
@@ -39,3 +45,85 @@ function parseMatches(matches: RegExpMatchArray[], type: ClassForms, prefixLengt
 function hasBody(foundClass: FoundClass) {
   return foundClass.body
 }
+
+function parseMatchesWithAcorn(matches: RegExpMatchArray[], code: string) {
+  return matches.flatMap((match): FoundClass[] => {
+    const start = match.index! + match.groups!.prefix.length
+
+    const ast = acorn.parseExpressionAt(code, start, {
+      sourceType: 'module',
+      ecmaVersion: 16,
+      locations: true,
+    })
+
+    const classes: FoundClass[] = []
+
+    function fromProperty(body: string, node: acorn.AnyNode, property: acorn.Property | acorn.AssignmentProperty): FoundClass {
+      return {
+        body,
+        start: node.start,
+        end: node.end,
+        type: property.shorthand ? 'clsxObjectShorthand' : 'clsxObject',
+      }
+    }
+
+    function fromString(body: string, node: acorn.AnyNode): FoundClass {
+      return {
+        body,
+        start: node.start + 1,
+        end: node.end - 1,
+        type: 'regular',
+      }
+    }
+
+    walk(
+      ast as acorn.AnyNode,
+      { property: undefined as acorn.Property | acorn.AssignmentProperty | undefined },
+      {
+        Property(node, { visit }) {
+          visit(node.key, { property: node })
+        },
+
+        Identifier(node, { state, next }) {
+          if (state.property) {
+            classes.push(fromProperty(node.name, node, state.property))
+          }
+
+          next()
+        },
+
+        Literal(node, { state, next }) {
+          if (typeof node.value === 'string') {
+            const body = node.value
+
+            if (state.property) {
+              classes.push(fromProperty(body, node, state.property))
+            }
+            else {
+              classes.push(fromString(body, node))
+            }
+          }
+
+          next()
+        },
+
+        TemplateLiteral(node, { state, next }) {
+          if (node.expressions.length === 0 && node.quasis.length === 1) {
+            const body = node.quasis[0].value.raw
+
+            if (state.property) {
+              classes.push(fromProperty(body, node, state.property))
+            }
+            else {
+              classes.push(fromString(body, node))
+            }
+          }
+
+          next()
+        },
+      },
+    )
+
+    return classes
+  }).filter(hasBody)
+}

packages-integrations/svelte-scoped/src/_preprocess/transformClasses/processClasses.ts

@@ -2,6 +2,7 @@ import type { UnoGenerator } from '@unocss/core'
 import type { TransformClassesOptions } from '../types'
 import type { FoundClass } from './findClasses'
 import { processClassBody } from './processClassBody'
+import { processClsx } from './processClsx.js'
 import { processDirective } from './processDirective'
 
 export interface ProcessResult {
@@ -28,25 +29,26 @@ export async function processClasses(classes: FoundClass[], options: TransformCl
   }
 
   for (const foundClass of classes) {
-    if (foundClass.type === 'regular') {
-      const { rulesToGenerate, codeUpdate } = await processClassBody(foundClass, options, uno, filename)
+    const { rulesToGenerate, codeUpdate } = await processClass(foundClass, options, uno, filename)
 
-      if (rulesToGenerate)
-        Object.assign(result.rulesToGenerate, rulesToGenerate)
+    if (rulesToGenerate)
+      Object.assign(result.rulesToGenerate, rulesToGenerate)
 
-      if (codeUpdate)
-        result.codeUpdates.push(codeUpdate)
-    }
-    else {
-      const { rulesToGenerate, codeUpdate } = await processDirective(foundClass, options, uno, filename) || {}
+    if (codeUpdate)
+      result.codeUpdates.push(codeUpdate)
+  }
+
+  return result
+}
 
-      if (rulesToGenerate)
-        Object.assign(result.rulesToGenerate, rulesToGenerate)
+async function processClass(foundClass: FoundClass, options: TransformClassesOptions, uno: UnoGenerator, filename: string): Promise<Partial<ProcessResult>> {
+  if (foundClass.type === 'regular') {
+    return await processClassBody(foundClass, options, uno, filename)
+  }
 
-      if (codeUpdate)
-        result.codeUpdates.push(codeUpdate)
-    }
+  if (foundClass.type === 'clsxObject' || foundClass.type === 'clsxObjectShorthand') {
+    return await processClsx(foundClass, options, uno, filename) ?? {}
   }
 
-  return result
+  return await processDirective(foundClass, options, uno, filename) ?? {}
 }