From 80e3d4d3d0f7719d8eae5435bba3805503057511 Mon Sep 17 00:00:00 2001
From: Arsh <69170106+lilnasy@users.noreply.github.com>
Date: Thu, 4 May 2023 00:19:06 +0530
Subject: [PATCH] feature: configuration for css inlining behavior (#6659)
* feature(inline stylesheets): implement as experimental
* test: rename css-inline -> css-import-as-inline
* test(content collections): add de-duplication of css
* test: add new suite for inlineStylesheets configuration
* fix(inline stylesheets): did not act on propagated styles
* 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
* refactor(css plugin): reduce nesting
* optimization(css rendering): merge
+{title}
+ H3 inserted in the layout
{blog.map((post) => (
diff --git a/packages/astro/test/fixtures/content/src/pages/with-layout-prop.astro b/packages/astro/test/fixtures/content/src/pages/with-layout-prop.astro
index 672430ab54..4cbb876242 100644
--- a/packages/astro/test/fixtures/content/src/pages/with-layout-prop.astro
+++ b/packages/astro/test/fixtures/content/src/pages/with-layout-prop.astro
@@ -1,7 +1,9 @@
---
import { getEntryBySlug } from 'astro:content';
+import H3 from '../components/H3.astro';
const entry = await getEntryBySlug('blog', 'with-layout-prop');
const { Content } = await entry.render();
---
-H3 directly inserted to the page
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/always/src/content/en/endeavour.md b/packages/astro/test/fixtures/css-inline-stylesheets/always/src/content/en/endeavour.md
new file mode 100644
index 0000000000..240eeeae39
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets/always/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.
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/always/src/imported.css b/packages/astro/test/fixtures/css-inline-stylesheets/always/src/imported.css
new file mode 100644
index 0000000000..3959523ff1
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets/always/src/imported.css
@@ -0,0 +1,15 @@
+.bg-skyblue {
+ background: skyblue;
+}
+
+.bg-lightcoral {
+ background: lightcoral;
+}
+
+.red {
+ color: darkred;
+}
+
+.blue {
+ color: royalblue;
+}
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/always/src/layouts/Layout.astro b/packages/astro/test/fixtures/css-inline-stylesheets/always/src/layouts/Layout.astro
new file mode 100644
index 0000000000..b78de296ce
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets/always/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;
+---
+
+
+
+
+ {title}
+
+
+ Button used in layout
+
+ Welcome to Astro
+ Button used directly in page
+
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/auto/package.json b/packages/astro/test/fixtures/css-inline-stylesheets/auto/package.json
new file mode 100644
index 0000000000..3eb8e9d512
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets/auto/package.json
@@ -0,0 +1,8 @@
+{
+ "name": "@test/css-inline-stylesheets-auto",
+ "version": "0.0.0",
+ "private": true,
+ "dependencies": {
+ "astro": "workspace:*"
+ }
+}
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/auto/src/components/Button.astro b/packages/astro/test/fixtures/css-inline-stylesheets/auto/src/components/Button.astro
new file mode 100644
index 0000000000..3f25cbd3e3
--- /dev/null
+++ b/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;
+---
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/auto/src/content/en/endeavour.md b/packages/astro/test/fixtures/css-inline-stylesheets/auto/src/content/en/endeavour.md
new file mode 100644
index 0000000000..240eeeae39
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/auto/src/imported.css b/packages/astro/test/fixtures/css-inline-stylesheets/auto/src/imported.css
new file mode 100644
index 0000000000..3959523ff1
--- /dev/null
+++ b/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;
+}
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/auto/src/layouts/Layout.astro b/packages/astro/test/fixtures/css-inline-stylesheets/auto/src/layouts/Layout.astro
new file mode 100644
index 0000000000..b78de296ce
--- /dev/null
+++ b/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;
+---
+
+
+
+
+ {title}
+
+
+ Button used in layout
+
+ Welcome to Astro
+ Button used directly in page
+
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/never/package.json b/packages/astro/test/fixtures/css-inline-stylesheets/never/package.json
new file mode 100644
index 0000000000..382288fbc1
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets/never/package.json
@@ -0,0 +1,8 @@
+{
+ "name": "@test/css-inline-stylesheets-never",
+ "version": "0.0.0",
+ "private": true,
+ "dependencies": {
+ "astro": "workspace:*"
+ }
+}
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/never/src/components/Button.astro b/packages/astro/test/fixtures/css-inline-stylesheets/never/src/components/Button.astro
new file mode 100644
index 0000000000..3f25cbd3e3
--- /dev/null
+++ b/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;
+---
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/never/src/content/en/endeavour.md b/packages/astro/test/fixtures/css-inline-stylesheets/never/src/content/en/endeavour.md
new file mode 100644
index 0000000000..240eeeae39
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/never/src/imported.css b/packages/astro/test/fixtures/css-inline-stylesheets/never/src/imported.css
new file mode 100644
index 0000000000..3959523ff1
--- /dev/null
+++ b/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;
+}
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets/never/src/layouts/Layout.astro b/packages/astro/test/fixtures/css-inline-stylesheets/never/src/layouts/Layout.astro
new file mode 100644
index 0000000000..b78de296ce
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets/never/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;
+---
+
+
+
+
+ {title}
+
+
+ Button used in layout
+
+ Welcome to Astro
+ Button used directly in page
+
diff --git a/packages/astro/test/units/dev/head-injection.test.js b/packages/astro/test/units/dev/head-injection.test.js
index 9d76e0a911..ed3e085d3f 100644
--- a/packages/astro/test/units/dev/head-injection.test.js
+++ b/packages/astro/test/units/dev/head-injection.test.js
@@ -35,7 +35,8 @@ describe('head injection', () => {
factory(result, props, slots) {
return createHeadAndContent(
unescapeHTML(renderUniqueStylesheet(result, {
- href: '/some/fake/styles.css'
+ type: 'external',
+ src: '/some/fake/styles.css'
})),
renderTemplate\`$\{renderComponent(result, 'Other', Other, props, slots)}\`
);
@@ -113,7 +114,8 @@ describe('head injection', () => {
factory(result, props, slots) {
return createHeadAndContent(
unescapeHTML(renderUniqueStylesheet(result, {
- href: '/some/fake/styles.css'
+ type: 'external',
+ src: '/some/fake/styles.css'
})),
renderTemplate\`$\{renderComponent(result, 'Other', Other, props, slots)}\`
);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 972bf93844..83629c3105 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2408,12 +2408,30 @@ importers:
packages/astro/test/fixtures/css-assets/packages/font-awesome: {}
- packages/astro/test/fixtures/css-inline:
+ packages/astro/test/fixtures/css-import-as-inline:
dependencies:
astro:
specifier: workspace:*
version: link:../../..
+ packages/astro/test/fixtures/css-inline-stylesheets/always:
+ dependencies:
+ astro:
+ specifier: workspace:*
+ version: link:../../../..
+
+ packages/astro/test/fixtures/css-inline-stylesheets/auto:
+ dependencies:
+ astro:
+ specifier: workspace:*
+ version: link:../../../..
+
+ packages/astro/test/fixtures/css-inline-stylesheets/never:
+ dependencies:
+ astro:
+ specifier: workspace:*
+ version: link:../../../..
+
packages/astro/test/fixtures/css-no-code-split:
dependencies:
astro: