Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Adds print styles for Starlight docs pages #157

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

tony-sull
Copy link

What kind of changes does this PR include?

  • Changes to Starlight code
  • Something else!

Description

  • Adds print-specific styles for pages built with Starlight
  • Hides navigation elements like the sidebars, search, and mobile menu
  • Forces the light theme color palette when printing

@changeset-bot
Copy link

changeset-bot bot commented Jun 5, 2023

⚠️ No Changeset found

Latest commit: bc290f6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@netlify
Copy link

netlify bot commented Jun 5, 2023

Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit bc290f6
🔍 Latest deploy log https://app.netlify.com/sites/astro-starlight/deploys/6491efb900f85e000856d18e
😎 Deploy Preview https://deploy-preview-157--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@astrobot-houston
Copy link
Collaborator

astrobot-houston commented Jun 5, 2023

size-limit report 📦

Path Size
/index.html 14.7 KB (+11.55% 🔺)
/_astro/*.js 16.6 KB (0%)
/_astro/*.css 9.09 KB (0%)

@delucis delucis added the 🌟 minor Change that triggers a minor release label Jun 8, 2023
@tony-sull tony-sull marked this pull request as ready for review June 9, 2023 15:13
@tony-sull tony-sull requested a review from delucis June 9, 2023 15:13
@tony-sull
Copy link
Author

@delucis thoughts on whether this feature is worth merging or should I close it?

I'm still a bit torn on the increase in bundled CSS versus pulling all print styles out to a global print.css file. We could definitely move the styles out of layouts/components to avoid the bundle size increase, as long as the core layout doesn't change too much it really shouldn't be too risky since the changes are largely just hiding navigation elements.

@delucis
Copy link
Member

delucis commented Jun 19, 2023

I think my preference is likely for pulling this out to a separate global file to avoid extra downloads. (We’d need a ?url import I’d guess to pass that to the appropriately configured style tag.)

I am a bit torn because as you highlighted, that does come with extra maintenance complexity. Especially as this is exactly the kind of thing we’re likely to forget to check as we add stuff 😅 That said, most stuff is done pretty safely via print:hidden, so we should be OK with that approach?

(There’s a chance even doing that will fail the CI check here — it’s a bit of a rough tool at the moment, just globbing dist/*.css and measuring that gzipped, so even CSS that doesn’t actually get loaded is liable to get taken into account. Tried another approach and found it unreliable, but this is definitely on a list of tooling to improve.)

Let me know if you’re happy doing that or if you’d prefer me to tackle!

@delucis delucis added the 🌟 core Changes to Starlight’s main package label Jun 20, 2023
@tony-sull
Copy link
Author

@delucis Yep that's no problem, I'll refactor that this morning and pull the styles out into a global sheet 👍

@tony-sull
Copy link
Author

@delucis done! Everything is moved out to the separate print.css file

Looks like the HTML size-limit is failing by ~1kb, that should just be from the extra print: class names + the stylesheet <link>

@@ -32,6 +32,8 @@ import './style/asides.css';
// Important that this is the last import so it can override built-in styles.
import 'virtual:starlight/user-css';

import printHref from './style/print.css?url';
Copy link
Member

@delucis delucis Jun 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hah, looks like this is under Vite’s inline assets limit, so is getting inlined as a data URI in the build output 😅

<link rel="stylesheet" href="[data:text/css;base64,OnJvb3QsCjo6YmFja2Ryb3AgewogIC8qIENvbG91cnMgKGxpZ2h0IG1vZGUpICovCiAgLS1zbC1jb2xvci13aGl0ZTogaHNsKDIyMywgMTMlLCAxMCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmF5LTE6IGhzbCgyMjIsIDEzJSwgMTYlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItZ3JheS0yOiBoc2woMjIyLCAxMSUsIDIzJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktMzogaHNsKDIyNSwgOSUsIDM2JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNDogaHNsKDIyMSwgOCUsIDU2JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNTogaHNsKDIyOCwgOCUsIDc3JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNjogaHNsKDIzMSwgMjMlLCA5NCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmF5LTc6IGhzbCgyNDAsIDIwJSwgOTclKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmxhY2s6IGhzbCgwLCAwJSwgMTAwJSkgIWltcG9ydGFudDsKCiAgLS1zbC1jb2xvci1vcmFuZ2UtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1vcmFuZ2UpLCA4MCUsIDI1JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLW9yYW5nZTogaHNsKHZhcigtLXNsLWh1ZS1vcmFuZ2UpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLW9yYW5nZS1sb3c6IGhzbCh2YXIoLS1zbC1odWUtb3JhbmdlKSwgOTAlLCA4OCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmVlbi1oaWdoOiBoc2wodmFyKC0tc2wtaHVlLWdyZWVuKSwgODAlLCAyMiUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmVlbjogaHNsKHZhcigtLXNsLWh1ZS1ncmVlbiksIDkwJSwgNDYlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItZ3JlZW4tbG93OiBoc2wodmFyKC0tc2wtaHVlLWdyZWVuKSwgODUlLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ibHVlLWhpZ2g6IGhzbCh2YXIoLS1zbC1odWUtYmx1ZSksIDgwJSwgMzAlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmx1ZTogaHNsKHZhcigtLXNsLWh1ZS1ibHVlKSwgOTAlLCA2MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ibHVlLWxvdzogaHNsKHZhcigtLXNsLWh1ZS1ibHVlKSwgODglLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1wdXJwbGUtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1wdXJwbGUpLCAzOSUsIDMwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXB1cnBsZTogaHNsKHZhcigtLXNsLWh1ZS1wdXJwbGUpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXB1cnBsZS1sb3c6IGhzbCh2YXIoLS1zbC1odWUtcHVycGxlKSwgODAlLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1yZWQtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1yZWQpLCA4MCUsIDMwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXJlZDogaHNsKHZhcigtLXNsLWh1ZS1yZWQpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXJlZC1sb3c6IGhzbCh2YXIoLS1zbC1odWUtcmVkKSwgODAlLCA5MCUpICFpbXBvcnRhbnQ7CgogIC0tc2wtY29sb3ItYWNjZW50LWhpZ2g6IGhzbCh2YXIoLS1zbC1odWUtYWNjZW50KSwgODAlLCAzMCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1hY2NlbnQ6IGhzbCh2YXIoLS1zbC1odWUtYWNjZW50KSwgOTAlLCA2MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1hY2NlbnQtbG93OiBoc2wodmFyKC0tc2wtaHVlLWFjY2VudCksIDg4JSwgOTAlKSAhaW1wb3J0YW50OwoKICAtLXNsLWNvbG9yLXRleHQtYWNjZW50OiB2YXIoLS1zbC1jb2xvci1hY2NlbnQpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci10ZXh0LWludmVydDogdmFyKC0tc2wtY29sb3ItYmxhY2spICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1iZy1uYXY6IHZhcigtLXNsLWNvbG9yLWdyYXktNykgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWJnLXNpZGViYXI6IHZhcigtLXNsLWNvbG9yLWJnKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmctaW5saW5lLWNvZGU6IHZhcigtLXNsLWNvbG9yLWdyYXktNikgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWhhaXJsaW5lLXNoYWRlOiB2YXIoLS1zbC1jb2xvci1ncmF5LTYpICFpbXBvcnRhbnQ7CgogIC0tc2wtY29sb3ItYmFja2Ryb3Atb3ZlcmxheTogaHNsYSgyMjUsIDklLCAzNiUsIDAuNjYpICFpbXBvcnRhbnQ7CgogIC8qIFNoYWRvd3MgKGxpZ2h0IG1vZGUpICovCiAgLS1zbC1zaGFkb3ctc206IDBweCAxcHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSwKICAgIDBweCAycHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSAhaW1wb3J0YW50OwogIC0tc2wtc2hhZG93LW1kOiAwcHggOHB4IDRweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksCiAgICAwcHggNXB4IDJweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksIDBweCAzcHggMnB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSwKICAgIDBweCAxcHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSAhaW1wb3J0YW50OwogIC0tc2wtc2hhZG93LWxnOiAwcHggMjVweCA3cHggcmdiYSgwLCAwLCAwLCAwLjAxKSwKICAgIDBweCAxNnB4IDZweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksIDBweCA5cHggNXB4IGhzbGEoMjIzLCAxMyUsIDEwJSwgMC4wOCksCiAgICAwcHggNHB4IDRweCBoc2xhKDAsIDAlLCAwJSwgMC4xNiksIDBweCA0cHggMnB4IGhzbGEoMCwgMCUsIDAlLCAwLjA0KSAhaW1wb3J0YW50Owp9CgoucHJpbnRcOmhpZGRlbiB7CiAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Owp9Ci5wcmludFw6ZmxleCB7CiAgZGlzcGxheTogZmxleCAhaW1wb3J0YW50Owp9Ci5wcmludFw6YmxvY2sgewogIGRpc3BsYXk6IGJsb2NrICFpbXBvcnRhbnQ7Cn0KCi8qIGluZGV4LmFzdHJvICovCm1haW4gewogIHBhZGRpbmctYm90dG9tOiAwICFpbXBvcnRhbnQ7Cn0KbWFpbiA+IC5jb250ZW50LXBhbmVsIHsKICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiAwICFpbXBvcnRhbnQ7Cn0KCi8qIGNvbXBvbmVudHMvTWFya2Rvd25Db250ZW50LmFzdHJvICovCi5jb250ZW50IHByZSB7CiAgb3ZlcmZsb3cteDogaGlkZGVuICFpbXBvcnRhbnQ7CiAgd2hpdGUtc3BhY2U6IHByZS13cmFwICFpbXBvcnRhbnQ7CiAgcGFnZS1icmVhay1pbnNpZGU6IGF2b2lkOwp9CgovKiBsYXlvdXQvUGFnZUZyYW1lLmFzdHJvICovCi5wYWdlID4gaGVhZGVyIHsKICBwb3NpdGlvbjogcmVsYXRpdmUgIWltcG9ydGFudDsKfQoucGFnZSA+IC5tYWluLWZyYW1lIHsKICBwYWRkaW5nLWlubGluZS1zdGFydDogMCAhaW1wb3J0YW50Owp9CgovKiBsYXlvdXQvVHdvQ29sdW1uQ29udGVudC5hc3RybyAqLwoubWFpbi1wYW5lIHsKICAtLXNsLXNpZGViYXItd2lkdGg6IDBweCAhaW1wb3J0YW50OwogIC0tc2wtY29udGVudC13aWR0aDogMTAwJSAhaW1wb3J0YW50Owp9Cg==](view-source:data:text/css;base64,OnJvb3QsCjo6YmFja2Ryb3AgewogIC8qIENvbG91cnMgKGxpZ2h0IG1vZGUpICovCiAgLS1zbC1jb2xvci13aGl0ZTogaHNsKDIyMywgMTMlLCAxMCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmF5LTE6IGhzbCgyMjIsIDEzJSwgMTYlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItZ3JheS0yOiBoc2woMjIyLCAxMSUsIDIzJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktMzogaHNsKDIyNSwgOSUsIDM2JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNDogaHNsKDIyMSwgOCUsIDU2JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNTogaHNsKDIyOCwgOCUsIDc3JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNjogaHNsKDIzMSwgMjMlLCA5NCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmF5LTc6IGhzbCgyNDAsIDIwJSwgOTclKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmxhY2s6IGhzbCgwLCAwJSwgMTAwJSkgIWltcG9ydGFudDsKCiAgLS1zbC1jb2xvci1vcmFuZ2UtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1vcmFuZ2UpLCA4MCUsIDI1JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLW9yYW5nZTogaHNsKHZhcigtLXNsLWh1ZS1vcmFuZ2UpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLW9yYW5nZS1sb3c6IGhzbCh2YXIoLS1zbC1odWUtb3JhbmdlKSwgOTAlLCA4OCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmVlbi1oaWdoOiBoc2wodmFyKC0tc2wtaHVlLWdyZWVuKSwgODAlLCAyMiUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmVlbjogaHNsKHZhcigtLXNsLWh1ZS1ncmVlbiksIDkwJSwgNDYlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItZ3JlZW4tbG93OiBoc2wodmFyKC0tc2wtaHVlLWdyZWVuKSwgODUlLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ibHVlLWhpZ2g6IGhzbCh2YXIoLS1zbC1odWUtYmx1ZSksIDgwJSwgMzAlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmx1ZTogaHNsKHZhcigtLXNsLWh1ZS1ibHVlKSwgOTAlLCA2MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ibHVlLWxvdzogaHNsKHZhcigtLXNsLWh1ZS1ibHVlKSwgODglLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1wdXJwbGUtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1wdXJwbGUpLCAzOSUsIDMwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXB1cnBsZTogaHNsKHZhcigtLXNsLWh1ZS1wdXJwbGUpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXB1cnBsZS1sb3c6IGhzbCh2YXIoLS1zbC1odWUtcHVycGxlKSwgODAlLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1yZWQtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1yZWQpLCA4MCUsIDMwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXJlZDogaHNsKHZhcigtLXNsLWh1ZS1yZWQpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXJlZC1sb3c6IGhzbCh2YXIoLS1zbC1odWUtcmVkKSwgODAlLCA5MCUpICFpbXBvcnRhbnQ7CgogIC0tc2wtY29sb3ItYWNjZW50LWhpZ2g6IGhzbCh2YXIoLS1zbC1odWUtYWNjZW50KSwgODAlLCAzMCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1hY2NlbnQ6IGhzbCh2YXIoLS1zbC1odWUtYWNjZW50KSwgOTAlLCA2MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1hY2NlbnQtbG93OiBoc2wodmFyKC0tc2wtaHVlLWFjY2VudCksIDg4JSwgOTAlKSAhaW1wb3J0YW50OwoKICAtLXNsLWNvbG9yLXRleHQtYWNjZW50OiB2YXIoLS1zbC1jb2xvci1hY2NlbnQpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci10ZXh0LWludmVydDogdmFyKC0tc2wtY29sb3ItYmxhY2spICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1iZy1uYXY6IHZhcigtLXNsLWNvbG9yLWdyYXktNykgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWJnLXNpZGViYXI6IHZhcigtLXNsLWNvbG9yLWJnKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmctaW5saW5lLWNvZGU6IHZhcigtLXNsLWNvbG9yLWdyYXktNikgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWhhaXJsaW5lLXNoYWRlOiB2YXIoLS1zbC1jb2xvci1ncmF5LTYpICFpbXBvcnRhbnQ7CgogIC0tc2wtY29sb3ItYmFja2Ryb3Atb3ZlcmxheTogaHNsYSgyMjUsIDklLCAzNiUsIDAuNjYpICFpbXBvcnRhbnQ7CgogIC8qIFNoYWRvd3MgKGxpZ2h0IG1vZGUpICovCiAgLS1zbC1zaGFkb3ctc206IDBweCAxcHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSwKICAgIDBweCAycHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSAhaW1wb3J0YW50OwogIC0tc2wtc2hhZG93LW1kOiAwcHggOHB4IDRweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksCiAgICAwcHggNXB4IDJweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksIDBweCAzcHggMnB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSwKICAgIDBweCAxcHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSAhaW1wb3J0YW50OwogIC0tc2wtc2hhZG93LWxnOiAwcHggMjVweCA3cHggcmdiYSgwLCAwLCAwLCAwLjAxKSwKICAgIDBweCAxNnB4IDZweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksIDBweCA5cHggNXB4IGhzbGEoMjIzLCAxMyUsIDEwJSwgMC4wOCksCiAgICAwcHggNHB4IDRweCBoc2xhKDAsIDAlLCAwJSwgMC4xNiksIDBweCA0cHggMnB4IGhzbGEoMCwgMCUsIDAlLCAwLjA0KSAhaW1wb3J0YW50Owp9CgoucHJpbnRcOmhpZGRlbiB7CiAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Owp9Ci5wcmludFw6ZmxleCB7CiAgZGlzcGxheTogZmxleCAhaW1wb3J0YW50Owp9Ci5wcmludFw6YmxvY2sgewogIGRpc3BsYXk6IGJsb2NrICFpbXBvcnRhbnQ7Cn0KCi8qIGluZGV4LmFzdHJvICovCm1haW4gewogIHBhZGRpbmctYm90dG9tOiAwICFpbXBvcnRhbnQ7Cn0KbWFpbiA+IC5jb250ZW50LXBhbmVsIHsKICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiAwICFpbXBvcnRhbnQ7Cn0KCi8qIGNvbXBvbmVudHMvTWFya2Rvd25Db250ZW50LmFzdHJvICovCi5jb250ZW50IHByZSB7CiAgb3ZlcmZsb3cteDogaGlkZGVuICFpbXBvcnRhbnQ7CiAgd2hpdGUtc3BhY2U6IHByZS13cmFwICFpbXBvcnRhbnQ7CiAgcGFnZS1icmVhay1pbnNpZGU6IGF2b2lkOwp9CgovKiBsYXlvdXQvUGFnZUZyYW1lLmFzdHJvICovCi5wYWdlID4gaGVhZGVyIHsKICBwb3NpdGlvbjogcmVsYXRpdmUgIWltcG9ydGFudDsKfQoucGFnZSA+IC5tYWluLWZyYW1lIHsKICBwYWRkaW5nLWlubGluZS1zdGFydDogMCAhaW1wb3J0YW50Owp9CgovKiBsYXlvdXQvVHdvQ29sdW1uQ29udGVudC5hc3RybyAqLwoubWFpbi1wYW5lIHsKICAtLXNsLXNpZGViYXItd2lkdGg6IDBweCAhaW1wb3J0YW50OwogIC0tc2wtY29udGVudC13aWR0aDogMTAwJSAhaW1wb3J0YW50Owp9Cg==)" media="print">

That’s why we’re seeing the increase in HTML size, but no change in bundled CSS.

Let me check if there’s a workaround for that.

Copy link
Member

@delucis delucis Nov 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A feature to fix this just merged in Vite!

vitejs/vite#15454

Looks like this might work once that is released in Vite 6/Astro 5:

Suggested change
import printHref from './style/print.css?url';
import printHref from './style/print.css?url&no-inline';

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be ?url&no-inline to mark the CSS as an asset URL first, and then force not inline it as a data URL.

Copy link
Member

@delucis delucis Nov 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah thank you, Bjorn! I wasn’t 100% sure from the docs added in the Vite PR. I edited my suggestion to track that.

@tony-sull
Copy link
Author

Best laid plans! It turns out there isn't currently a great way to get around the CSS being inlined there, I'm going to close this out for now as blocked.

@delucis, @bluwy, and I were catching up on Discord and it sounds like this may be worthy of a feature in Vite to be able to ?url import and make sure it's never inlined. My vote is still on ?no-really-i-want-a-url, but I'll leave that up to the Vite team to decide 😄

@tony-sull tony-sull closed this Jun 21, 2023
@delucis delucis reopened this Nov 4, 2024
@delucis delucis marked this pull request as draft November 4, 2024 17:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌟 core Changes to Starlight’s main package 🌟 minor Change that triggers a minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants