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

[ci] format

Browse source
This commit is contained in:
tony-sull 2022-06-06 18:41:58 +00:00 • committed by github-actions[bot]
parent a87ce4412c
commit 2aa43549e0
8 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/astro/e2e/vue-component.test.js
View file

@ -142,6 +142,6 @@ test.describe('Vue components', () => {
const label = counter.locator('h1'); const label = counter.locator('h1');
await expect(label, 'slotted text updated').toHaveText('Hello, updated client:visible!'); await expect(label, 'slotted text updated').toHaveText('Hello, updated client:visible!');
await expect(counter, 'component styles persisted').toHaveCSS('display', 'grid') await expect(counter, 'component styles persisted').toHaveCSS('display', 'grid');
}); });
}); });

10
packages/astro/src/core/render/dev/css.ts
View file

@ -1,9 +1,9 @@
import type * as vite from 'vite'; import type * as vite from 'vite';
import path from 'path'; import path from 'path';
import { RuntimeMode } from '../../../@types/astro.js';
import { unwrapId, viteID } from '../../util.js'; import { unwrapId, viteID } from '../../util.js';
import { STYLE_EXTENSIONS } from '../util.js'; import { STYLE_EXTENSIONS } from '../util.js';
import { RuntimeMode } from '../../../@types/astro.js';
/** /**
* List of file extensions signalling we can (and should) SSR ahead-of-time * List of file extensions signalling we can (and should) SSR ahead-of-time
@ -16,7 +16,7 @@ export async function getStylesForURL(
filePath: URL, filePath: URL,
viteServer: vite.ViteDevServer, viteServer: vite.ViteDevServer,
mode: RuntimeMode mode: RuntimeMode
): Promise<{urls: Set<string>, stylesMap: Map<string, string>}> { ): Promise<{ urls: Set<string>; stylesMap: Map<string, string> }> {
const importedCssUrls = new Set<string>(); const importedCssUrls = new Set<string>();
const importedStylesMap = new Map<string, string>(); const importedStylesMap = new Map<string, string>();
@ -68,8 +68,8 @@ export async function getStylesForURL(
const ext = path.extname(importedModule.url).toLowerCase(); const ext = path.extname(importedModule.url).toLowerCase();
if (STYLE_EXTENSIONS.has(ext)) { if (STYLE_EXTENSIONS.has(ext)) {
if ( if (
mode === 'development' // only inline in development mode === 'development' && // only inline in development
&& typeof importedModule.ssrModule?.default === 'string' // ignore JS module styles typeof importedModule.ssrModule?.default === 'string' // ignore JS module styles
) { ) {
importedStylesMap.set(importedModule.url, importedModule.ssrModule.default); importedStylesMap.set(importedModule.url, importedModule.ssrModule.default);
} else { } else {
@ -85,6 +85,6 @@ export async function getStylesForURL(
await crawlCSS(viteID(filePath), true); await crawlCSS(viteID(filePath), true);
return { return {
urls: importedCssUrls, urls: importedCssUrls,
stylesMap: importedStylesMap stylesMap: importedStylesMap,
}; };
} }

8
packages/astro/src/core/render/dev/index.ts
View file

@ -48,7 +48,7 @@ export type RenderResponse =
| { type: 'html'; html: string; response: ResponseInit } | { type: 'html'; html: string; response: ResponseInit }
| { type: 'response'; response: Response }; | { type: 'response'; response: Response };
const svelteStylesRE = /svelte\?svelte&type=style/; const svelteStylesRE = /svelte\?svelte&type=style/;
async function loadRenderer( async function loadRenderer(
viteServer: ViteDevServer, viteServer: ViteDevServer,
@ -155,14 +155,14 @@ export async function render(
}); });
let styles = new Set<SSRElement>(); let styles = new Set<SSRElement>();
[...(stylesMap)].forEach(([url, content]) => { [...stylesMap].forEach(([url, content]) => {
// The URL is only used by HMR for Svelte components // The URL is only used by HMR for Svelte components
// See src/runtime/client/hmr.ts for more details // See src/runtime/client/hmr.ts for more details
styles.add({ styles.add({
props: { props: {
'data-astro-injected': svelteStylesRE.test(url) ? url : true 'data-astro-injected': svelteStylesRE.test(url) ? url : true,
}, },
children: content children: content,
}); });
}); });

4
packages/astro/src/runtime/client/hmr.ts
View file

@ -46,7 +46,9 @@ if (import.meta.hot) {
// This will only be called after the svelte component has hydrated in the browser. // This will only be called after the svelte component has hydrated in the browser.
// At this point Vite is tracking component style updates, we need to remove // At this point Vite is tracking component style updates, we need to remove
// styles injected by Astro for the component in favor of Vite's internal HMR. // styles injected by Astro for the component in favor of Vite's internal HMR.
const injectedStyle = document.querySelector(`style[data-astro-injected="${file.acceptedPath}"]`); const injectedStyle = document.querySelector(
`style[data-astro-injected="${file.acceptedPath}"]`
);
if (injectedStyle) { if (injectedStyle) {
injectedStyle.parentElement?.removeChild(injectedStyle); injectedStyle.parentElement?.removeChild(injectedStyle);
} }

16
packages/astro/test/0-css.test.js
View file

@ -298,8 +298,8 @@ describe('CSS', function () {
}); });
it('resolves ESM style imports', async () => { it('resolves ESM style imports', async () => {
const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g,""); const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
expect(allInjectedStyles, 'styles/imported-url.css').to.contain('.imported{'); expect(allInjectedStyles, 'styles/imported-url.css').to.contain('.imported{');
expect(allInjectedStyles, 'styles/imported-url.sass').to.contain('.imported-sass{'); expect(allInjectedStyles, 'styles/imported-url.sass').to.contain('.imported-sass{');
expect(allInjectedStyles, 'styles/imported-url.scss').to.contain('.imported-scss{'); expect(allInjectedStyles, 'styles/imported-url.scss').to.contain('.imported-scss{');
@ -307,7 +307,7 @@ describe('CSS', function () {
it('resolves Astro styles', async () => { it('resolves Astro styles', async () => {
const allInjectedStyles = $('style[data-astro-injected]').text(); const allInjectedStyles = $('style[data-astro-injected]').text();
expect(allInjectedStyles).to.contain('.linked-css.astro-'); expect(allInjectedStyles).to.contain('.linked-css.astro-');
expect(allInjectedStyles).to.contain('.linked-sass.astro-'); expect(allInjectedStyles).to.contain('.linked-sass.astro-');
expect(allInjectedStyles).to.contain('.linked-scss.astro-'); expect(allInjectedStyles).to.contain('.linked-scss.astro-');
@ -318,14 +318,14 @@ describe('CSS', function () {
const styles = [ const styles = [
'ReactModules.module.css', 'ReactModules.module.css',
'ReactModules.module.scss', 'ReactModules.module.scss',
'ReactModules.module.sass' 'ReactModules.module.sass',
]; ];
for (const style of styles) { for (const style of styles) {
const href = $(`link[href$="${style}"]`).attr('href'); const href = $(`link[href$="${style}"]`).attr('href');
expect((await fixture.fetch(href)).status, style).to.equal(200); expect((await fixture.fetch(href)).status, style).to.equal(200);
} }
const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g,""); const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
expect(allInjectedStyles).to.contain('.react-title{'); expect(allInjectedStyles).to.contain('.react-title{');
expect(allInjectedStyles).to.contain('.react-sass-title{'); expect(allInjectedStyles).to.contain('.react-sass-title{');
@ -341,15 +341,13 @@ describe('CSS', function () {
}); });
it('resolves CSS from Vue', async () => { it('resolves CSS from Vue', async () => {
const styles = [ const styles = ['VueModules.vue?vue&type=style&index=0&lang.module.scss'];
'VueModules.vue?vue&type=style&index=0&lang.module.scss'
];
for (const style of styles) { for (const style of styles) {
const href = $(`link[href$="${style}"]`).attr('href'); const href = $(`link[href$="${style}"]`).attr('href');
expect((await fixture.fetch(href)).status, style).to.equal(200); expect((await fixture.fetch(href)).status, style).to.equal(200);
} }
const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g,""); const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
expect(allInjectedStyles).to.contain('.vue-css{'); expect(allInjectedStyles).to.contain('.vue-css{');
expect(allInjectedStyles).to.contain('.vue-sass{'); expect(allInjectedStyles).to.contain('.vue-sass{');

2
packages/astro/test/astro-markdown-css.test.js
View file

@ -52,7 +52,7 @@ describe('Imported markdown CSS', function () {
expect(importedAstroComponent?.name).to.equal('h2'); expect(importedAstroComponent?.name).to.equal('h2');
const cssClass = $(importedAstroComponent).attr('class')?.split(/\s+/)?.[0]; const cssClass = $(importedAstroComponent).attr('class')?.split(/\s+/)?.[0];
const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g,""); const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
expect(allInjectedStyles).to.match(new RegExp(`h2.${cssClass}{color:#00f}`)); expect(allInjectedStyles).to.match(new RegExp(`h2.${cssClass}{color:#00f}`));
}); });
}); });

2
packages/astro/test/astro-partial-html.test.js
View file

@ -37,7 +37,7 @@ describe('Partial HTML', async () => {
expect(html).to.match(/^<!DOCTYPE html/); expect(html).to.match(/^<!DOCTYPE html/);
// test 2: link tag present // test 2: link tag present
const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g,""); const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
expect(allInjectedStyles).to.match(/h1{color:red;}/); expect(allInjectedStyles).to.match(/h1{color:red;}/);
}); });
}); });

4
packages/astro/test/component-library.test.js
View file

@ -108,11 +108,11 @@ describe('Component Libraries', () => {
const $ = cheerioLoad(html); const $ = cheerioLoad(html);
// Most styles are inlined in a <style> block in the dev server // Most styles are inlined in a <style> block in the dev server
const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g,""); const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
if (expected.test(allInjectedStyles)) { if (expected.test(allInjectedStyles)) {
return true; return true;
} }
// Also check for <link> stylesheets // Also check for <link> stylesheets
const links = $('link[rel=stylesheet]'); const links = $('link[rel=stylesheet]');
for (const link of links) { for (const link of links) {