michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Take dynamic imports into account for CSS ordering (#6176)

Browse source 
* Take dynamic imports into account for CSS ordering

* Adding a changeset

* updated lockfile
This commit is contained in:
Matthew Phillips 2023-02-08 10:15:36 -05:00 committed by GitHub
parent 334da38c56
commit 8bbdcf17dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 101 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/happy-dragons-invite.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Take dynamic import into account in CSS ordering

11
packages/astro/src/core/build/graph.ts
View file

@ -16,8 +16,17 @@ export function* walkParentInfos(
const info = ctx.getModuleInfo(id);
if (info) {
if (childId) {
order += info.importedIds.indexOf(childId);
const idx = info.importedIds.indexOf(childId);
if(idx === -1) {
// Dynamic imports come after all normal imports. So first add the number of normal imports.
order += info.importedIds.length;
// Then add on the dynamic ones.
order += info.dynamicallyImportedIds.indexOf(childId);
} else {
order += idx;
}
}
yield [info, depth, order];
}
if (until?.(id)) return;

23
packages/astro/test/css-order-import.test.js
View file

@ -39,8 +39,8 @@ describe('CSS ordering - import order', () => {
* @param {string} href
* @returns {Promise<{ href: string; css: string; }>}
*/
async function getLinkContent(href) {
const css = await fixture.readFile(href);
async function getLinkContent(href, f = fixture) {
const css = await f.readFile(href);
return { href, css };
}
@ -107,4 +107,23 @@ describe('CSS ordering - import order', () => {
expect(idx2).to.be.greaterThan(idx3);
});
});
describe('Dynamic import', () => {
// eslint-disable-next-line @typescript-eslint/no-shadow
let fixture;
before(async () => {
fixture = await loadFixture({
root: './fixtures/css-order-dynamic-import/',
});
await fixture.build();
});
it('dynamic imports taken into account', async () => {
let html = await fixture.readFile('/one/index.html');
const content = await Promise.all(getLinks(html).map((href) => getLinkContent(href, fixture)));
let [link1, link2] = content;
expect(link1.css).to.contain('aliceblue');
expect(link2.css).to.contain('yellow');
});
});
});

6
packages/astro/test/fixtures/css-order-dynamic-import/package.json vendored Normal file
View file

@ -0,0 +1,6 @@
{
"name": "@test/css-order-import",
"dependencies": {
"astro": "workspace:*"
}
}

4
packages/astro/test/fixtures/css-order-dynamic-import/src/components/One.astro vendored Normal file
View file

@ -0,0 +1,4 @@
---
import '../styles/One.css';
---
<link>

6
packages/astro/test/fixtures/css-order-dynamic-import/src/components/Three.astro vendored Normal file
View file

@ -0,0 +1,6 @@
---
---
<style>
body { background: yellow;}
</style>
<div>testing</div>

5
packages/astro/test/fixtures/css-order-dynamic-import/src/components/Two.astro vendored Normal file
View file

@ -0,0 +1,5 @@
<style>
body {
background: aliceblue;
}
</style>

13
packages/astro/test/fixtures/css-order-dynamic-import/src/pages/one.astro vendored Normal file
View file

@ -0,0 +1,13 @@
---
import '../components/One.astro';
import '../components/Two.astro';
await import('../components/Three.astro');
---
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
</body>
</html>

19
packages/astro/test/fixtures/css-order-dynamic-import/src/pages/two.astro vendored Normal file
View file

@ -0,0 +1,19 @@
---
import One from '../components/One.astro';
import Two from '../components/Two.astro';
---
<html>
<head>
<title>Test</title>
<One />
<Two />
<style>
body {
background: whitesmoke;
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>

3
packages/astro/test/fixtures/css-order-dynamic-import/src/styles/One.css vendored Normal file
View file

@ -0,0 +1,3 @@
body {
background: burlywood;
}

3
packages/astro/test/fixtures/css-order-dynamic-import/src/styles/base.css vendored Normal file
View file

@ -0,0 +1,3 @@
body {
background: green;
}

6
pnpm-lock.yaml
View file

@ -1708,6 +1708,12 @@ importers:
dependencies:
astro: link:../../..
packages/astro/test/fixtures/css-order-dynamic-import:
specifiers:
astro: workspace:*
dependencies:
astro: link:../../..
packages/astro/test/fixtures/css-order-import:
specifiers:
astro: workspace:*