feat(transformer-compile-class): add alwaysHash option, workaround #…

…2366 (#3173) Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Dec 2, 2023 · 08e2397 · 08e2397
1 parent ef98105
commit 08e2397
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/transformer-compile-class/src/index.ts b/packages/transformer-compile-class/src/index.ts
@@ -44,6 +44,13 @@ export interface CompileClassOptions {
    */
   hashFn?: (str: string) => string
 
+  /**
+   * Allow add hash to class name even if the class name is explicitly defined
+   *
+   * @default false
+   */
+  alwaysHash?: boolean
+
   /**
    * Left unknown classes inside the string
    *
@@ -63,6 +70,7 @@ export default function transformerCompileClass(options: CompileClassOptions = {
     classPrefix = 'uno-',
     hashFn = hash,
     keepUnknown = true,
+    alwaysHash = false,
   } = options
   // #2866
   const compiledClass = new Set()
@@ -105,6 +113,8 @@ export default function transformerCompileClass(options: CompileClassOptions = {
 
           if (match.groups && match.groups.name) {
             hash = match.groups.name
+            if (alwaysHash)
+              hash += `-${hashFn(body)}`
             explicitName = true
           }
           else {
@@ -115,7 +125,7 @@ export default function transformerCompileClass(options: CompileClassOptions = {
           if (tokens && tokens.has(className) && explicitName) {
             const existing = uno.config.shortcuts.find(i => i[0] === className)
             if (existing && existing[1] !== body)
-              throw new Error(`Duplicated compile class name "${className}". One is "${body}" and the other is "${existing[1]}" Please choose different class name`)
+              throw new Error(`Duplicated compile class name "${className}". One is "${body}" and the other is "${existing[1]}". Please choose different class name or set 'alwaysHash' to 'true'.`)
           }
 
           compiledClass.add(className)

diff --git a/test/transformer-compile-class.test.ts b/test/transformer-compile-class.test.ts
@@ -125,10 +125,10 @@ describe('transformer-compile-class', () => {
       <div class=":uno-foo: w-2"/>
     `.trim())
     }).rejects
-      .toMatchInlineSnapshot('[Error: Duplicated compile class name "uno-foo". One is "w-2" and the other is "w-1" Please choose different class name]')
+      .toMatchInlineSnapshot(`[Error: Duplicated compile class name "uno-foo". One is "w-2" and the other is "w-1". Please choose different class name or set 'alwaysHash' to 'true'.]`)
   })
 
-  it('custom class name should not conflicts when the content is the same', async () => {
+  it('custom class name should not conflict when the content is the same', async () => {
     const result = await transform(`
 <div class=":uno-foo: h-1 w-1"/>
 <div class=":uno-foo: w-1 h-1"/>