michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Stabilize inline stylesheets (#7180)

Browse source 
* 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>
This commit is contained in:
Arsh 2023-06-05 19:58:29 +05:30 committed by GitHub
parent eb459577f0
commit e3b8c62969
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 61 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
.changeset/stupid-pumpkins-perform.md Normal file
View file

@ -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.

43
packages/astro/src/@types/astro.ts
View file

@ -802,6 +802,27 @@ export interface AstroUserConfig {
* ``` * ```
*/ */
redirects?: boolean; 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';
}; };
/** /**
@ -1146,28 +1167,6 @@ export interface AstroUserConfig {
*/ */
assets?: boolean; assets?: boolean;
/**
* @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 * @docs
* @name experimental.customClientDirectives * @name experimental.customClientDirectives

2
packages/astro/src/core/build/plugins/plugin-css.ts
View file

@ -197,7 +197,7 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
name: 'astro:rollup-plugin-inline-stylesheets', name: 'astro:rollup-plugin-inline-stylesheets',
enforce: 'post', enforce: 'post',
async generateBundle(_outputOptions, bundle) { async generateBundle(_outputOptions, bundle) {
const inlineConfig = settings.config.experimental.inlineStylesheets; const inlineConfig = settings.config.build.inlineStylesheets;
const { assetsInlineLimit = 4096 } = settings.config.vite?.build ?? {}; const { assetsInlineLimit = 4096 } = settings.config.vite?.build ?? {};
Object.entries(bundle).forEach(([id, stylesheet]) => { Object.entries(bundle).forEach(([id, stylesheet]) => {

14
packages/astro/src/core/config/schema.ts
View file

@ -23,6 +23,7 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
assets: '_astro', assets: '_astro',
serverEntry: 'entry.mjs', serverEntry: 'entry.mjs',
redirects: true, redirects: true,
inlineStylesheets: 'never',
}, },
compressHTML: false, compressHTML: false,
server: { server: {
@ -43,7 +44,6 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
assets: false, assets: false,
hybridOutput: false, hybridOutput: false,
customClientDirectives: false, customClientDirectives: false,
inlineStylesheets: 'never',
middleware: false, middleware: false,
redirects: false, redirects: false,
}, },
@ -119,6 +119,10 @@ export const AstroConfigSchema = z.object({
assetsPrefix: z.string().optional(), assetsPrefix: z.string().optional(),
serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry), serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry),
redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.build.redirects), redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.build.redirects),
inlineStylesheets: z
.enum(['always', 'auto', 'never'])
.optional()
.default(ASTRO_CONFIG_DEFAULTS.build.inlineStylesheets),
}) })
.optional() .optional()
.default({}), .default({}),
@ -208,10 +212,6 @@ export const AstroConfigSchema = z.object({
.boolean() .boolean()
.optional() .optional()
.default(ASTRO_CONFIG_DEFAULTS.experimental.customClientDirecives), .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), middleware: z.oboolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.middleware),
hybridOutput: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.hybridOutput), hybridOutput: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.hybridOutput),
redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.redirects), 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(), assetsPrefix: z.string().optional(),
serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry), serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry),
redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.build.redirects), redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.build.redirects),
inlineStylesheets: z
.enum(['always', 'auto', 'never'])
.optional()
.default(ASTRO_CONFIG_DEFAULTS.build.inlineStylesheets),
}) })
.optional() .optional()
.default({}), .default({}),

12
packages/astro/test/css-inline-stylesheets.test.js
View file

@ -10,7 +10,7 @@ describe('Setting inlineStylesheets to never in static output', () => {
fixture = await loadFixture({ fixture = await loadFixture({
root: './fixtures/css-inline-stylesheets/never/', root: './fixtures/css-inline-stylesheets/never/',
output: 'static', output: 'static',
experimental: { build: {
inlineStylesheets: 'never', inlineStylesheets: 'never',
}, },
}); });
@ -44,7 +44,7 @@ describe('Setting inlineStylesheets to never in server output', () => {
root: './fixtures/css-inline-stylesheets/never/', root: './fixtures/css-inline-stylesheets/never/',
output: 'server', output: 'server',
adapter: testAdapter(), adapter: testAdapter(),
experimental: { build: {
inlineStylesheets: 'never', inlineStylesheets: 'never',
}, },
}); });
@ -79,7 +79,7 @@ describe('Setting inlineStylesheets to auto in static output', () => {
fixture = await loadFixture({ fixture = await loadFixture({
root: './fixtures/css-inline-stylesheets/auto/', root: './fixtures/css-inline-stylesheets/auto/',
output: 'static', output: 'static',
experimental: { build: {
inlineStylesheets: 'auto', inlineStylesheets: 'auto',
}, },
vite: { vite: {
@ -120,7 +120,7 @@ describe('Setting inlineStylesheets to auto in server output', () => {
root: './fixtures/css-inline-stylesheets/auto/', root: './fixtures/css-inline-stylesheets/auto/',
output: 'server', output: 'server',
adapter: testAdapter(), adapter: testAdapter(),
experimental: { build: {
inlineStylesheets: 'auto', inlineStylesheets: 'auto',
}, },
vite: { vite: {
@ -163,7 +163,7 @@ describe('Setting inlineStylesheets to always in static output', () => {
fixture = await loadFixture({ fixture = await loadFixture({
root: './fixtures/css-inline-stylesheets/always/', root: './fixtures/css-inline-stylesheets/always/',
output: 'static', output: 'static',
experimental: { build: {
inlineStylesheets: 'always', inlineStylesheets: 'always',
}, },
}); });
@ -196,7 +196,7 @@ describe('Setting inlineStylesheets to always in server output', () => {
root: './fixtures/css-inline-stylesheets/always/', root: './fixtures/css-inline-stylesheets/always/',
output: 'server', output: 'server',
adapter: testAdapter(), adapter: testAdapter(),
experimental: { build: {
inlineStylesheets: 'always', inlineStylesheets: 'always',
}, },
}); });