summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--packages/astro/components/ViewTransitions.astro139
-rw-r--r--packages/astro/components/viewtransitions.css24
-rw-r--r--packages/astro/e2e/view-transitions.test.js18
-rw-r--r--packages/astro/src/@types/astro.ts10
-rw-r--r--packages/astro/src/core/config/schema.ts5
-rw-r--r--packages/astro/src/core/create-vite.ts2
-rw-r--r--packages/astro/src/runtime/server/astro-component.ts8
-rw-r--r--packages/astro/src/runtime/server/index.ts2
-rw-r--r--packages/astro/src/runtime/server/transition.ts62
-rw-r--r--packages/astro/src/transitions/index.ts64
-rw-r--r--packages/astro/src/transitions/vite-plugin-transitions.ts8
-rw-r--r--packages/astro/test/units/compile/invalid-css.test.js2
12 files changed, 197 insertions, 147 deletions
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
index 100ee43bd..f94383f4d 100644
--- a/packages/astro/components/ViewTransitions.astro
+++ b/packages/astro/components/ViewTransitions.astro
@@ -7,8 +7,9 @@ export interface Props {
const { fallback = 'animate' } = Astro.props as Props;
---
-<meta name="astro-view-transitions-enabled" content="true">
-<meta name="astro-view-transitions-fallback" content={fallback}>
+
+<meta name="astro-view-transitions-enabled" content="true" />
+<meta name="astro-view-transitions-fallback" content={fallback} />
<script>
type Fallback = 'none' | 'animate' | 'swap';
type Direction = 'forward' | 'back';
@@ -17,22 +18,23 @@ const { fallback = 'animate' } = Astro.props as Props;
// you can figure it using an index. On pushState the index is incremented so you
// can use that to determine popstate if going forward or back.
let currentHistoryIndex = history.state?.index || 0;
- if(!history.state) {
- history.replaceState({index: currentHistoryIndex}, document.title);
+ if (!history.state) {
+ history.replaceState({ index: currentHistoryIndex }, document.title);
}
const supportsViewTransitions = !!document.startViewTransition;
- const transitionEnabledOnThisPage = () => !!document.querySelector('[name="astro-view-transitions-enabled"]');
+ const transitionEnabledOnThisPage = () =>
+ !!document.querySelector('[name="astro-view-transitions-enabled"]');
- async function getHTML(href: string) {
- const res = await fetch(href)
- const html = await res.text();
+ async function getHTML(href: string) {
+ const res = await fetch(href);
+ const html = await res.text();
return { ok: res.ok, html };
- }
+ }
function getFallback(): Fallback {
const el = document.querySelector('[name="astro-view-transitions-fallback"]');
- if(el) {
+ if (el) {
return el.getAttribute('content') as Fallback;
}
return 'animate';
@@ -40,14 +42,14 @@ const { fallback = 'animate' } = Astro.props as Props;
const parser = new DOMParser();
- async function updateDOM(dir: Direction, html: string, fallback?: Fallback) {
- const doc = parser.parseFromString(html, 'text/html');
+ async function updateDOM(dir: Direction, html: string, fallback?: Fallback) {
+ const doc = parser.parseFromString(html, 'text/html');
doc.documentElement.dataset.astroTransition = dir;
const swap = () => document.documentElement.replaceWith(doc.documentElement);
- if(fallback === 'animate') {
+ if (fallback === 'animate') {
let isAnimating = false;
- addEventListener('animationstart', () => isAnimating = true, { once: true });
+ addEventListener('animationstart', () => (isAnimating = true), { once: true });
// Trigger the animations
document.documentElement.dataset.astroTransitionFallback = 'old';
@@ -61,17 +63,17 @@ const { fallback = 'animate' } = Astro.props as Props;
} else {
swap();
}
- }
+ }
async function navigate(dir: Direction, href: string) {
let finished: Promise<void>;
const { html, ok } = await getHTML(href);
// If there is a problem fetching the new page, just do an MPA navigation to it.
- if(!ok) {
+ if (!ok) {
location.href = href;
return;
}
- if(supportsViewTransitions) {
+ if (supportsViewTransitions) {
finished = document.startViewTransition(() => updateDOM(dir, html)).finished;
} else {
finished = updateDOM(dir, html, getFallback());
@@ -83,12 +85,12 @@ const { fallback = 'animate' } = Astro.props as Props;
}
}
- // Prefetching
+ // Prefetching
function maybePrefetch(pathname: string) {
- if(document.querySelector(`link[rel=prefetch][href="${pathname}"]`)) return;
- if(navigator.connection){
+ if (document.querySelector(`link[rel=prefetch][href="${pathname}"]`)) return;
+ if (navigator.connection) {
let conn = navigator.connection;
- if(conn.saveData || /(2|3)g/.test(conn.effectiveType || '')) return;
+ if (conn.saveData || /(2|3)g/.test(conn.effectiveType || '')) return;
}
let link = document.createElement('link');
link.setAttribute('rel', 'prefetch');
@@ -96,51 +98,60 @@ const { fallback = 'animate' } = Astro.props as Props;
document.head.append(link);
}
- if(supportsViewTransitions || getFallback() !== 'none') {
+ if (supportsViewTransitions || getFallback() !== 'none') {
document.addEventListener('click', (ev) => {
- let link = ev.target;
- if(link instanceof Element && link.tagName !== 'A') {
- link = link.closest('a');
- }
- // This check verifies that the click is happening on an anchor
- // that is going to another page within the same origin. Basically it determines
- // same-origin navigation, but omits special key combos for new tabs, etc.
- if (link &&
- link instanceof HTMLAnchorElement &&
- link.href &&
- (!link.target || link.target === '_self') &&
- link.origin === location.origin &&
- ev.button === 0 && // left clicks only
- !ev.metaKey && // new tab (mac)
- !ev.ctrlKey && // new tab (windows)
- !ev.altKey && // download
- !ev.shiftKey &&
- !ev.defaultPrevented &&
- transitionEnabledOnThisPage()
+ let link = ev.target;
+ if (link instanceof Element && link.tagName !== 'A') {
+ link = link.closest('a');
+ }
+ // This check verifies that the click is happening on an anchor
+ // that is going to another page within the same origin. Basically it determines
+ // same-origin navigation, but omits special key combos for new tabs, etc.
+ if (
+ link &&
+ link instanceof HTMLAnchorElement &&
+ link.href &&
+ (!link.target || link.target === '_self') &&
+ link.origin === location.origin &&
+ ev.button === 0 && // left clicks only
+ !ev.metaKey && // new tab (mac)
+ !ev.ctrlKey && // new tab (windows)
+ !ev.altKey && // download
+ !ev.shiftKey &&
+ !ev.defaultPrevented &&
+ transitionEnabledOnThisPage()
) {
- ev.preventDefault();
- navigate('forward', link.href);
- currentHistoryIndex++;
- history.pushState({index: currentHistoryIndex}, '', link.href);
- }
- });
- window.addEventListener('popstate', () => {
- if(!transitionEnabledOnThisPage()) return;
- const nextIndex = history.state?.index ?? (currentHistoryIndex + 1);
- const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
- navigate(direction, location.href);
- currentHistoryIndex = nextIndex;
- });
-
- ['mouseenter', 'touchstart', 'focus'].forEach(evName => {
- document.addEventListener(evName, ev => {
- if(ev.target instanceof HTMLAnchorElement) {
- let el = ev.target;
- if(el.origin === location.origin && el.pathname !== location.pathname && transitionEnabledOnThisPage()) {
- maybePrefetch(el.pathname);
- }
+ ev.preventDefault();
+ navigate('forward', link.href);
+ currentHistoryIndex++;
+ history.pushState({ index: currentHistoryIndex }, '', link.href);
}
- }, { passive: true, capture: true });
- });
+ });
+ window.addEventListener('popstate', () => {
+ if (!transitionEnabledOnThisPage()) return;
+ const nextIndex = history.state?.index ?? currentHistoryIndex + 1;
+ const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
+ navigate(direction, location.href);
+ currentHistoryIndex = nextIndex;
+ });
+
+ ['mouseenter', 'touchstart', 'focus'].forEach((evName) => {
+ document.addEventListener(
+ evName,
+ (ev) => {
+ if (ev.target instanceof HTMLAnchorElement) {
+ let el = ev.target;
+ if (
+ el.origin === location.origin &&
+ el.pathname !== location.pathname &&
+ transitionEnabledOnThisPage()
+ ) {
+ maybePrefetch(el.pathname);
+ }
+ }
+ },
+ { passive: true, capture: true }
+ );
+ });
}
</script>
diff --git a/packages/astro/components/viewtransitions.css b/packages/astro/components/viewtransitions.css
index 296c97c2b..3b6733182 100644
--- a/packages/astro/components/viewtransitions.css
+++ b/packages/astro/components/viewtransitions.css
@@ -8,25 +8,37 @@
}
@keyframes astroFadeIn {
- from { opacity: 0; }
+ from {
+ opacity: 0;
+ }
}
@keyframes astroFadeOut {
- to { opacity: 0; }
+ to {
+ opacity: 0;
+ }
}
@keyframes astroSlideFromRight {
- from { transform: translateX(100%); }
+ from {
+ transform: translateX(100%);
+ }
}
@keyframes astroSlideFromLeft {
- from { transform: translateX(-100%); }
+ from {
+ transform: translateX(-100%);
+ }
}
@keyframes astroSlideToRight {
- to { transform: translateX(100%); }
+ to {
+ transform: translateX(100%);
+ }
}
@keyframes astroSlideToLeft {
- to { transform: translateX(-100%); }
+ to {
+ transform: translateX(-100%);
+ }
}
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index 474424182..f42e21d12 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -16,7 +16,7 @@ test.afterAll(async () => {
test.describe('View Transitions', () => {
test('Moving from page 1 to page 2', async ({ page, astro }) => {
const loads = [];
- page.addListener('load', p => {
+ page.addListener('load', (p) => {
loads.push(p.title());
});
@@ -35,7 +35,7 @@ test.describe('View Transitions', () => {
test('Back button is captured', async ({ page, astro }) => {
const loads = [];
- page.addListener('load', p => {
+ page.addListener('load', (p) => {
loads.push(p.title());
});
@@ -59,7 +59,7 @@ test.describe('View Transitions', () => {
test('Clicking on a link with nested content', async ({ page, astro }) => {
const loads = [];
- page.addListener('load', p => {
+ page.addListener('load', (p) => {
loads.push(p.title());
});
@@ -76,9 +76,12 @@ test.describe('View Transitions', () => {
expect(loads.length, 'There should only be 1 page load').toEqual(1);
});
- test('Moving from a page without ViewTransitions triggers a full page navigation', async ({ page, astro }) => {
+ test('Moving from a page without ViewTransitions triggers a full page navigation', async ({
+ page,
+ astro,
+ }) => {
const loads = [];
- page.addListener('load', p => {
+ page.addListener('load', (p) => {
loads.push(p.title());
});
@@ -96,6 +99,9 @@ test.describe('View Transitions', () => {
p = page.locator('#two');
await expect(p, 'should have content').toHaveText('Page 2');
- expect(loads.length, 'There should be 2 page loads. The original, then going from 3 to 2').toEqual(2);
+ expect(
+ loads.length,
+ 'There should be 2 page loads. The original, then going from 3 to 2'
+ ).toEqual(2);
});
});
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
index 3c171822c..cab483b77 100644
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@@ -56,10 +56,10 @@ export interface AstroBuiltinProps {
}
export interface TransitionAnimation {
- name: string; // The name of the keyframe
- delay?: number | string;
- duration?: number | string;
- easing?: string;
+ name: string; // The name of the keyframe
+ delay?: number | string;
+ duration?: number | string;
+ easing?: string;
fillMode?: string;
direction?: string;
}
@@ -1270,7 +1270,7 @@ export interface AstroUserConfig {
* }
* ```
*/
- viewTransitions?: boolean;
+ viewTransitions?: boolean;
};
// Legacy options to be removed
diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts
index 99c839a6d..34c1e5549 100644
--- a/packages/astro/src/core/config/schema.ts
+++ b/packages/astro/src/core/config/schema.ts
@@ -233,7 +233,10 @@ export const AstroConfigSchema = z.object({
experimental: z
.object({
assets: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.assets),
- viewTransitions: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.viewTransitions),
+ viewTransitions: z
+ .boolean()
+ .optional()
+ .default(ASTRO_CONFIG_DEFAULTS.experimental.viewTransitions),
})
.passthrough()
.refine(
diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts
index 658648e3e..c0b989b77 100644
--- a/packages/astro/src/core/create-vite.ts
+++ b/packages/astro/src/core/create-vite.ts
@@ -11,6 +11,7 @@ import {
astroContentImportPlugin,
astroContentVirtualModPlugin,
} from '../content/index.js';
+import astroTransitions from '../transitions/vite-plugin-transitions.js';
import astroPostprocessVitePlugin from '../vite-plugin-astro-postprocess/index.js';
import { vitePluginAstroServer } from '../vite-plugin-astro-server/index.js';
import astroVitePlugin from '../vite-plugin-astro/index.js';
@@ -27,7 +28,6 @@ import astroScannerPlugin from '../vite-plugin-scanner/index.js';
import astroScriptsPlugin from '../vite-plugin-scripts/index.js';
import astroScriptsPageSSRPlugin from '../vite-plugin-scripts/page-ssr.js';
import { vitePluginSSRManifest } from '../vite-plugin-ssr-manifest/index.js';
-import astroTransitions from '../transitions/vite-plugin-transitions.js';
import { joinPaths } from './path.js';
interface CreateViteOptions {
diff --git a/packages/astro/src/runtime/server/astro-component.ts b/packages/astro/src/runtime/server/astro-component.ts
index aa205d790..57f2d3c3b 100644
--- a/packages/astro/src/runtime/server/astro-component.ts
+++ b/packages/astro/src/runtime/server/astro-component.ts
@@ -7,7 +7,11 @@ function validateArgs(args: unknown[]): args is Parameters<AstroComponentFactory
if (!args[0] || typeof args[0] !== 'object') return false;
return true;
}
-function baseCreateComponent(cb: AstroComponentFactory, moduleId?: string, propagation?: PropagationHint): AstroComponentFactory {
+function baseCreateComponent(
+ cb: AstroComponentFactory,
+ moduleId?: string,
+ propagation?: PropagationHint
+): AstroComponentFactory {
const name = moduleId?.split('/').pop()?.replace('.astro', '') ?? '';
const fn = (...args: Parameters<AstroComponentFactory>) => {
if (!validateArgs(args)) {
@@ -40,7 +44,7 @@ function createComponentWithOptions(opts: CreateComponentOptions) {
export function createComponent(
arg1: AstroComponentFactory | CreateComponentOptions,
moduleId?: string,
- propagation?: PropagationHint,
+ propagation?: PropagationHint
) {
if (typeof arg1 === 'function') {
return baseCreateComponent(arg1, moduleId, propagation);
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
index 08a205e05..4670a3e87 100644
--- a/packages/astro/src/runtime/server/index.ts
+++ b/packages/astro/src/runtime/server/index.ts
@@ -33,13 +33,13 @@ export {
stringifyChunk,
voidElementNames,
} from './render/index.js';
-export { renderTransition } from './transition.js';
export type {
AstroComponentFactory,
AstroComponentInstance,
ComponentSlots,
RenderInstruction,
} from './render/index.js';
+export { renderTransition } from './transition.js';
import { markHTMLString } from './escape.js';
import { addAttribute, Renderer } from './render/index.js';
diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts
index 98149e38a..253a861f9 100644
--- a/packages/astro/src/runtime/server/transition.ts
+++ b/packages/astro/src/runtime/server/transition.ts
@@ -1,16 +1,16 @@
import type {
SSRResult,
TransitionAnimation,
- TransitionDirectionalAnimations,
TransitionAnimationValue,
+ TransitionDirectionalAnimations,
} from '../../@types/astro';
+import { fade, slide } from '../../transitions/index.js';
import { markHTMLString } from './escape.js';
-import { slide, fade } from '../../transitions/index.js';
const transitionNameMap = new WeakMap<SSRResult, number>();
function incrementTransitionNumber(result: SSRResult) {
let num = 1;
- if(transitionNameMap.has(result)) {
+ if (transitionNameMap.has(result)) {
num = transitionNameMap.get(result)! + 1;
}
transitionNameMap.set(result, num);
@@ -21,9 +21,14 @@ function createTransitionScope(result: SSRResult, hash: string) {
const num = incrementTransitionNumber(result);
return `astro-${hash}-${num}`;
}
-export function renderTransition(result: SSRResult, hash: string, animationName: TransitionAnimationValue | undefined, transitionName: string) {
+export function renderTransition(
+ result: SSRResult,
+ hash: string,
+ animationName: TransitionAnimationValue | undefined,
+ transitionName: string
+) {
let animations: TransitionDirectionalAnimations | null = null;
- switch(animationName) {
+ switch (animationName) {
case 'fade': {
animations = fade();
break;
@@ -33,7 +38,7 @@ export function renderTransition(result: SSRResult, hash: string, animationName:
break;
}
default: {
- if(typeof animationName === 'object') {
+ if (typeof animationName === 'object') {
animations = animationName;
}
}
@@ -42,16 +47,18 @@ export function renderTransition(result: SSRResult, hash: string, animationName:
const scope = createTransitionScope(result, hash);
// Default transition name is the scope of the element, ie HASH-1
- if(!transitionName) {
+ if (!transitionName) {
transitionName = scope;
}
const styles = markHTMLString(`<style>[data-astro-transition-scope="${scope}"] {
view-transition-name: ${transitionName};
}
- ${!animations ? `` :
-// Regular animations
-`
+ ${
+ !animations
+ ? ``
+ : // Regular animations
+ `
::view-transition-old(${transitionName}) {
${stringifyAnimation(animations.forwards.old)}
}
@@ -79,8 +86,9 @@ export function renderTransition(result: SSRResult, hash: string, animationName:
[data-astro-transition=back][data-astro-transition-fallback=new] [data-astro-transition-scope="${scope}"] {
${stringifyAnimation(animations.backwards.new)}
}
- `.trim()}
- </style>`)
+ `.trim()
+ }
+ </style>`);
result._metadata.extraHead.push(styles);
@@ -89,12 +97,12 @@ export function renderTransition(result: SSRResult, hash: string, animationName:
type AnimationBuilder = {
toString(): string;
- [key: string]: string[] | ((k: string) => string);
-}
+ [key: string]: string[] | ((k: string) => string);
+};
function addAnimationProperty(builder: AnimationBuilder, prop: string, value: string | number) {
let arr = builder[prop];
- if(Array.isArray(arr)) {
+ if (Array.isArray(arr)) {
arr.push(value.toString());
} else {
builder[prop] = [value.toString()];
@@ -105,19 +113,19 @@ function animationBuilder(): AnimationBuilder {
return {
toString() {
let out = '';
- for(let k in this) {
+ for (let k in this) {
let value = this[k];
- if(Array.isArray(value)) {
- out += `\n\t${k}: ${value.join(', ')};`
+ if (Array.isArray(value)) {
+ out += `\n\t${k}: ${value.join(', ')};`;
}
}
return out;
- }
+ },
};
}
function stringifyAnimation(anim: TransitionAnimation | TransitionAnimation[]): string {
- if(Array.isArray(anim)) {
+ if (Array.isArray(anim)) {
return stringifyAnimations(anim);
} else {
return stringifyAnimations([anim]);
@@ -127,26 +135,26 @@ function stringifyAnimation(anim: TransitionAnimation | TransitionAnimation[]):
function stringifyAnimations(anims: TransitionAnimation[]): string {
const builder = animationBuilder();
- for(const anim of anims) {
+ for (const anim of anims) {
/*300ms cubic-bezier(0.4, 0, 0.2, 1) both astroSlideFromRight;*/
- if(anim.duration) {
+ if (anim.duration) {
addAnimationProperty(builder, 'animation-duration', toTimeValue(anim.duration));
}
- if(anim.easing) {
+ if (anim.easing) {
addAnimationProperty(builder, 'animation-timing-function', anim.easing);
}
- if(anim.direction) {
+ if (anim.direction) {
addAnimationProperty(builder, 'animation-direction', anim.direction);
}
- if(anim.delay) {
+ if (anim.delay) {
addAnimationProperty(builder, 'animation-delay', anim.delay);
}
- if(anim.fillMode) {
+ if (anim.fillMode) {
addAnimationProperty(builder, 'animation-fill-mode', anim.fillMode);
}
addAnimationProperty(builder, 'animation-name', anim.name);
}
-
+
return builder.toString();
}
diff --git a/packages/astro/src/transitions/index.ts b/packages/astro/src/transitions/index.ts
index d8dbb4e3b..4514269e5 100644
--- a/packages/astro/src/transitions/index.ts
+++ b/packages/astro/src/transitions/index.ts
@@ -1,45 +1,51 @@
-import type { TransitionDirectionalAnimations, TransitionAnimationPair } from '../@types/astro';
+import type { TransitionDirectionalAnimations } from '../@types/astro';
export function slide({
- duration
+ duration,
}: {
duration?: string | number;
} = {}): TransitionDirectionalAnimations {
return {
forwards: {
- old: [{
- name: 'astroFadeOut',
- duration: duration ?? '90ms',
- easing: 'cubic-bezier(0.4, 0, 1, 1)',
- fillMode: 'both'
- }, {
- name: 'astroSlideToLeft',
- duration: duration ?? '300ms',
- easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
- fillMode: 'both'
- }],
- new: [{
- name: 'astroFadeIn',
- duration: duration ?? '210ms',
- easing: 'cubic-bezier(0, 0, 0.2, 1)',
- delay: '90ms',
- fillMode: 'both'
- }, {
- name: 'astroSlideFromRight',
- duration: duration ?? '300ms',
- easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
- fillMode: 'both'
- }]
+ old: [
+ {
+ name: 'astroFadeOut',
+ duration: duration ?? '90ms',
+ easing: 'cubic-bezier(0.4, 0, 1, 1)',
+ fillMode: 'both',
+ },
+ {
+ name: 'astroSlideToLeft',
+ duration: duration ?? '300ms',
+ easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+ fillMode: 'both',
+ },
+ ],
+ new: [
+ {
+ name: 'astroFadeIn',
+ duration: duration ?? '210ms',
+ easing: 'cubic-bezier(0, 0, 0.2, 1)',
+ delay: '90ms',
+ fillMode: 'both',
+ },
+ {
+ name: 'astroSlideFromRight',
+ duration: duration ?? '300ms',
+ easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+ fillMode: 'both',
+ },
+ ],
},
backwards: {
old: [{ name: 'astroFadeOut' }, { name: 'astroSlideToRight' }],
- new: [{ name: 'astroFadeIn' }, { name: 'astroSlideFromLeft' }]
- }
+ new: [{ name: 'astroFadeIn' }, { name: 'astroSlideFromLeft' }],
+ },
};
}
export function fade({
- duration
+ duration,
}: {
duration?: string | number;
} = {}): TransitionDirectionalAnimations {
@@ -55,7 +61,7 @@ export function fade({
duration: duration ?? '0.3s',
easing: 'linear',
fillMode: 'backwards',
- }
+ },
} satisfies TransitionAnimationPair;
return {
diff --git a/packages/astro/src/transitions/vite-plugin-transitions.ts b/packages/astro/src/transitions/vite-plugin-transitions.ts
index 891d5a22f..9803be211 100644
--- a/packages/astro/src/transitions/vite-plugin-transitions.ts
+++ b/packages/astro/src/transitions/vite-plugin-transitions.ts
@@ -1,12 +1,12 @@
-import type { AstroConfig } from '../@types/astro';
import * as vite from 'vite';
+import type { AstroConfig } from '../@types/astro';
import { AstroError } from '../core/errors/index.js';
const virtualModuleId = 'astro:transitions';
const resolvedVirtualModuleId = '\0' + virtualModuleId;
// The virtual module for the astro:transitions namespace
-export default function astroTransitions({ config }: { config: AstroConfig; }): vite.Plugin {
+export default function astroTransitions({ config }: { config: AstroConfig }): vite.Plugin {
return {
name: 'astro:transitions',
async resolveId(id) {
@@ -16,7 +16,7 @@ export default function astroTransitions({ config }: { config: AstroConfig; }):
},
load(id) {
if (id === resolvedVirtualModuleId) {
- if(!config.experimental.viewTransitions) {
+ if (!config.experimental.viewTransitions) {
throw new AstroError({
title: 'Experimental View Transitions not enabled',
message: `View Transitions support is experimental. To enable update your config to include:
@@ -25,7 +25,7 @@ export default defineConfig({
experimental: {
viewTransitions: true
}
-})`
+})`,
});
}
diff --git a/packages/astro/test/units/compile/invalid-css.test.js b/packages/astro/test/units/compile/invalid-css.test.js
index db892b5bf..7a0303437 100644
--- a/packages/astro/test/units/compile/invalid-css.test.js
+++ b/packages/astro/test/units/compile/invalid-css.test.js
@@ -12,7 +12,7 @@ describe('astro/src/core/compile', () => {
await cachedCompilation({
astroConfig: {
root: pathToFileURL('/'),
- experimental: {}
+ experimental: {},
},
viteConfig: await resolveConfig({ configFile: false }, 'serve'),
filename: '/src/pages/index.astro',