summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Arsh <69170106+lilnasy@users.noreply.github.com> 2023-06-05 19:58:29 +0530
committerGravatar GitHub <noreply@github.com> 2023-06-05 10:28:29 -0400
commite3b8c62969d680d1915a122c610d281d6711aa63 (patch)
treea2f721e71c094ca5697ebca8f49d8bab9ca5d36e
parenteb459577f017e2ac4f67a4c61c2e86517ce10938 (diff)
downloadastro-e3b8c62969d680d1915a122c610d281d6711aa63.tar.gz
astro-e3b8c62969d680d1915a122c610d281d6711aa63.tar.zst
astro-e3b8c62969d680d1915a122c610d281d6711aa63.zip
Stabilize inline stylesheets (#7180)
* changeset * chore(inline stylesheets config): stabilize * grammar * not a major change * Update inlineStylesheets version in the configuration reference Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> --------- Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Diffstat
-rw-r--r--.changeset/stupid-pumpkins-perform.md24
-rw-r--r--packages/astro/src/@types/astro.ts43
-rw-r--r--packages/astro/src/core/build/plugins/plugin-css.ts2
-rw-r--r--packages/astro/src/core/config/schema.ts14
-rw-r--r--packages/astro/test/css-inline-stylesheets.test.js12
5 files changed, 61 insertions, 34 deletions
diff --git a/.changeset/stupid-pumpkins-perform.md b/.changeset/stupid-pumpkins-perform.md
new file mode 100644
index 000000000..663800891
--- /dev/null
+++ b/.changeset/stupid-pumpkins-perform.md
@@ -0,0 +1,24 @@
+---
+'astro': minor
+---
+
+The Inline Stylesheets RFC is now stable!
+
+You can now control how Astro bundles your css with a configuration change:
+
+```ts
+export default defineConfig({
+ ...
+ build: {
+ inlineStylesheets: "auto"
+ }
+ ...
+})
+```
+
+The options:
+- `inlineStylesheets: "never"`: This is the behavior you are familiar with. Every stylesheet is external, and added to the page via a `<link>` tag. Default.
+- `inlineStylesheets: "auto"`: Small stylesheets are inlined into `<style>` tags and inserted into `<head>`, while larger ones remain external.
+- `inlineStylesheets: "always"`: Every style required by the page is inlined.
+
+As always, css files in the `public` folder are not affected.
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
index 35b6e498e..1f7704e2f 100644
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@@ -802,6 +802,27 @@ export interface AstroUserConfig {
* ```
*/
redirects?: boolean;
+ /**
+ * @docs
+ * @name build.inlineStylesheets
+ * @type {('always' | 'auto' | 'never')}
+ * @default `never`
+ * @version 2.6.0
+ * @description
+ * Control whether styles are sent to the browser in a separate css file or inlined into `<style>` tags. Choose from the following options:
+ * - `'always'` - all styles are inlined into `<style>` tags
+ * - `'auto'` - only stylesheets smaller than `ViteConfig.build.assetsInlineLimit` (default: 4kb) are inlined. Otherwise, styles are sent in external stylesheets.
+ * - `'never'` - all styles are sent in external stylesheets
+ *
+ * ```js
+ * {
+ * build: {
+ * inlineStylesheets: `auto`,
+ * },
+ * }
+ * ```
+ */
+ inlineStylesheets?: 'always' | 'auto' | 'never';
};
/**
@@ -1148,28 +1169,6 @@ export interface AstroUserConfig {
/**
* @docs
- * @name experimental.inlineStylesheets
- * @type {('always' | 'auto' | 'never')}
- * @default `never`
- * @version 2.4.0
- * @description
- * Control whether styles are sent to the browser in a separate css file or inlined into `<style>` tags. Choose from the following options:
- * - `'always'` - all styles are inlined into `<style>` tags
- * - `'auto'` - only stylesheets smaller than `ViteConfig.build.assetsInlineLimit` (default: 4kb) are inlined. Otherwise, styles are sent in external stylesheets.
- * - `'never'` - all styles are sent in external stylesheets
- *
- * ```js
- * {
- * experimental: {
- * inlineStylesheets: `auto`,
- * },
- * }
- * ```
- */
- inlineStylesheets?: 'always' | 'auto' | 'never';
-
- /**
- * @docs
* @name experimental.customClientDirectives
* @type {boolean}
* @default `false`
diff --git a/packages/astro/src/core/build/plugins/plugin-css.ts b/packages/astro/src/core/build/plugins/plugin-css.ts
index 1cec97223..1d2aa58ea 100644
--- a/packages/astro/src/core/build/plugins/plugin-css.ts
+++ b/packages/astro/src/core/build/plugins/plugin-css.ts
@@ -197,7 +197,7 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
name: 'astro:rollup-plugin-inline-stylesheets',
enforce: 'post',
async generateBundle(_outputOptions, bundle) {
- const inlineConfig = settings.config.experimental.inlineStylesheets;
+ const inlineConfig = settings.config.build.inlineStylesheets;
const { assetsInlineLimit = 4096 } = settings.config.vite?.build ?? {};
Object.entries(bundle).forEach(([id, stylesheet]) => {
diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts
index cb92e297d..493d57a16 100644
--- a/packages/astro/src/core/config/schema.ts
+++ b/packages/astro/src/core/config/schema.ts
@@ -23,6 +23,7 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
assets: '_astro',
serverEntry: 'entry.mjs',
redirects: true,
+ inlineStylesheets: 'never',
},
compressHTML: false,
server: {
@@ -43,7 +44,6 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
assets: false,
hybridOutput: false,
customClientDirectives: false,
- inlineStylesheets: 'never',
middleware: false,
redirects: false,
},
@@ -119,6 +119,10 @@ export const AstroConfigSchema = z.object({
assetsPrefix: z.string().optional(),
serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry),
redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.build.redirects),
+ inlineStylesheets: z
+ .enum(['always', 'auto', 'never'])
+ .optional()
+ .default(ASTRO_CONFIG_DEFAULTS.build.inlineStylesheets),
})
.optional()
.default({}),
@@ -208,10 +212,6 @@ export const AstroConfigSchema = z.object({
.boolean()
.optional()
.default(ASTRO_CONFIG_DEFAULTS.experimental.customClientDirecives),
- inlineStylesheets: z
- .enum(['always', 'auto', 'never'])
- .optional()
- .default(ASTRO_CONFIG_DEFAULTS.experimental.inlineStylesheets),
middleware: z.oboolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.middleware),
hybridOutput: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.hybridOutput),
redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.redirects),
@@ -284,6 +284,10 @@ export function createRelativeSchema(cmd: string, fileProtocolRoot: URL) {
assetsPrefix: z.string().optional(),
serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry),
redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.build.redirects),
+ inlineStylesheets: z
+ .enum(['always', 'auto', 'never'])
+ .optional()
+ .default(ASTRO_CONFIG_DEFAULTS.build.inlineStylesheets),
})
.optional()
.default({}),
diff --git a/packages/astro/test/css-inline-stylesheets.test.js b/packages/astro/test/css-inline-stylesheets.test.js
index d4009ed85..63148bbfd 100644
--- a/packages/astro/test/css-inline-stylesheets.test.js
+++ b/packages/astro/test/css-inline-stylesheets.test.js
@@ -10,7 +10,7 @@ describe('Setting inlineStylesheets to never in static output', () => {
fixture = await loadFixture({
root: './fixtures/css-inline-stylesheets/never/',
output: 'static',
- experimental: {
+ build: {
inlineStylesheets: 'never',
},
});
@@ -44,7 +44,7 @@ describe('Setting inlineStylesheets to never in server output', () => {
root: './fixtures/css-inline-stylesheets/never/',
output: 'server',
adapter: testAdapter(),
- experimental: {
+ build: {
inlineStylesheets: 'never',
},
});
@@ -79,7 +79,7 @@ describe('Setting inlineStylesheets to auto in static output', () => {
fixture = await loadFixture({
root: './fixtures/css-inline-stylesheets/auto/',
output: 'static',
- experimental: {
+ build: {
inlineStylesheets: 'auto',
},
vite: {
@@ -120,7 +120,7 @@ describe('Setting inlineStylesheets to auto in server output', () => {
root: './fixtures/css-inline-stylesheets/auto/',
output: 'server',
adapter: testAdapter(),
- experimental: {
+ build: {
inlineStylesheets: 'auto',
},
vite: {
@@ -163,7 +163,7 @@ describe('Setting inlineStylesheets to always in static output', () => {
fixture = await loadFixture({
root: './fixtures/css-inline-stylesheets/always/',
output: 'static',
- experimental: {
+ build: {
inlineStylesheets: 'always',
},
});
@@ -196,7 +196,7 @@ describe('Setting inlineStylesheets to always in server output', () => {
root: './fixtures/css-inline-stylesheets/always/',
output: 'server',
adapter: testAdapter(),
- experimental: {
+ build: {
inlineStylesheets: 'always',
},
});
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-18 14:17:49 +0000