diff options
| author |  Matthew Phillips <matthew@matthewphillips.info>
| 2021-12-23 09:24:29 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-12-23 09:24:29 -0500 |
| commit | db79d2e9ec02f3e3f25c6c10aa365acdd5c1a7cc (patch) | |
| tree | 1f96986bc40037c8b240d2ed7294f944c8c5189b | |
| parent | f91ffcf024e4ca4ff29951c3e26e5fca09b1c3e6 (diff) | |
| download | astro-db79d2e9ec02f3e3f25c6c10aa365acdd5c1a7cc.tar.gz astro-db79d2e9ec02f3e3f25c6c10aa365acdd5c1a7cc.tar.zst astro-db79d2e9ec02f3e3f25c6c10aa365acdd5c1a7cc.zip | |
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>
6 files changed, 56 insertions, 11 deletions
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 @@ + <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 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'; +--- +<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 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/); + }); +}); |