make sure container counts as an at rule

eagerpatch · Jan 16, 2024 · 38702de · 38702de
1 parent e41a978
commit 38702de
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/.changeset/quick-moons-peel.md b/.changeset/quick-moons-peel.md
@@ -0,0 +1,5 @@
+---
+'@navita/engine': patch
+---
+
+make sure container is counted as an at rule
diff --git a/packages/engine/src/helpers/splitStyleBlocks.ts b/packages/engine/src/helpers/splitStyleBlocks.ts
@@ -8,7 +8,7 @@ export function splitStyleBlocks(blocks: StyleBlock[]) {
  const lowPrioRules: StyleBlock[] = [];
 
  for (const block of blocks) {
- if (block.media || block.support) {
+ if (block.media || block.support || block.container) {
  atRules.push(block);
  continue;
  }

diff --git a/packages/engine/src/printers/sortAtRules.ts b/packages/engine/src/printers/sortAtRules.ts
@@ -6,6 +6,10 @@ const sortCSSMediaQueries = createSort() as typeof sortCSSmq;
 
 export function sortAtRules(blocks: StyleBlock[]) {
  return blocks.sort(
- (a, b) => sortCSSMediaQueries(a.media, b.media) || a.support.localeCompare(b.support)
+ (a, b) => (
+ sortCSSMediaQueries(a.media, b.media) ||
+ sortCSSMediaQueries(a.container, b.container) ||
+ a.support.localeCompare(b.support)
+ )
  );
 }
diff --git a/packages/engine/tests/src/printers/sortAtRules.test.ts b/packages/engine/tests/src/printers/sortAtRules.test.ts
@@ -9,9 +9,11 @@ describe('sortAtRules', () => {
  selector: '',
  declaration: 'some:declaration',
  property: '',
+ value: '',
  pseudo: '',
  media: '',
  support: '',
+ container: '',
  ...data,
  }) as const;
  }
@@ -22,8 +24,11 @@ describe('sortAtRules', () => {
  createBlock({ id: 'b', media: '(min-width: 300px)' }),
  createBlock({ id: 'c', media: '(min-width: 100px)', support: 'y' }),
  createBlock({ id: 'd', media: '(min-width: 100px)', support: 'x' }),
+ createBlock({ id: 'e', media: '', support: '', container: 'x' }),
+ createBlock({ id: 'f', media: '(min-width: 400px)', container: '(min-width: 400px)' }),
+ createBlock({ id: 'g', media: '(min-width: 500px)', container: '(min-width: 500px)', support: 'x' }),
  ];
 
- expect(sortAtRules(blocks).map(x => x.id)).toEqual(['d', 'c', 'a', 'b']);
+ expect(sortAtRules(blocks).map(x => x.id)).toEqual(['d', 'c', 'a', 'b', 'f', 'g', 'e']);
  });
 });