feat: group atrules with same name

wix · Jun 12, 2024 · 2ec1a2e · 2ec1a2e
1 parent 2629438
commit 2ec1a2e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/packages/code-formatter/src/format-css.ts b/packages/code-formatter/src/format-css.ts
@@ -178,9 +178,12 @@ function formatAst(ast: AnyNode, index: number, options: FormatOptions) {
         const hasNestedChildren = childrenLen === -1;
         const hasCommentBefore = prevType === 'comment';
         const hasRuleBefore = prevType === 'rule';
+        const isSameTypeAsPrev = prevType === 'atrule' && prevNode?.name === ast.name;
 
         const separation =
-            hasCommentBefore || (hasNestedChildren && !hasRuleBefore) ? 0 : linesBetween;
+            hasCommentBefore || (hasNestedChildren && !hasRuleBefore && isSameTypeAsPrev)
+                ? 0
+                : linesBetween;
 
         ast.raws.before =
             index !== 0 || indentLevel > 0

diff --git a/packages/code-formatter/test/formatter-experimental.spec.ts b/packages/code-formatter/test/formatter-experimental.spec.ts
@@ -971,6 +971,18 @@ describe('formatter - experimental', () => {
                 `,
             });
         });
+        it('should group similar named atRules with no body', () => {
+            testFormatCss({
+                message: 'top-level',
+                source: `@aaa 1;@aaa 2;@bbb 1;@bbb 2;@aaa 3`,
+                expect: `@aaa 1;\n@aaa 2;\n\n@bbb 1;\n@bbb 2;\n\n@aaa 3\n`,
+            });
+            testFormatCss({
+                message: 'nested',
+                source: `@top {@aaa 1;@aaa 2;@bbb 1;@bbb 2;@aaa 3}`,
+                expect: `@top {\n    @aaa 1;\n    @aaa 2;\n\n    @bbb 1;\n    @bbb 2;\n\n    @aaa 3\n}\n`,
+            });
+        });
         it('should set body into lines and indent accordingly', () => {
             testFormatCss({
                 deindent: true,
@@ -1065,6 +1077,7 @@ describe('formatter - experimental', () => {
                         @parens (a1: 1px, (a2: 2px) (a3: 3px)) {}
         
                         @function f(b1, b2, f-nest(b3)) {}
+
                         @square [c1, c2, c3[c4]) {}
         
                     `,