Add support for import rules

Author: Gigabyte5671

src/Generator.ts

@@ -57,6 +57,22 @@ export async function cssToHtml(css: CSSRuleList | string, options: Options = {}
 
 	// Filter and format the supplied style rules.
 	for (const [index, rule] of Object.entries(styleRules) as [string, (CSSStyleRule | CSSMediaRule)][]) {
+		// Fetch the content of import rules.
+		if (rule instanceof CSSImportRule && new URL(rule.href).pathname.endsWith('.css')) {
+			try {
+				const resource = await fetch(rule.href);
+				if (resource.status !== 200) {
+					throw new Error(`Response status was ${resource.status}.`);
+				}
+				// Recursively convert all imported stylesheets to HTML.
+				const resourceCss = await resource.text();
+				const resourceHtml = await cssToHtml(resourceCss, options);
+				output.innerHTML += resourceHtml.innerHTML;
+			} catch (error) {
+				console.warn('Failed to fetch remote stylesheet:', rule.href, '-', error);
+			}
+		}
+
 		// Skip:
 		// - Non-style rules.
 		// - Rules including `*`.

tests/ignored.spec.ts

@@ -6,7 +6,6 @@ import { test, expect } from '@playwright/test';
 import { cssToHtml } from '../src/index';
 
 const css = `
-@import url('https://example.com/example.css');
 :root {
 	background: #000;
 }

tests/import.spec.ts

@@ -0,0 +1,33 @@
+/*
+ * Verify that remote style sheets can be imported.
+ */
+
+import { test, expect } from '@playwright/test';
+import { cssToHtml } from '../src/index';
+
+const css = `
+@import url('https://cascades.app/project/wBcGlZUV.css');
+div.last {
+	content: 'a';
+}
+`;
+
+test('Import', async ({ page }) => {
+	await page.addScriptTag({ path: './dist/Generator.script.js' });
+
+	page.on('console', msg => console.log(msg.text()));
+
+	const result = await page.evaluate(async (css) => {
+		document.body = await cssToHtml(css);
+
+		const element = document.body.querySelector('div.last');
+		return element
+			&& element.innerHTML === 'a'
+			&& element.previousElementSibling !== null
+			&& element.previousElementSibling.innerHTML === 'Test'
+			&& element.nextSibling === null;
+	}, css);
+
+	expect(result).toBeDefined();
+	expect(result).toBe(true);
+});

tests/index.js

@@ -1,6 +1,7 @@
 import { cssToHtml } from '../dist/index.js';
 
 const input = `
+@import url('https://cascades.app/project/wBcGlZUV.css');
 :root {
 	background: #000;
 }