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

Enforce consistent import order of CSS (#2065)

Browse source 
Partially fixes #2060
This commit is contained in:
Drew Powers 2021-12-01 08:23:18 -07:00 committed by GitHub
parent 754ac42478
commit c6e4e2831e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 134 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/bright-ravens-remain.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Bugfix: improve CSS import order

8
packages/astro/src/vite-plugin-build-css/index.ts
View file

@ -94,11 +94,10 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
async load(id) {
if (isPageStyleVirtualModule(id)) {
const source = astroPageStyleMap.get(id)!;
return source;
return astroPageStyleMap.get(id) || null;
}
if (isStyleVirtualModule(id)) {
return astroStyleMap.get(id)!;
return astroStyleMap.get(id) || null;
}
return null;
},
@ -106,13 +105,10 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
async transform(value, id) {
if (isStyleVirtualModule(id)) {
styleSourceMap.set(id, value);
return null;
}
if (isCSSRequest(id)) {
styleSourceMap.set(id, value);
}
return null;
},

9
packages/astro/src/vite-plugin-build-html/index.ts
View file

@ -256,11 +256,10 @@ export function rollupPluginAstroBuildHTML(options: PluginOptions): VitePlugin {
// Create a mapping of chunks to dependent chunks, used to add the proper
// link tags for CSS.
for (const chunk of pureCSSChunks) {
const referenceId = chunkToReferenceIdMap.get(chunk.fileName)!;
const chunkReferenceIds = [referenceId];
for (const imp of chunk.imports) {
if (chunkToReferenceIdMap.has(imp)) {
chunkReferenceIds.push(chunkToReferenceIdMap.get(imp)!);
const chunkReferenceIds: string[] = [];
for (const [specifier, chunkRefID] of chunkToReferenceIdMap.entries()) {
if (chunk.imports.includes(specifier) || specifier === chunk.fileName) {
chunkReferenceIds.push(chunkRefID);
}
}
for (const [id] of Object.entries(chunk.modules)) {

50
packages/astro/test/astro-css-bundling-import.test.js Normal file
View file

@ -0,0 +1,50 @@
import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
describe('CSS Bundling (ESM import)', () => {
let fixture;
before(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling-import/' });
await fixture.build();
});
it('CSS output in import order', async () => {
// note: this test is a little confusing, but the main idea is that
// page-2.astro contains all of page-1.astro, plus some unique styles.
// we only test page-2 to ensure the proper order is observed.
const html = await fixture.readFile('/page-2/index.html');
const $ = cheerio.load(html);
let css = '';
for (const style of $('link[rel=stylesheet]')) {
const href = style.attribs.href.replace(/^\.\./, '');
if (!href) continue;
css += await fixture.readFile(href);
}
// test 1: insure green comes after red (site.css)
expect(css.indexOf('p{color:green}')).to.be.greaterThan(css.indexOf('p{color:red}'));
// test 2: insure green comes after blue (page-1.css)
expect(css.indexOf('p{color:green}')).to.be.greaterThan(css.indexOf('p{color:red}'));
});
// TODO: need more investigation to fix this
it.skip('no empty CSS files', async () => {
for (const page of ['/page-1/index.html', '/page-2/index.html']) {
const html = await fixture.readFile(page);
const $ = cheerio.load(html);
for (const style of $('link[rel=stylesheet]')) {
const href = style.attribs.href.replace(/^\.\./, '');
if (!href) continue;
const css = await fixture.readFile(href);
expect(css).to.be.ok;
}
}
});
});

27
packages/astro/test/fixtures/astro-css-bundling-import/src/layouts/BaseLayout.astro vendored Normal file
View file

@ -0,0 +1,27 @@
---
import "../styles/site.css"
const {title} = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<title>{title}</title>
<style>
</style>
</head>
<body>
<ul>
<li><a href="/page-1">Page 1</a></li>
<li><a href="/page-1">Page 2</a></li>
<!-- <li><a href="/page-2-reduced-layout">Page 2 reduced layout</a></li> -->
</ul>
<slot></slot>
</body>
</html>

12
packages/astro/test/fixtures/astro-css-bundling-import/src/layouts/PageLayout.astro vendored Normal file
View file

@ -0,0 +1,12 @@
---
import BaseLayout from "./BaseLayout.astro"
import "../styles/page-one.css"
const {title} = Astro.props;
---
<BaseLayout title={title}>
<main id="page">
<slot></slot>
</main>
</BaseLayout>

8
packages/astro/test/fixtures/astro-css-bundling-import/src/pages/page-1.astro vendored Normal file
View file

@ -0,0 +1,8 @@
---
import PageLayout from "../layouts/PageLayout.astro"
---
<PageLayout title="Page 1">
<h1>Page 1</h1>
<p>Nothing to see here. Check <a href="/page-2">Page 2</a></p>
</PageLayout>

13
packages/astro/test/fixtures/astro-css-bundling-import/src/pages/page-2.astro vendored Normal file
View file

@ -0,0 +1,13 @@
---
import PageLayout from "../layouts/PageLayout.astro"
import "../styles/page-two.css"
---
<PageLayout title="Page 2">
<h1>Page 2</h1>
<p>This text should be green, because we want <code>page-2.css</code> to override <code>site.css</code></p>
<p>This works in the dev-server. However in the prod build, the text is blue. Execute <code>npm run build</code> and then execute <code>npx http-server dist/</code>.</p>
<p>We can view the built html at <a href="https://github-qoihup--8080.local.webcontainer.io/page-2/">https://github-qoihup--8080.local.webcontainer.io/page-2/</a>. The color there is blue.</p>
<p>If it helps debug the issue, rename the <code>page-1.astro</code> file to <code>page-1.astro.bak</code>. Build the prod site and view it. This time the color is green.</p>
</PageLayout>

3
packages/astro/test/fixtures/astro-css-bundling-import/src/styles/page-one.css vendored Normal file
View file

@ -0,0 +1,3 @@
p {
color: blue;
}

3
packages/astro/test/fixtures/astro-css-bundling-import/src/styles/page-two.css vendored Normal file
View file

@ -0,0 +1,3 @@
p {
color: green;
}

7
packages/astro/test/fixtures/astro-css-bundling-import/src/styles/site.css vendored Normal file
View file

@ -0,0 +1,7 @@
p {
color: red;
}
h1 {
outline: 1px solid red;
}