From 811ba452156ec0a78c31f004ff17d18b6e9fd8cf Mon Sep 17 00:00:00 2001
From: lilnasy <69170106+lilnasy@users.noreply.github.com>
Date: Thu, 17 Aug 2023 21:06:48 +0000
Subject: [PATCH 1/2] Update CSS bundle control for 3.0

---
 src/content/docs/en/guides/styling.mdx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/content/docs/en/guides/styling.mdx b/src/content/docs/en/guides/styling.mdx
index 129240181a1e8..1a56d538e1258 100644
--- a/src/content/docs/en/guides/styling.mdx
+++ b/src/content/docs/en/guides/styling.mdx
@@ -531,24 +531,36 @@ If you are using Tailwind, the [typography plugin](https://tailwindcss.com/docs/
 
 ### 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.
+When Astro builds your site for production deployment, it minifies and combines your CSS into chunks. Each page on your site gets 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.
+However, when you have several pages sharing styles, some shared chunks can become really small. If all of them were sent separately, it would lead to many stylesheets requests and affect site performance. This is why Astro will link only the larger ones in your HTML as `<link rel="stylesheet">` tags, while inlining the smaller ones into `<style type="text/css">`. This approach provides a balance between the number of additional requests and the volume of CSS that can be cached between pages.
 
-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.
+The default threshold a stylesheet must meet to be linked externally is 4kB. To configure it, you can set the `assetsInlineLimit` vite build option to the intended size, in bytes. Note that this option affects script and image inlining as well.
+
+```js
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  vite: {
+    build: {
+      assetsInlineLimit: 1024,
+    }
+  };
+});
+```
+
+If you would rather all project styles remain external, you can configure the `inlineStylesheets` build option.
 
 ```js
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({
   build: {
-    inlineStylesheets: 'auto'
+    inlineStylesheets: 'never'
   }
 });
 ```
 
-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

From 9dfe633a7978e4f3e6c3ccb164c086151ecd008e Mon Sep 17 00:00:00 2001
From: Arsh <69170106+lilnasy@users.noreply.github.com>
Date: Fri, 18 Aug 2023 03:08:53 +0530
Subject: [PATCH 2/2] Apply suggestions from code review

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 src/content/docs/en/guides/styling.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/docs/en/guides/styling.mdx b/src/content/docs/en/guides/styling.mdx
index 1a56d538e1258..85f325dcb42d4 100644
--- a/src/content/docs/en/guides/styling.mdx
+++ b/src/content/docs/en/guides/styling.mdx
@@ -533,9 +533,9 @@ If you are using Tailwind, the [typography plugin](https://tailwindcss.com/docs/
 
 When Astro builds your site for production deployment, it minifies and combines your CSS into chunks. Each page on your site gets its own chunk, and additionally, CSS that is shared between multiple pages is further split off into their own chunks for reuse.
 
-However, when you have several pages sharing styles, some shared chunks can become really small. If all of them were sent separately, it would lead to many stylesheets requests and affect site performance. This is why Astro will link only the larger ones in your HTML as `<link rel="stylesheet">` tags, while inlining the smaller ones into `<style type="text/css">`. This approach provides a balance between the number of additional requests and the volume of CSS that can be cached between pages.
+However, when you have several pages sharing styles, some shared chunks can become really small. If all of them were sent separately, it would lead to many stylesheets requests and affect site performance. Therefore, by default Astro will link only those in your HTML above 4kB in size as `<link rel="stylesheet">` tags, while inlining smaller ones into `<style type="text/css">`. This approach provides a balance between the number of additional requests and the volume of CSS that can be cached between pages.
 
-The default threshold a stylesheet must meet to be linked externally is 4kB. To configure it, you can set the `assetsInlineLimit` vite build option to the intended size, in bytes. Note that this option affects script and image inlining as well.
+You can configure the size at which stylesheets will be linked externally (in bytes) using the `assetsInlineLimit` vite build option. Note that this option affects script and image inlining as well.
 
 ```js
 import { defineConfig } from 'astro/config';