michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Start of fixing multiple CSS issue (#1838)

Browse source 
* Start of fixing multiple CSS issue

* Update tests to work with compiled output

* Fix linting
This commit is contained in:
Matthew Phillips 2021-11-15 15:05:36 -05:00 committed by GitHub
parent 1579dd7ff9
commit 93cc4d361b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/astro/src/vite-plugin-build-css/index.ts
View file

@ -1,10 +1,10 @@
import type { ResolveIdHook, LoadHook, RenderedChunk } from 'rollup'; import type {RenderedChunk } from 'rollup';
import type { Plugin as VitePlugin } from 'vite'; import type { Plugin as VitePlugin } from 'vite';
import { STYLE_EXTENSIONS } from '../core/ssr/css.js'; import { STYLE_EXTENSIONS } from '../core/ssr/css.js';
import { getViteResolve, getViteLoad } from './resolve.js';
import { getViteTransform, TransformHook } from '../vite-plugin-astro/styles.js'; import { getViteTransform, TransformHook } from '../vite-plugin-astro/styles.js';
import * as path from 'path'; import * as path from 'path';
import esbuild from 'esbuild';
const PLUGIN_NAME = '@astrojs/rollup-plugin-build-css'; const PLUGIN_NAME = '@astrojs/rollup-plugin-build-css';
@ -65,6 +65,14 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
configResolved(resolvedConfig) { configResolved(resolvedConfig) {
viteTransform = getViteTransform(resolvedConfig); viteTransform = getViteTransform(resolvedConfig);
const viteCSSPost = resolvedConfig.plugins.find(p => p.name === 'vite:css-post');
if(viteCSSPost) {
// Prevent this plugin's bundling behavior from running since we need to
// do that ourselves in order to handle updating the HTML.
delete viteCSSPost.renderChunk;
delete viteCSSPost.generateBundle;
}
}, },
async resolveId(id) { async resolveId(id) {
@ -107,7 +115,7 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
return null; return null;
}, },
renderChunk(_code, chunk) { async renderChunk(_code, chunk) {
let chunkCSS = ''; let chunkCSS = '';
let isPureCSS = true; let isPureCSS = true;
for (const [id] of Object.entries(chunk.modules)) { for (const [id] of Object.entries(chunk.modules)) {
@ -120,10 +128,14 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
} }
if (isPureCSS) { if (isPureCSS) {
const { code: minifiedCSS } = await esbuild.transform(chunkCSS, {
loader: 'css',
minify: true,
});
const referenceId = this.emitFile({ const referenceId = this.emitFile({
name: chunk.name + '.css', name: chunk.name + '.css',
type: 'asset', type: 'asset',
source: chunkCSS, source: minifiedCSS,
}); });
pureCSSChunks.add(chunk); pureCSSChunks.add(chunk);
chunkToReferenceIdMap.set(chunk.fileName, referenceId); chunkToReferenceIdMap.set(chunk.fileName, referenceId);

6
packages/astro/test/astro-styles-ssr.test.js
View file

@ -74,7 +74,7 @@ describe('Styles SSR', () => {
return match; return match;
}); });
expect(css).to.include(`.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px;}.outer${scopedClass}{color:red;}`); expect(css).to.include(`.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px}.outer${scopedClass}{color:red}`);
// test 2: element received .astro-XXXXXX class (this selector will succeed if transformed correctly) // test 2: element received .astro-XXXXXX class (this selector will succeed if transformed correctly)
const wrapper = $(`.wrapper${scopedClass}`); const wrapper = $(`.wrapper${scopedClass}`);
@ -108,7 +108,7 @@ describe('Styles SSR', () => {
const css = await fixture.readFile(href); const css = await fixture.readFile(href);
// test 4: CSS generates as expected // test 4: CSS generates as expected
expect(css).to.include(`.blue.${scopedClass}{color:powderblue;}.color\\:blue.${scopedClass}{color:powderblue;}.visible.${scopedClass}{display:block;}`); expect(css).to.include(`.blue.${scopedClass}{color:#b0e0e6}.color\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`);
}); });
it('Astro scoped styles skipped without <style>', async () => { it('Astro scoped styles skipped without <style>', async () => {
@ -132,6 +132,6 @@ describe('Styles SSR', () => {
const href = '/' + $('link').attr('href'); const href = '/' + $('link').attr('href');
const css = await fixture.readFile(href); const css = await fixture.readFile(href);
expect(css).to.include('display: contents;'); expect(css).to.include('display:contents');
}); });
}); });

8
yarn.lock
View file

@ -106,10 +106,10 @@
"@algolia/logger-common" "4.10.5" "@algolia/logger-common" "4.10.5"
"@algolia/requester-common" "4.10.5" "@algolia/requester-common" "4.10.5"
"@astrojs/compiler@^0.2.26": "@astrojs/compiler@^0.2.27":
version "0.2.26" version "0.2.27"
resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.26.tgz#676c9bc4c41682a786fc0f146a4d277602ce0294" resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.27.tgz#ab78494a9a364abdbb80f236f939f01057eec868"
integrity sha512-F7nlbqBeaTilpDmQ6MAGq5dW/Sl6vikGZBHGw1g0y6frH//Ku0SasDEFd6A3FOZETHjrwUsvB7UNwCCGLhxQ+A== integrity sha512-F5j2wzus8+BR8XmD5+KM0dP3H5ZFs62mqsMploCc7//v6DXICoaCi1rftnP84ewELLOpWX2Rxg1I3P3iIVo90A==
dependencies: dependencies:
typescript "^4.3.5" typescript "^4.3.5"