Document inline stylesheets (#3355)

matthewp · sarah11918 · web-flow · commit aedcab56a9a8 · 2023-06-06T13:59:22.000-03:00
Co-authored-by: Sarah Rainsberger &lt;sarah@rainsberger.ca&gt;
diff --git a/src/content/docs/en/guides/styling.mdx b/src/content/docs/en/guides/styling.mdx
@@ -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
