indentations

DigitecGalaxus · Jan 15, 2024 · f48f205 · f48f205
1 parent 25f6796
commit f48f205
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/packages/next-yak/loaders/__tests__/cssloader.test.ts b/packages/next-yak/loaders/__tests__/cssloader.test.ts
@@ -82,13 +82,13 @@ const headline = css\`
         font-size: 2rem;
         font-weight: bold;
         color: red;
-          &:where(._yak_1) {
+        &:where(._yak_1) {
           color: orange;
-          }
+        }
 
-          &:where(._yak_2) {
+        &:where(._yak_2) {
           color: teal;
-          }
+        }
         &:hover {
           color: var(--🦬18fi82j0);
         }
@@ -116,9 +116,9 @@ const headline = css\`
     ).toMatchInlineSnapshot(`
       "._yak_0 {
         /* comment */
-          &:where(._yak_1) {
+        &:where(._yak_1) {
           color: blue;
-          }
+        }
       }"
     `);
   });
@@ -483,24 +483,24 @@ const Component2 = styled.div\`
     ".Component_0 {
         background-color: red;
         color: white;
-        &:where(._yak_1) {
+          &:where(._yak_1) {
             background-color: blue;
-        }
+          }
         border: 1px solid black;
 
         &:focus {
             background-color: green;
-            &:where(._yak_2) {
+              &:where(._yak_2) {
                 background-color: blue;
-                &:where(._yak_3) {
+                  &:where(._yak_3) {
                     background-color: brown;
-                }
-            }
+                  }
+              }
             border: 2px solid pink;
         }
-    }
-    .Component2_4 {
+      }
+      .Component2_4 {
         color: hotpink;
-    }"
+      }"
   `);
 });
diff --git a/packages/next-yak/loaders/cssloader.cjs b/packages/next-yak/loaders/cssloader.cjs
@@ -367,7 +367,8 @@ const mergeCssPartExpression = (cssPartExpression, level = 0) => {
         )}\n`;
       }
     }
-    const indent = "    ".repeat(level);
+    // Try to keep the same indentation as the original code
+    const indent = quasiCode[0]?.code.match(/^\n(  |\t)(\s*)/)?.[2] ?? "    ".repeat(level);
     const hasCss = Boolean(cssPart.trim());
     css += !hasCss
       ? ""