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

Fixes includes remote @imports in inline styles (#2258)

Browse source 
* Fixes includes remote @imports in inline styles

* chore(lint): Prettier fix

* Adds a changeset

* Fix empty style tags

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Matthew Phillips 2021-12-23 09:24:29 -05:00 committed by GitHub
parent f91ffcf024
commit db79d2e9ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/calm-crabs-rush.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix for use of remote @import in inline styles

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

@ -29,7 +29,6 @@ export function getAstroStyleId(pathname: string) {
if (styleId.endsWith('/')) { if (styleId.endsWith('/')) {
styleId += 'index'; styleId += 'index';
} }
styleId += '.css';
return styleId; return styleId;
} }

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)) { for (const node of findInlineStyles(document)) {
if (hasAttribute(node, 'astro-style')) { if (hasAttribute(node, 'astro-style')) {
styles += getTextContent(node); const style = getTextContent(node) || ' '; // If an empty node, add whitespace
const thisStyleId = `${styleId}/${++styles}.css`;
internals.astroStyleMap.set(thisStyleId, style);
assetImports.push(thisStyleId);
} }
} }
const assetImports = [];
for (let node of findAssets(document)) { for (let node of findAssets(document)) {
if (isBuildableLink(node, srcRoot, srcRootWeb)) { if (isBuildableLink(node, srcRoot, srcRootWeb)) {
const href = getAttribute(node, 'href')!; 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) { if (frontEndImports.length) {
htmlInput.add(id); htmlInput.add(id);
const jsSource = frontEndImports.map((sid) => `import '${sid}';`).join('\n'); 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/);
});
});