fix(transformer-directives): fix declaration sorting (#668)

unocss · Mar 1, 2022 · 0e1bdf8 · 0e1bdf8
1 parent b07065a
commit 0e1bdf8
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 57 deletions.
diff --git a/packages/transformer-directives/src/index.ts b/packages/transformer-directives/src/index.ts
@@ -98,6 +98,11 @@ export async function transformDirectives(css: string, uno: UnoGenerator, filena
 
             list.insertList(insertNodeAst.children, item)
           }
+          else if (node.block.children.toArray().length === 1) {
+            const newNodeCss = `${parentSelector}{${body}}`
+            const insertNodeAst = parse(newNodeCss) as StyleSheet
+            list.insertList(insertNodeAst.children, item)
+          }
           else {
             const rules = new List<string>()
               .fromArray(body
@@ -119,5 +124,11 @@ export async function transformDirectives(css: string, uno: UnoGenerator, filena
 
   await Promise.all(stack)
 
+  ast.children = ast.children.filter((cssNode) => {
+    if ('block' in cssNode)
+      return (cssNode.block?.children.toArray().length ?? 1) !== 0
+    return true
+  })
+
   return generate(ast)
 }
diff --git a/test/__snapshots__/transformer-directives.test.ts.snap b/test/__snapshots__/transformer-directives.test.ts.snap
@@ -92,15 +92,6 @@ html.dark {
 .cursor-pen {
   cursor: url(https://api.iconify.design/mdi:lead-pencil.svg) 2 18, auto;
 }
-@media (prefers-color-scheme: dark) {
-  .select-dark {
-    --un-bg-opacity: 1;
-    background-color: rgba(31, 41, 55, var(--un-bg-opacity));
-  }
-}
-.select-dark:focus {
-  --un-ring-opacity: 1;
-}
 .select-dark {
   display: block;
   width: 100%;
@@ -134,8 +125,14 @@ html.dark {
   --un-ring-color: rgba(31, 41, 55, var(--un-ring-opacity));
   --un-ring-opacity: 0.75;
 }
-.icon-btn:hover {
-  opacity: 1;
+@media (prefers-color-scheme: dark) {
+  .select-dark {
+    --un-bg-opacity: 1;
+    background-color: rgba(31, 41, 55, var(--un-bg-opacity));
+  }
+}
+.select-dark:focus {
+  --un-ring-opacity: 1;
 }
 .icon-btn {
   display: inline-block;
@@ -152,11 +149,8 @@ html.dark {
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-@media (prefers-color-scheme: dark) {
-  .d-header {
-    --un-bg-opacity: 1;
-    background-color: rgba(45, 45, 45, var(--un-bg-opacity));
-  }
+.icon-btn:hover {
+  opacity: 1;
 }
 .d-header {
   position: sticky;
@@ -203,11 +197,10 @@ html.dark {
   -webkit-backdrop-filter: var(--un-backdrop-filter);
   backdrop-filter: var(--un-backdrop-filter);
 }
-@media (min-width: 1024px) {
-  .d-container {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    padding-top: 3rem;
+@media (prefers-color-scheme: dark) {
+  .d-header {
+    --un-bg-opacity: 1;
+    background-color: rgba(45, 45, 45, var(--un-bg-opacity));
   }
 }
 .d-container {
@@ -218,20 +211,12 @@ html.dark {
   padding-right: 0.5rem;
   padding-top: 2rem;
 }
-input:focus {
-  --un-ring-inset: var(--un-empty, /*!*/ /*!*/);
-  --un-ring-offset-width: 0px;
-  --un-ring-offset-color: #fff;
-  --un-ring-width: 0px;
-  --un-ring-color: rgba(147, 197, 253, 0.5);
-  --un-ring-width: 1px;
-  --un-ring-offset-shadow: var(--un-ring-inset) 0 0 0
-    var(--un-ring-offset-width) var(--un-ring-offset-color);
-  --un-ring-shadow: var(--un-ring-inset) 0 0 0
-    calc(var(--un-ring-width) + var(--un-ring-offset-width))
-    var(--un-ring-color);
-  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
-    var(--un-shadow, 0 0 #0000);
+@media (min-width: 1024px) {
+  .d-container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 3rem;
+  }
 }
 input {
   border-radius: 0.25rem;
@@ -244,13 +229,7 @@ input {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.btn:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+input:focus {
   --un-ring-inset: var(--un-empty, /*!*/ /*!*/);
   --un-ring-offset-width: 0px;
   --un-ring-offset-color: #fff;
@@ -265,6 +244,10 @@ input {
   box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
     var(--un-shadow, 0 0 #0000);
 }
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
 .btn {
   border-radius: 0.25rem;
   --un-bg-opacity: 1;
@@ -279,5 +262,22 @@ input {
   --un-text-opacity: 1;
   color: rgba(255, 255, 255, var(--un-text-opacity));
 }
+.btn:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --un-ring-inset: var(--un-empty, /*!*/ /*!*/);
+  --un-ring-offset-width: 0px;
+  --un-ring-offset-color: #fff;
+  --un-ring-width: 0px;
+  --un-ring-color: rgba(147, 197, 253, 0.5);
+  --un-ring-width: 1px;
+  --un-ring-offset-shadow: var(--un-ring-inset) 0 0 0
+    var(--un-ring-offset-width) var(--un-ring-offset-color);
+  --un-ring-shadow: var(--un-ring-inset) 0 0 0
+    calc(var(--un-ring-width) + var(--un-ring-offset-width))
+    var(--un-ring-color);
+  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+    var(--un-shadow, 0 0 #0000);
+}
 "
 `;
diff --git a/test/assets/apply.css b/test/assets/apply.css
@@ -18,12 +18,12 @@ html.dark {
   @apply bg-purple-500 bg-opacity-75;
 
   position: fixed;
-  z-index: 1031;
+  @apply z-1031;
   top: 0;
   left: 0;
 
   width: 100%;
-  height: 2px;
+  @apply h-[2px];
 }
 
 .hover-transform {

diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts
@@ -52,7 +52,10 @@ describe('transformer-directives', () => {
     )
     expect(result)
       .toMatchInlineSnapshot(`
-        "@media (min-width: 768px) {
+        ".btn {
+          margin: 0.25rem;
+        }
+        @media (min-width: 768px) {
           .btn {
             margin: 0.5rem;
           }
@@ -62,9 +65,6 @@ describe('transformer-directives', () => {
             margin: 0.75rem;
           }
         }
-        .btn {
-          margin: 0.25rem;
-        }
         "
       `)
   })
@@ -75,16 +75,16 @@ describe('transformer-directives', () => {
     )
     expect(result)
       .toMatchInlineSnapshot(`
-        ".btn:hover {
+        ".btn {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          grid-template-rows: repeat(4, minmax(0, 1fr));
+        }
+        .btn:hover {
           border-width: 1px;
           border-style: solid;
           --un-bg-opacity: 1;
           background-color: rgba(255, 255, 255, var(--un-bg-opacity));
         }
-        .btn {
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-          grid-template-rows: repeat(4, minmax(0, 1fr));
-        }
         "
       `)
   })
@@ -213,13 +213,13 @@ describe('transformer-directives', () => {
     )
     expect(result)
       .toMatchInlineSnapshot(`
-        ".dark .btn {
+        ".btn {
           --un-bg-opacity: 1;
-          background-color: rgba(0, 0, 0, var(--un-bg-opacity));
+          background-color: rgba(255, 255, 255, var(--un-bg-opacity));
         }
-        .btn {
+        .dark .btn {
           --un-bg-opacity: 1;
-          background-color: rgba(255, 255, 255, var(--un-bg-opacity));
+          background-color: rgba(0, 0, 0, var(--un-bg-opacity));
         }
         "
       `)