Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

Fix use of preprocessors with the static build (#2490)

Browse source 
* Fix use of preprocessors with the static build

* Adds a changeset
This commit is contained in:
Matthew Phillips 2022-01-28 17:10:52 -05:00 committed by GitHub
parent aebe7f57d9
commit 69d5b70900
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/hungry-dots-reply.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix for CSS preprocessing using the static build

6
examples/fast-build/src/pages/index.astro
View file

@ -16,6 +16,12 @@ import ExternalHoisted from '../components/ExternalHoisted.astro';
color: salmon; color: salmon;
} }
</style> </style>
<style lang="scss">
$color: purple;
h2 {
color: purple;
}
</style>
</head> </head>
<body> <body>
<section> <section>

20
packages/astro/src/vite-plugin-astro/compile.ts
View file

@ -50,15 +50,18 @@ async function compile(config: AstroConfig, filename: string, source: string, vi
experimentalStaticExtraction: config.buildOptions.experimentalStaticBuild, experimentalStaticExtraction: config.buildOptions.experimentalStaticBuild,
// TODO add experimental flag here // TODO add experimental flag here
preprocessStyle: async (value: string, attrs: Record<string, string>) => { preprocessStyle: async (value: string, attrs: Record<string, string>) => {
// When using this flag CSS is added via <link> and therefore goes
// through Vite's CSS pipeline. We don't need to transform here, it will be
// transformed on CSS requests.
if (config.buildOptions.experimentalStaticBuild) {
return { code: value };
}
const lang = `.${attrs?.lang || 'css'}`.toLowerCase(); const lang = `.${attrs?.lang || 'css'}`.toLowerCase();
try { try {
let prefix = '';
// In the static build, strip away at-imports so that they can be resolved
// by the pseudo-module that gets created.
if(config.buildOptions.experimentalStaticBuild) {
value = value.replace(/(?:@import)\s(?:url\()?\s?["\'](.*?)["\']\s?\)?(?:[^;]*);?/gi, (match) => {
prefix += match;
// Replace with an empty string of the same length, to preserve source maps.
return new Array(match.length).fill(' ').join('');
});
}
const result = await transformWithVite({ const result = await transformWithVite({
value, value,
lang, lang,
@ -76,7 +79,8 @@ async function compile(config: AstroConfig, filename: string, source: string, vi
map = result.map.toString(); map = result.map.toString();
} }
} }
return { code: result.code, map }; const code = prefix += result.code;
return { code, map };
} catch (err) { } catch (err) {
// save error to throw in plugin context // save error to throw in plugin context
cssTransformError = err as any; cssTransformError = err as any;