Skip to content

Commit

Permalink
Document inline stylesheets (#3355)
Browse files Browse the repository at this point in the history
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
  • Loading branch information
matthewp and sarah11918 committed Jun 6, 2023
1 parent 669b6d5 commit aedcab5
Showing 1 changed file with 24 additions and 0 deletions.
24 changes: 24 additions & 0 deletions src/content/docs/en/guides/styling.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -514,6 +514,30 @@ You can apply global styles to your Markdown content by adding [`<style>` tags](

If you are using Tailwind, the [typography plugin](https://tailwindcss.com/docs/typography-plugin) can be useful for styling Markdown.

## Production

### Bundle control

When Astro builds your site for production deployment it combines your CSS into chunks. Each page on your site is its own chunk, and additionally, CSS that is shared between multiple pages is further split off into their own chunks for reuse.

In each of your HTML files there will be `<link rel="stylesheet">` tags added, one for each of the chunks that the pages needs.

Sites with a large number of pages and many different shared styles can lead to many stylesheet requests and affect site performance. You can configure the `inlineStylesheets` option to reduce the number of these requests by putting (minimized) stylesheets into a `<style>` tag rather than request them externally.

```js
import { defineConfig } from 'astro/config';

export default defineConfig({
build: {
inlineStylesheets: 'auto'
}
});
```

The `'auto'` option will inline only the stylesheets that are below the `vite.build.assetsInlineLimit` threshold, reducing the number of requests for smaller sheets. Larger stylesheets, such as global ones used by all pages, will still be fetched externally and cached. This option provides a balance between the number of stylesheets loaded and the styles that can be cached between pages.

You can also set this option to `'always'` which will inline all stylesheets.

## Advanced

:::caution
Expand Down

0 comments on commit aedcab5

Please sign in to comment.