feat: handle hash type

unocss · May 10, 2024 · 4a86840 · 4a86840
1 parent ed84b85
commit 4a86840
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/packages/transformer-directives/src/apply.ts b/packages/transformer-directives/src/apply.ts
@@ -44,6 +44,13 @@ export async function parseApply({ code, uno, offset, applyVariable }: Transform
         })
         i += 2
       }
+      else if (children[i + 1]?.type === 'Hash') {
+        normalizedChildren.push({
+          type: 'String',
+          value: `${getNodeValue(children[i])}#${getNodeValue(children[i + 1])}`,
+        })
+        i += 1
+      }
       else {
         normalizedChildren.push(children[i])
       }

diff --git a/test/assets/output/transformer-directives-var-style-class.css b/test/assets/output/transformer-directives-var-style-class.css
@@ -4,10 +4,6 @@ nav {
   line-height: 1.75rem;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
-  border-color: rgb(248 113 113 / 0.05);
-  background-color: rgb(0 0 0 / 0.05);
-  color: rgb(45 212 191 / 0.05);
-  font-weight: 600;
 
   ul {
     li {

diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts
@@ -294,8 +294,7 @@ describe('transformer-directives', () => {
     const result = await transform(
       `nav {
         --at-apply: border font-mono text-lg;
-        --uno: bg-black/5 fw-600 text-teal/5 'b-red/5';
-
+        
         ul {
           li {
             --uno-apply: border;
@@ -312,6 +311,26 @@ describe('transformer-directives', () => {
       .toMatchFileSnapshot('./assets/output/transformer-directives-var-style-class.css')
   })
 
+  it('declaration for apply variable', async () => {
+    const result = await transform(
+      `nav {
+        --uno: b-#fff bg-black/6 fw-600 text-teal/5 'bg-red/5';
+      }`,
+    )
+
+    expect(result).toMatchInlineSnapshot(`
+      "nav {
+        --un-border-opacity: 1;
+        border-color: rgb(255 255 255 / var(--un-border-opacity));
+        background-color: rgb(0 0 0 / 0.06);
+        background-color: rgb(248 113 113 / 0.05);
+        color: rgb(45 212 191 / 0.05);
+        font-weight: 600;
+      }
+      "
+    `)
+  })
+
   it('@screen basic', async () => {
     const result = await transform(`
 .grid {