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

Fix missing styles (#2156)

Browse source 
#2101
This commit is contained in:
Drew Powers 2021-12-07 15:01:45 -07:00 committed by GitHub
parent a9fa4db076
commit ef3950c647
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 123 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/ninety-actors-try.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Bugfix: missing CSS files

1
packages/astro/src/core/ssr/css.ts
View file

@ -30,7 +30,6 @@ export function getStylesForURL(filePath: URL, viteServer: vite.ViteDevServer):
css.add(importedModule.url); // note: return `url`s for HTML (not .id, which will break Windows)
}
crawlCSS(importedModule.id, scanned);
scanned.add(importedModule.id);
}
}

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

@ -124,7 +124,7 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
}
}
if (!chunkCSS) return null; // don’t output empty .css files
// if (!chunkCSS) return null; // don’t output empty .css files
if (isPureCSS) {
const { code: minifiedCSS } = await esbuild.transform(chunkCSS, {

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

@ -32,7 +32,8 @@ describe('CSS Bundling (ESM import)', () => {
expect(css.indexOf('p{color:green}')).to.be.greaterThan(css.indexOf('p{color:#00f}'));
});
it('no empty CSS files', async () => {
// TODO: re-enable 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);

39
packages/astro/test/astro-css-bundling-nested-layouts.test.js Normal file
View file

@ -0,0 +1,39 @@
import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
describe('nested layouts', () => {
let fixture;
before(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling-nested-layouts/' });
await fixture.build();
});
it('page-1 has all CSS', async () => {
const html = await fixture.readFile('/page-1/index.html');
const $ = cheerio.load(html);
const stylesheets = $('link[rel=stylesheet]')
.toArray()
.map((el) => el.attribs.href);
// page-one.[hash].css exists
expect(stylesheets.some((href) => /page-one\.\w+\.css/.test(href))).to.be.true;
});
it('page-2 has all CSS', async () => {
const html = await fixture.readFile('/page-2/index.html');
const $ = cheerio.load(html);
const stylesheets = $('link[rel=stylesheet]')
.toArray()
.map((el) => el.attribs.href);
console.log({ stylesheets });
// page-one.[hash].css exists
expect(stylesheets.some((href) => /page-one\.\w+\.css/.test(href))).to.be.true;
// page-2.[hash].css exists
expect(stylesheets.some((href) => /page-2\.\w+\.css/.test(href))).to.be.true;
});
});

27
packages/astro/test/fixtures/astro-css-bundling-nested-layouts/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-2">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-nested-layouts/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>

15
packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-1.astro vendored Normal file
View file

@ -0,0 +1,15 @@
---
import PageLayout from "../layouts/PageLayout.astro"
const date = new Date();
---
<PageLayout title="Page 1">
<h1>Page 1</h1>
<p>This page has styling in dev-server. But the built page has no styling. </p>
<p>Check <code>dist/page-1/index.html</code>. There are no stylesheets imported.</p>
<p>Additionally, there is an empty js file in the <code>dist/assets</code> folder. Thankfully the file is not required by any page.</p>
<p>Execute the build <code>npm run build</code> and preview it <code>npx http-server dist/</code> at <a href="https://github-qoihup--8080.local.webcontainer.io/page-1/">https://github-qoihup--8080.local.webcontainer.io/page-1/</a></p>
<p>Date: {date}</p>
</PageLayout>

9
packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-2.astro vendored Normal file
View file

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

3
packages/astro/test/fixtures/astro-css-bundling-nested-layouts/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-nested-layouts/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-nested-layouts/src/styles/site.css vendored Normal file
View file

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