diff --git a/.changeset/calm-crabs-rush.md b/.changeset/calm-crabs-rush.md
new file mode 100644
index 000000000..dedfbbaac
--- /dev/null
+++ b/.changeset/calm-crabs-rush.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix for use of remote @import in inline styles
diff --git a/packages/astro/src/vite-plugin-build-css/index.ts b/packages/astro/src/vite-plugin-build-css/index.ts
index d67f973b9..444ac5049 100644
--- a/packages/astro/src/vite-plugin-build-css/index.ts
+++ b/packages/astro/src/vite-plugin-build-css/index.ts
@@ -29,7 +29,6 @@ export function getAstroStyleId(pathname: string) {
if (styleId.endsWith('/')) {
styleId += 'index';
}
- styleId += '.css';
return styleId;
}
diff --git a/packages/astro/src/vite-plugin-build-html/index.ts b/packages/astro/src/vite-plugin-build-html/index.ts
index d6472cb1a..c4d998191 100644
--- a/packages/astro/src/vite-plugin-build-html/index.ts
+++ b/packages/astro/src/vite-plugin-build-html/index.ts
@@ -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) || ' '; // 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)) {
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');
diff --git a/packages/astro/test/fixtures/remote-css/src/components/CommonHead.astro b/packages/astro/test/fixtures/remote-css/src/components/CommonHead.astro
new file mode 100644
index 000000000..06520fef3
--- /dev/null
+++ b/packages/astro/test/fixtures/remote-css/src/components/CommonHead.astro
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/remote-css/src/pages/index.astro b/packages/astro/test/fixtures/remote-css/src/pages/index.astro
new file mode 100644
index 000000000..3498d5613
--- /dev/null
+++ b/packages/astro/test/fixtures/remote-css/src/pages/index.astro
@@ -0,0 +1,14 @@
+---
+import CommonHead from '../components/CommonHead.astro';
+---
+
+
+
+
+
+
+ Importing CSS remotely
+
+
\ No newline at end of file
diff --git a/packages/astro/test/remote-css.test.js b/packages/astro/test/remote-css.test.js
new file mode 100644
index 000000000..aacc33852
--- /dev/null
+++ b/packages/astro/test/remote-css.test.js
@@ -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/);
+ });
+});