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 { STYLE_EXTENSIONS } from '../core/ssr/css.js';
import { getViteResolve, getViteLoad } from './resolve.js';
import { getViteTransform, TransformHook } from '../vite-plugin-astro/styles.js';
import * as path from 'path';
import esbuild from 'esbuild';
const PLUGIN_NAME = '@astrojs/rollup-plugin-build-css';
@ -65,6 +65,14 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
configResolved(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) {
@ -107,7 +115,7 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
return null;
},
renderChunk(_code, chunk) {
async renderChunk(_code, chunk) {
let chunkCSS = '';
let isPureCSS = true;
for (const [id] of Object.entries(chunk.modules)) {
@ -120,10 +128,14 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin {
}
if (isPureCSS) {
const { code: minifiedCSS } = await esbuild.transform(chunkCSS, {
loader: 'css',
minify: true,
});
const referenceId = this.emitFile({
name: chunk.name + '.css',
type: 'asset',
source: chunkCSS,
source: minifiedCSS,
});
pureCSSChunks.add(chunk);
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;
});
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)
const wrapper = $(`.wrapper${scopedClass}`);
@ -108,7 +108,7 @@ describe('Styles SSR', () => {
const css = await fixture.readFile(href);
// 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 () => {
@ -132,6 +132,6 @@ describe('Styles SSR', () => {
const href = '/' + $('link').attr('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/requester-common" "4.10.5"
"@astrojs/compiler@^0.2.26":
version "0.2.26"
resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.26.tgz#676c9bc4c41682a786fc0f146a4d277602ce0294"
integrity sha512-F7nlbqBeaTilpDmQ6MAGq5dW/Sl6vikGZBHGw1g0y6frH//Ku0SasDEFd6A3FOZETHjrwUsvB7UNwCCGLhxQ+A==
"@astrojs/compiler@^0.2.27":
version "0.2.27"
resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.27.tgz#ab78494a9a364abdbb80f236f939f01057eec868"
integrity sha512-F5j2wzus8+BR8XmD5+KM0dP3H5ZFs62mqsMploCc7//v6DXICoaCi1rftnP84ewELLOpWX2Rxg1I3P3iIVo90A==
dependencies:
typescript "^4.3.5"