feature: configuration for css inlining behavior #6659

lilnasy · 2023-03-26T02:44:29Z

Changes

Major points of review:

adds an experimental configuration option: AstroConfig.experimental.inlineStylesheets :

| "never"  // all styles necessary are sent in external stylsheets (default, follows current behavior)

| "auto"   // stylesheets smaller than `ViteConfig.build.assetsInlineLimit` (default: 4kb) are inlined

| "always" // all styles necessary are inlined into <style> tags

css ordering: head rendering was refactored to allow styles to be ordered across <link> (external) and <style> (inline) tags
cleanup: there are various places where links-related utility functions are now redundant

Testing

Docs

Docs changes will be required regarding the addition of a configuration option.

changeset-bot · 2023-03-26T02:44:33Z

🦋 Changeset detected

Latest commit: a73490c

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

lilnasy · 2023-04-05T02:26:40Z

@matthewp could I get some feedback on this?

lilnasy · 2023-04-05T21:55:06Z

!preview css-inline

github-actions · 2023-04-05T21:55:52Z

 > root@0.0.0 release /home/runner/work/astro/astro > pnpm run build && changeset publish "--tag" "next--css-inline" > root@0.0.0 build /home/runner/work/astro/astro > turbo run build --output-logs=new-only --no-deps --filter=astro --filter=create-astro --filter="@astrojs/*" --filter="@benchmark/*" �[2m• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/deno, @astrojs/image, @astrojs/lit, @astrojs/markdoc, @astrojs/markdown-component, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prefetch, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/turbolinks, @astrojs/vercel, @astrojs/vue, @astrojs/webapi, @benchmark/timer, astro, create-astro�[0m �[2m• Running�[0m �[2m�[1mbuild�[0m�[0m �[2min 29 packages�[0m �[2m• Remote computation caching enabled (experimental)�[0m �[35m@astrojs/webapi:build: �[0mcache hit, suppressing output �[2mf58dda448cea071b�[0m �[34mcreate-astro:build: �[0mcache hit, suppressing output �[2m4282de9dc8fd3d7f�[0m �[33m@astrojs/telemetry:build: �[0mcache hit, suppressing output �[2m1a61335e422643f6�[0m �[36m@astrojs/prism:build: �[0mcache hit, suppressing output �[2ma7ce1b8cd0d20c9e�[0m �[35m@astrojs/markdown-remark:build: �[0mcache hit, suppressing output �[2md62fcf6af591535d�[0m �[32mastro:build: �[0mcache hit, suppressing output �[2m450b76fe0b020ca1�[0m �[36m@astrojs/tailwind:build: �[0mcache hit, suppressing output �[2m7d9ed836418b0d63�[0m �[33m@astrojs/solid-js:build: �[0mcache hit, suppressing output �[2mf71aeae6f9c0a395�[0m �[34m@astrojs/turbolinks:build: �[0mcache hit, suppressing output �[2m32d90b2c09f465bf�[0m �[33m@astrojs/mdx:build: �[0mcache hit, suppressing output �[2m3d1a155f529a2f4c�[0m �[36m@astrojs/cloudflare:build: �[0mcache hit, suppressing output �[2me50473d412a9783c�[0m �[36m@astrojs/deno:build: �[0mcache hit, suppressing output �[2m1ba6c9c9f29b9fc7�[0m �[33m@astrojs/svelte:build: �[0mcache hit, suppressing output �[2me50a8be6ae9065d1�[0m �[35m@astrojs/partytown:build: �[0mcache hit, suppressing output �[2m534da91c55f68cbe�[0m �[35m@astrojs/netlify:build: �[0mcache hit, suppressing output �[2m43a95df2dc7b4e98�[0m �[35m@benchmark/timer:build: �[0mcache hit, suppressing output �[2m51d4c4f5116ac4e5�[0m �[32m@astrojs/vue:build: �[0mcache hit, suppressing output �[2m680494d61780665a�[0m �[34m@astrojs/lit:build: �[0mcache hit, suppressing output �[2mc78d5c5e80aba466�[0m �[36m@astrojs/rss:build: �[0mcache hit, suppressing output �[2m88105d7ba372e9b9�[0m �[36m@astrojs/preact:build: �[0mcache hit, suppressing output �[2mcc37a92f93319dca�[0m �[34m@astrojs/alpinejs:build: �[0mcache hit, suppressing output �[2m2e1074590c69b6d4�[0m �[34m@astrojs/vercel:build: �[0mcache hit, suppressing output �[2ma21e3d70b055d45a�[0m �[33m@astrojs/react:build: �[0mcache hit, suppressing output �[2mf41031bc7645ca49�[0m �[32m@astrojs/node:build: �[0mcache hit, suppressing output �[2md6e6b3dd8e968b06�[0m �[34m@astrojs/prefetch:build: �[0mcache hit, suppressing output �[2mf25b10d9c60a0cc1�[0m �[35m@astrojs/markdoc:build: �[0mcache hit, suppressing output �[2m92e3ff1c54a3d71a�[0m �[32m@astrojs/sitemap:build: �[0mcache hit, suppressing output �[2mc9e1e410513cb806�[0m �[32m@astrojs/image:build: �[0mcache hit, suppressing output �[2m9b991ed53b50fd79�[0m Tasks: 28 successful, 28 total Cached: 28 cached, 28 total Time: 327ms �[1m�[38;2;18;45;128m>�[0m�[0;1m�[1m�[38;2;4;45;162m>�[0m�[0;1m�[1m�[38;2;1;45;194m>�[0m�[0;1m�[1m�[38;2;6;45;221m �[0m�[0;1m�[1m�[38;2;21;45;241mF�[0m�[0;1m�[1m�[38;2;44;45;252mU�[0m�[0;1m�[1m�[38;2;73;45;254mL�[0m�[0;1m�[1m�[38;2;106;45;247mL�[0m�[0;1m�[1m�[38;2;141;45;230m �[0m�[0;1m�[1m�[38;2;175;45;206mT�[0m�[0;1m�[1m�[38;2;205;45;176mU�[0m�[0;1m�[1m�[38;2;229;45;142mR�[0m�[0;1m�[1m�[38;2;246;45;107mB�[0m�[0;1m�[1m�[38;2;254;45;74mO�[0m�[0;1m 🦋 �[33mwarn�[39m �[31m===============================IMPORTANT!===============================�[39m 🦋 �[33mwarn�[39m Packages will be released under the next--css-inline tag 🦋 �[33mwarn�[39m �[31m----------------------------------------------------------------------�[39m 🦋 �[36minfo�[39m npm info astro 🦋 �[36minfo�[39m npm info @astrojs/prism 🦋 �[36minfo�[39m npm info @astrojs/rss 🦋 �[36minfo�[39m npm info create-astro 🦋 �[36minfo�[39m npm info @astrojs/alpinejs 🦋 �[36minfo�[39m npm info @astrojs/cloudflare 🦋 �[36minfo�[39m npm info @astrojs/deno 🦋 �[36minfo�[39m npm info @astrojs/image 🦋 �[36minfo�[39m npm info @astrojs/lit 🦋 �[36minfo�[39m npm info @astrojs/markdoc 🦋 �[36minfo�[39m npm info @astrojs/mdx 🦋 �[36minfo�[39m npm info @astrojs/netlify 🦋 �[36minfo�[39m npm info @astrojs/node 🦋 �[36minfo�[39m npm info @astrojs/partytown 🦋 �[36minfo�[39m npm info @astrojs/preact 🦋 �[36minfo�[39m npm info @astrojs/prefetch 🦋 �[36minfo�[39m npm info @astrojs/react 🦋 �[36minfo�[39m npm info @astrojs/sitemap 🦋 �[36minfo�[39m npm info @astrojs/solid-js 🦋 �[36minfo�[39m npm info @astrojs/svelte 🦋 �[36minfo�[39m npm info @astrojs/tailwind 🦋 �[36minfo�[39m npm info @astrojs/turbolinks 🦋 �[36minfo�[39m npm info @astrojs/vercel 🦋 �[36minfo�[39m npm info @astrojs/vue 🦋 �[36minfo�[39m npm info @astrojs/markdown-component 🦋 �[36minfo�[39m npm info @astrojs/markdown-remark 🦋 �[36minfo�[39m npm info @astrojs/telemetry 🦋 �[36minfo�[39m npm info @astrojs/webapi 🦋 �[33mwarn�[39m astro is not being published because version 2.2.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/prism is not being published because version 2.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/rss is not being published because version 2.3.2 is already published on npm 🦋 �[33mwarn�[39m create-astro is not being published because version 3.1.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/alpinejs is not being published because version 0.2.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/cloudflare is not being published because version 6.2.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/deno is not being published because version 4.1.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/image is not being published because version 0.16.5 is already published on npm 🦋 �[33mwarn�[39m @astrojs/lit is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdoc is not being published because version 0.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/mdx is not being published because version 0.18.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/netlify is not being published because version 2.2.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/node is not being published because version 5.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/partytown is not being published because version 1.2.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/preact is not being published because version 2.1.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/prefetch is not being published because version 0.2.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/react is not being published because version 2.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/sitemap is not being published because version 1.2.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/solid-js is not being published because version 2.1.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/svelte is not being published because version 2.1.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/tailwind is not being published because version 3.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/turbolinks is not being published because version 0.2.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/vercel is not being published because version 3.2.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/vue is not being published because version 2.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-component is not being published because version 1.0.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-remark is not being published because version 2.1.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/telemetry is not being published because version 2.1.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/webapi is not being published because version 2.1.0 is already published on npm 🦋 �[33mwarn�[39m No unpublished packages to publish

packages/astro/src/@types/astro.ts

matthewp · 2023-04-26T16:20:47Z

@lilnasy Heads up that we are planning our next minor release next week (next Thursday). If this PR is ready it could go out then. No rush though, thanks!

lilnasy · 2023-04-26T16:21:50Z

@matthewp it's all done

matthewp

Blocked as this is a minor. Block will be released when the next release occurs.

matthewp

This looks really great. I appreciate the amount of work this took and how thorough you were with testing and everything else.

lilnasy · 2023-04-26T23:23:06Z

@matthewp I found a mistake in one of the tests I wrote. I'd prefer to rebase and keep the commit history clean, but I'm hesitating because the review is done. Is rebasing now fine?

matthewp · 2023-04-26T23:37:57Z

When PRs get merged they are squashed into a single commit. So you can just push new commits.

bluwy

Thanks for implementing this! I have a few nits/questions below that I'd love your thoughts on

bluwy · 2023-05-03T12:37:02Z

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

I think this file should be named with .test.js. About the fixtures, could they all share a single project at ./fixtures/css-inline-stylesheets instead of ./fixtures/css-inline-stylesheet/(always|auto|never)? They seem to contain the same files and it would be easier to maintain if they're combined.

From discord, there's a weird caching issue when sharing a single fixture, so keeping as is for now. For the test name, I handled it at #6983

packages/astro/src/core/build/internal.ts

packages/astro/src/core/build/plugins/plugin-css.ts

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

Chrome, but not Safari or Firefox, is slower to match rules when they are split across multiple files or style tags. https://nolanlawson.com/2022/06/22/style-scoping-versus-shadow-dom-which-is-fastest/ Having the abiility to inline stylesheets opens us up to this optimization. Ideally, it would extend to propagated styles, but that ended up being a rabbit hole.

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Mar 26, 2023

lilnasy force-pushed the main branch 2 times, most recently from 55e1a14 to 350446c Compare March 28, 2023 16:22

lilnasy marked this pull request as draft March 28, 2023 16:27

lilnasy force-pushed the main branch 4 times, most recently from a8fa467 to 4475b42 Compare March 29, 2023 15:14

lilnasy marked this pull request as ready for review March 29, 2023 15:36

lilnasy force-pushed the main branch 4 times, most recently from 37500b5 to 3114f61 Compare April 4, 2023 21:05

lilnasy changed the title ~~feature: inlineStylesheet configuration option~~ feature: configuration for css inlining behavior Apr 5, 2023

lilnasy force-pushed the main branch 2 times, most recently from 37500b5 to fb8b77c Compare April 5, 2023 21:53

lilnasy requested a review from a team as a code owner April 5, 2023 21:53

lilnasy force-pushed the main branch 2 times, most recently from 16314db to b870620 Compare April 13, 2023 05:17

lilnasy commented Apr 13, 2023

View reviewed changes

packages/astro/src/@types/astro.ts Outdated Show resolved Hide resolved

matthewp mentioned this pull request Apr 14, 2023

CSS Inlining withastro/roadmap#556

Closed

lilnasy force-pushed the main branch 4 times, most recently from 7398995 to 033831c Compare April 18, 2023 17:48

thdoan mentioned this pull request Apr 22, 2023

Page works as expected in dev, but not production build #6888

Closed

1 task

lilnasy force-pushed the main branch from f931047 to 52ad8e3 Compare April 26, 2023 17:24

matthewp requested changes Apr 26, 2023

View reviewed changes

matthewp approved these changes Apr 26, 2023

View reviewed changes

lilnasy force-pushed the main branch 3 times, most recently from c207c40 to 4d2cb94 Compare May 2, 2023 17:35

bluwy reviewed May 3, 2023

View reviewed changes

lilnasy force-pushed the main branch from c1f1c80 to cf14427 Compare May 3, 2023 16:14

lilnasy and others added 13 commits May 3, 2023 23:22

feature(inline stylesheets): implement as experimental

4ea9bf7

test: rename css-inline -> css-import-as-inline

bf1665f

test(content collections): add de-duplication of css

a4ce6db

test: add new suite for inlineStylesheets configuration

513e230

fix(inline stylesheets): did not act on propagated styles

c64b00c

refactor(css plugin): reduce nesting

c2bafa1

typedocs(inlineStylesheets config): ensure consistency

f73c5ed

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

chore(build internals): update comment

b17e3ce

correct minor mistake in test

12a7c6c

test(inline stylesheets): unique package names for duplicate fixtures

9c9035f

refactor(css build plugin): maps -> records

1411687

lilnasy force-pushed the main branch from ec580af to 1411687 Compare May 3, 2023 17:53

refactor(css build plugin): remove use of spread operator

a73490c

matthewp merged commit 80e3d4d into withastro:main May 3, 2023

astrobot-houston mentioned this pull request May 3, 2023

[ci] release #6977

Merged

ArmandPhilippot mentioned this pull request Jan 7, 2026

fix(integrations-reference): replace source code links with proper docs withastro/docs#13021

Merged

Uh oh!

feature: configuration for css inlining behavior #6659

feature: configuration for css inlining behavior #6659

Uh oh!

Conversation

lilnasy commented Mar 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Major points of review:

Testing

Docs

Uh oh!

changeset-bot bot commented Mar 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

lilnasy commented Apr 5, 2023

Uh oh!

lilnasy commented Apr 5, 2023

Uh oh!

github-actions bot commented Apr 5, 2023

Uh oh!

Uh oh!

matthewp commented Apr 26, 2023

Uh oh!

lilnasy commented Apr 26, 2023

Uh oh!

matthewp left a comment

Choose a reason for hiding this comment

Uh oh!

matthewp left a comment

Choose a reason for hiding this comment

Uh oh!

lilnasy commented Apr 26, 2023

Uh oh!

matthewp commented Apr 26, 2023

Uh oh!

bluwy left a comment

Choose a reason for hiding this comment

Uh oh!

bluwy May 3, 2023

Choose a reason for hiding this comment

Uh oh!

bluwy May 4, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

lilnasy commented Mar 26, 2023 •

edited

Loading

changeset-bot bot commented Mar 26, 2023 •

edited

Loading