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

Order server CSS the same as static (#4149)

Browse source 
* Order server CSS the same as static

* Adds a changeset
This commit is contained in:
Matthew Phillips 2022-08-04 11:43:25 -04:00 committed by GitHub
parent 7300f094fd
commit 4d64752274
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 114 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/curvy-donuts-build.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fixes SSR CSS ordering to match static mode

2
packages/astro/src/core/build/vite-plugin-ssr.ts
View file

@ -139,7 +139,7 @@ function buildManifest(
routes.push({
file: '',
links: Array.from(pageData.css),
links: Array.from(pageData.css).reverse(),
scripts: [
...scripts,
...astroConfig._ctx.scripts

57
packages/astro/test/css-order.test.js Normal file
View file

@ -0,0 +1,57 @@
import { expect } from 'chai';
import * as cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
import testAdapter from './test-adapter.js';
describe('CSS production ordering', () => {
let staticHTML, serverHTML;
let staticCSS, serverCSS;
const commonConfig = Object.freeze({
root: './fixtures/css-order/',
});
function getLinks(html) {
let $ = cheerio.load(html);
let out = [];
$('link[rel=stylesheet]').each((i, el) => {
out.push($(el).attr('href'))
});
return out;
}
before(async () => {
let fixture = await loadFixture({ ...commonConfig });
await fixture.build();
staticHTML = await fixture.readFile('/one/index.html');
staticCSS = await Promise.all(getLinks(staticHTML).map(async (href) => {
const css = await fixture.readFile(href);
return { href, css };
}));
});
before(async () => {
let fixture = await loadFixture({
...commonConfig,
adapter: testAdapter(),
output: 'server',
});
await fixture.build();
const app = await fixture.loadTestAdapterApp();
const request = new Request('http://example.com/one');
const response = await app.render(request);
serverHTML = await response.text();
serverCSS = await Promise.all(getLinks(serverHTML).map(async (href) => {
const css = await fixture.readFile(`/client${href}`);
return { href, css };
}));
});
it('is in the same order for output: server and static', async () => {
const staticContent = staticCSS.map(o => o.css);
const serverContent = serverCSS.map(o => o.css);
expect(staticContent).to.deep.equal(serverContent);
});
});

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

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

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

@ -0,0 +1,5 @@
<style is:global>
body {
color: red;
}
</style>

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

@ -0,0 +1,17 @@
---
import CommonHead from '../components/CommonHead.astro';
---
<html>
<head>
<title>Testing</title>
<CommonHead />
<style>
body {
margin: 1px;
}
</style>
</head>
<body>
<h1>Testing</h1>
</body>
</html>

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

@ -0,0 +1,17 @@
---
import CommonHead from '../components/CommonHead.astro';
---
<html>
<head>
<title>Testing</title>
<CommonHead />
<style>
body {
margin: 2px;
}
</style>
</head>
<body>
<h1>Testing</h1>
</body>
</html>

1
packages/astro/test/ssr-response.test.js
View file

@ -1,5 +1,4 @@
import { expect } from 'chai';
import { load as cheerioLoad } from 'cheerio';
import { loadFixture } from './test-utils.js';
import testAdapter from './test-adapter.js';

6
pnpm-lock.yaml
View file

@ -1462,6 +1462,12 @@ importers:
packages/astro/test/fixtures/css-assets/packages/font-awesome:
specifiers: {}
packages/astro/test/fixtures/css-order:
specifiers:
astro: workspace:*
dependencies:
astro: link:../../..
packages/astro/test/fixtures/custom-404:
specifiers:
astro: workspace:*