feat(directives): allow escape char in class name (#1151)

unocss · Jun 24, 2022 · 9fba115 · 9fba115
1 parent b11f2cb
commit 9fba115
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/packages/transformer-directives/src/index.ts b/packages/transformer-directives/src/index.ts
@@ -83,7 +83,10 @@ export async function transformDirectives(
     if (!body)
       return
 
-    const classNames = expandVariantGroup(body).split(/\s+/g)
+    const classNames = expandVariantGroup(body)
+      .split(/\s+/g)
+      .map(className => className.trim().replace(/\\/, ''))
+
     const utils = (
       await Promise.all(
         classNames.map(i => uno.parseToken(i, '-')),

diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts
@@ -468,4 +468,17 @@ describe('transformer-directives', () => {
       `)
     })
   })
+
+  test('escape backslash', async () => {
+    const result = await transform(
+      '.btn { @apply border-r-\$theme-color }',
+    )
+    expect(result)
+      .toMatchInlineSnapshot(`
+        ".btn {
+          border-right-color: var(--theme-color);
+        }
+        "
+      `)
+  })
 })