hack(inline stylesheets testing): duplicate fixtures

Content collections reuses build data across multiple fixture.builds, even though a configuration change may have changed it.
Duplicating fixtures avoids usage of the stale cache.
https://cdn.discordapp.com/attachments/1039830843440504872/1097795182340092024/Screenshot_87_colored.png

packages/astro/test/css-inline-stylesheets.js

@@ -8,7 +8,7 @@ describe('Setting inlineStylesheets to never in static output', () => {
 
 	before(async () => {
 		fixture = await loadFixture({
-			root: './fixtures/css-inline-stylesheets/',
+			root: './fixtures/css-inline-stylesheets/never/',
 			output: 'static',
 			experimental: {
 				inlineStylesheets: 'never',
@@ -41,7 +41,7 @@ describe('Setting inlineStylesheets to never in server output', () => {
 
 	before(async () => {
 		const fixture = await loadFixture({
-			root: './fixtures/css-inline-stylesheets/',
+			root: './fixtures/css-inline-stylesheets/never/',
 			output: 'server',
 			adapter: testAdapter(),
 			experimental: {
@@ -77,7 +77,7 @@ describe('Setting inlineStylesheets to auto in static output', () => {
 
 	before(async () => {
 		fixture = await loadFixture({
-			root: './fixtures/css-inline-stylesheets/',
+			root: './fixtures/css-inline-stylesheets/auto/',
 			output: 'static',
 			experimental: {
 				inlineStylesheets: 'auto',
@@ -117,7 +117,7 @@ describe('Setting inlineStylesheets to auto in server output', () => {
 
 	before(async () => {
 		const fixture = await loadFixture({
-			root: './fixtures/css-inline-stylesheets/',
+			root: './fixtures/css-inline-stylesheets/auto/',
 			output: 'server',
 			adapter: testAdapter(),
 			experimental: {
@@ -161,7 +161,7 @@ describe('Setting inlineStylesheets to always in static output', () => {
 
 	before(async () => {
 		fixture = await loadFixture({
-			root: './fixtures/css-inline-stylesheets/',
+			root: './fixtures/css-inline-stylesheets/always/',
 			output: 'static',
 			experimental: {
 				inlineStylesheets: 'always',
@@ -193,7 +193,7 @@ describe('Setting inlineStylesheets to always in server output', () => {
 
 	before(async () => {
 		const fixture = await loadFixture({
-			root: './fixtures/css-inline-stylesheets/',
+			root: './fixtures/css-inline-stylesheets/always/',
 			output: 'server',
 			adapter: testAdapter(),
 			experimental: {

packages/astro/test/fixtures/css-inline-stylesheets/auto/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@test/css-inline-stylesheets",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/test/fixtures/css-inline-stylesheets/auto/src/components/Button.astro

@@ -0,0 +1,86 @@
+---
+const { class: className = '', style, href } = Astro.props;
+const { variant = 'primary' } = Astro.props;
+---
+
+<span class:list={[`link pixel variant-${variant}`, className]} >
+	<a {href}>
+		<span><slot /></span>
+	</a>
+</span>
+
+<style>
+	.link {
+		--border-radius: 8;
+		--duration: 200ms;
+		--delay: 30ms;
+		--background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b));
+		display: flex;
+		color: white;
+		font-size: 1.25rem;
+		width: max-content;
+	}
+	a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.67rem 1.25rem;
+		width: 100%;
+		height: 100%;
+		text-decoration: none;
+		color: inherit !important;
+		/* Indicates the button boundaries for forced colors users in older browsers */
+		outline: 1px solid transparent;
+	}
+
+	@media (forced-colors: active) {
+		a {
+			border: 1px solid LinkText;
+		}
+	}
+
+	a > :global(* + *) {
+		margin-inline-start: 0.25rem;
+	}
+
+	.variant-primary {
+		--variant: primary;
+		--background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b));
+	}
+	.variant-primary:hover,
+	.variant-primary:focus-within {
+		--link-color-stop-a: #6d39ff;
+		--link-color-stop-b: #af43ff;
+	}
+	.variant-primary:active {
+		--link-color-stop-a: #5f31e1;
+		--link-color-stop-b: #a740f3;
+	}
+
+	.variant-outline {
+		--variant: outline;
+		--background: none;
+		color: var(--background);
+	}
+	.variant-outline > a::before {
+		position: absolute;
+		top: 0;
+		right: calc(var(--pixel-size) * 1px);
+		bottom: calc(var(--pixel-size) * 1px);
+		left: calc(var(--pixel-size) * 1px);
+		content: '';
+		display: block;
+		transform-origin: bottom center;
+		background: linear-gradient(to top, var(--background), rgba(255, 255, 255, 0));
+		opacity: 0.3;
+		transform: scaleY(0);
+		transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	.variant-outline:hover > a::before,
+	.variant-outline:focus-within > a::before {
+		transform: scaleY(1);
+	}
+	.variant-outline:active > a::before {
+		transform: scaleY(1);
+	}
+</style>

packages/astro/test/fixtures/css-inline-stylesheets/auto/src/content/en/endeavour.md

@@ -0,0 +1,15 @@
+---
+title: Endeavour
+description: 'Learn about the Endeavour NASA space shuttle.'
+publishedDate: 'Sun Jul 11 2021 00:00:00 GMT-0400 (Eastern Daylight Time)'
+layout: '../../layouts/Layout.astro'
+tags: [space, 90s]
+---
+
+**Source:** [Wikipedia](https://en.wikipedia.org/wiki/Space_Shuttle_Endeavour)
+
+Space Shuttle Endeavour (Orbiter Vehicle Designation: OV-105) is a retired orbiter from NASA's Space Shuttle program and the fifth and final operational Shuttle built. It embarked on its first mission, STS-49, in May 1992 and its 25th and final mission, STS-134, in May 2011. STS-134 was expected to be the final mission of the Space Shuttle program, but with the authorization of STS-135, Atlantis became the last shuttle to fly.
+
+The United States Congress approved the construction of Endeavour in 1987 to replace the Space Shuttle Challenger, which was destroyed in 1986.
+
+NASA chose, on cost grounds, to build much of Endeavour from spare parts rather than refitting the Space Shuttle Enterprise, and used structural spares built during the construction of Discovery and Atlantis in its assembly.

packages/astro/test/fixtures/css-inline-stylesheets/auto/src/imported.css

@@ -0,0 +1,15 @@
+.bg-skyblue {
+    background: skyblue;
+}
+
+.bg-lightcoral {
+    background: lightcoral;
+}
+
+.red {
+    color: darkred;
+}
+
+.blue {
+    color: royalblue;
+}

packages/astro/test/fixtures/css-inline-stylesheets/auto/src/layouts/Layout.astro

@@ -0,0 +1,35 @@
+---
+import '../imported.css';
+import Button from '../components/Button.astro';
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<Button>Button used in layout</Button>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	html {
+		font-family: system-ui, sans-serif;
+		background-color: #F6F6F6;
+	}
+	code {
+		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+			Bitstream Vera Sans Mono, Courier New, monospace;
+	}
+</style>

packages/astro/test/fixtures/css-inline-stylesheets/auto/src/pages/index.astro

@@ -0,0 +1,17 @@
+---
+import Button from '../components/Button.astro';
+import { getEntryBySlug } from 'astro:content';
+
+const entry = await getEntryBySlug('en', 'endeavour');
+const { Content } = await entry.render();
+---
+<style>
+    #welcome::after {
+        content: '🚀'
+    }
+</style>
+<main>
+    <h1 id="welcome">Welcome to Astro</h1>
+    <Content/>
+    <Button>Button used directly in page</Button>
+</main>

packages/astro/test/fixtures/css-inline-stylesheets/never/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@test/css-inline-stylesheets",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/test/fixtures/css-inline-stylesheets/never/src/components/Button.astro

@@ -0,0 +1,86 @@
+---
+const { class: className = '', style, href } = Astro.props;
+const { variant = 'primary' } = Astro.props;
+---
+
+<span class:list={[`link pixel variant-${variant}`, className]} >
+	<a {href}>
+		<span><slot /></span>
+	</a>
+</span>
+
+<style>
+	.link {
+		--border-radius: 8;
+		--duration: 200ms;
+		--delay: 30ms;
+		--background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b));
+		display: flex;
+		color: white;
+		font-size: 1.25rem;
+		width: max-content;
+	}
+	a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.67rem 1.25rem;
+		width: 100%;
+		height: 100%;
+		text-decoration: none;
+		color: inherit !important;
+		/* Indicates the button boundaries for forced colors users in older browsers */
+		outline: 1px solid transparent;
+	}
+
+	@media (forced-colors: active) {
+		a {
+			border: 1px solid LinkText;
+		}
+	}
+
+	a > :global(* + *) {
+		margin-inline-start: 0.25rem;
+	}
+
+	.variant-primary {
+		--variant: primary;
+		--background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b));
+	}
+	.variant-primary:hover,
+	.variant-primary:focus-within {
+		--link-color-stop-a: #6d39ff;
+		--link-color-stop-b: #af43ff;
+	}
+	.variant-primary:active {
+		--link-color-stop-a: #5f31e1;
+		--link-color-stop-b: #a740f3;
+	}
+
+	.variant-outline {
+		--variant: outline;
+		--background: none;
+		color: var(--background);
+	}
+	.variant-outline > a::before {
+		position: absolute;
+		top: 0;
+		right: calc(var(--pixel-size) * 1px);
+		bottom: calc(var(--pixel-size) * 1px);
+		left: calc(var(--pixel-size) * 1px);
+		content: '';
+		display: block;
+		transform-origin: bottom center;
+		background: linear-gradient(to top, var(--background), rgba(255, 255, 255, 0));
+		opacity: 0.3;
+		transform: scaleY(0);
+		transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	.variant-outline:hover > a::before,
+	.variant-outline:focus-within > a::before {
+		transform: scaleY(1);
+	}
+	.variant-outline:active > a::before {
+		transform: scaleY(1);
+	}
+</style>

packages/astro/test/fixtures/css-inline-stylesheets/never/src/content/en/endeavour.md

@@ -0,0 +1,15 @@
+---
+title: Endeavour
+description: 'Learn about the Endeavour NASA space shuttle.'
+publishedDate: 'Sun Jul 11 2021 00:00:00 GMT-0400 (Eastern Daylight Time)'
+layout: '../../layouts/Layout.astro'
+tags: [space, 90s]
+---
+
+**Source:** [Wikipedia](https://en.wikipedia.org/wiki/Space_Shuttle_Endeavour)
+
+Space Shuttle Endeavour (Orbiter Vehicle Designation: OV-105) is a retired orbiter from NASA's Space Shuttle program and the fifth and final operational Shuttle built. It embarked on its first mission, STS-49, in May 1992 and its 25th and final mission, STS-134, in May 2011. STS-134 was expected to be the final mission of the Space Shuttle program, but with the authorization of STS-135, Atlantis became the last shuttle to fly.
+
+The United States Congress approved the construction of Endeavour in 1987 to replace the Space Shuttle Challenger, which was destroyed in 1986.
+
+NASA chose, on cost grounds, to build much of Endeavour from spare parts rather than refitting the Space Shuttle Enterprise, and used structural spares built during the construction of Discovery and Atlantis in its assembly.

packages/astro/test/fixtures/css-inline-stylesheets/never/src/imported.css

@@ -0,0 +1,15 @@
+.bg-skyblue {
+    background: skyblue;
+}
+
+.bg-lightcoral {
+    background: lightcoral;
+}
+
+.red {
+    color: darkred;
+}
+
+.blue {
+    color: royalblue;
+}