Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-31 23:31:30 -05:00
Code Issues Activity

Fixes includes remote @imports in inline styles

Browse source
This commit is contained in:
Matthew Phillips 2021-12-23 07:48:47 -05:00
parent aac1d4e18d
commit 216308bc1e
4 changed files with 51 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -120,14 +120,18 @@ export function rollupPluginAstroBuildHTML(options: PluginOptions): VitePlugin {
}
}
let styles = '';
const assetImports = [];
const styleId = getAstroStyleId(pathname);
let styles = 0;
for (const node of findInlineStyles(document)) {
if (hasAttribute(node, 'astro-style')) {
styles += getTextContent(node);
const style = getTextContent(node);
const thisStyleId = `${styleId}/${++styles}.css`;
internals.astroStyleMap.set(thisStyleId, style);
assetImports.push(thisStyleId);
}
}
const assetImports = [];
for (let node of findAssets(document)) {
if (isBuildableLink(node, srcRoot, srcRootWeb)) {
const href = getAttribute(node, 'href')!;
@ -157,13 +161,6 @@ export function rollupPluginAstroBuildHTML(options: PluginOptions): VitePlugin {
}
}
if (styles) {
const styleId = getAstroStyleId(pathname);
internals.astroStyleMap.set(styleId, styles);
// Put this at the front of imports
assetImports.unshift(styleId);
}
if (frontEndImports.length) {
htmlInput.add(id);
const jsSource = frontEndImports.map((sid) => `import '${sid}';`).join('\n');

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

@ -0,0 +1,5 @@
<style global>
/* Testing remote imports */
@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
</style>

14
packages/astro/test/fixtures/remote-css/src/pages/index.astro vendored Normal file
View file

@ -0,0 +1,14 @@
---
import CommonHead from '../components/CommonHead.astro';
---
<html>
<head>
<CommonHead />
<style>
body { color: green; }
</style>
</head>
<body>
<h1>Importing CSS remotely</h1>
</body>
</html>

25
packages/astro/test/remote-css.test.js Normal file
View file

@ -0,0 +1,25 @@
import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
describe('Remote CSS', () => {
let fixture;
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/remote-css/',
});
await fixture.build();
});
it('Includes all styles on the page', async () => {
const html = await fixture.readFile('/index.html');
const $ = cheerio.load(html);
const relPath = $('link').attr('href');
const css = await fixture.readFile('/' + relPath);
expect(css).to.match(/https:\/\/unpkg.com\/open-props/);
expect(css).to.match(/body/);
});
});