From db79d2e9ec02f3e3f25c6c10aa365acdd5c1a7cc Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@matthewphillips.info>
Date: Thu, 23 Dec 2021 09:24:29 -0500
Subject: [PATCH] Fixes includes remote @imports in inline styles (#2258)

* 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>
---
 .changeset/calm-crabs-rush.md                 |  5 ++++
 .../astro/src/vite-plugin-build-css/index.ts  |  1 -
 .../astro/src/vite-plugin-build-html/index.ts | 17 ++++++-------
 .../src/components/CommonHead.astro           |  5 ++++
 .../fixtures/remote-css/src/pages/index.astro | 14 +++++++++++
 packages/astro/test/remote-css.test.js        | 25 +++++++++++++++++++
 6 files changed, 56 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/calm-crabs-rush.md
 create mode 100644 packages/astro/test/fixtures/remote-css/src/components/CommonHead.astro
 create mode 100644 packages/astro/test/fixtures/remote-css/src/pages/index.astro
 create mode 100644 packages/astro/test/remote-css.test.js

diff --git a/.changeset/calm-crabs-rush.md b/.changeset/calm-crabs-rush.md
new file mode 100644
index 0000000000..dedfbbaacf
--- /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 d67f973b9d..444ac50498 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 d6472cb1ae..c4d998191f 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 0000000000..06520fef39
--- /dev/null
+++ b/packages/astro/test/fixtures/remote-css/src/components/CommonHead.astro
@@ -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>
\ 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 0000000000..3498d56131
--- /dev/null
+++ b/packages/astro/test/fixtures/remote-css/src/pages/index.astro
@@ -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>
\ 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 0000000000..aacc338523
--- /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/);
+	});
+});