-
-
Notifications
You must be signed in to change notification settings - Fork 535
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
base: main
Are you sure you want to change the base?
Conversation
|
✅ Deploy Preview for astro-starlight ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
size-limit report 📦
|
2289ff4
to
f455c1c
Compare
57d6c69
to
819ea02
Compare
@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 |
I think my preference is likely for pulling this out to a separate global file to avoid extra downloads. (We’d need a 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 (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 Let me know if you’re happy doing that or if you’d prefer me to tackle! |
@delucis Yep that's no problem, I'll refactor that this morning and pull the styles out into a global sheet 👍 |
@delucis done! Everything is moved out to the separate Looks like the HTML size-limit is failing by ~1kb, that should just be from the extra |
@@ -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'; |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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!
Looks like this might work once that is released in Vite 6/Astro 5:
import printHref from './style/print.css?url'; | |
import printHref from './style/print.css?url&no-inline'; |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
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 |
What kind of changes does this PR include?
Description