Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stabilize inline stylesheets #7180

Merged
merged 5 commits into from
Jun 5, 2023
Merged

Stabilize inline stylesheets #7180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e0d6ce8
changeset
lilnasy May 23, 2023
edf4ec9
chore(inline stylesheets config): stabilize
lilnasy May 23, 2023
eb059fa
grammar
lilnasy May 23, 2023
7a91604
not a major change
lilnasy May 23, 2023
c2af343
Update inlineStylesheets version in the configuration reference
lilnasy May 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .changeset/stupid-pumpkins-perform.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 21 additions & 22 deletions packages/astro/src/@types/astro.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
};

/**
Expand Down Expand Up @@ -1146,28 +1167,6 @@ export interface AstroUserConfig {
*/
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
* @name experimental.customClientDirectives
Expand Down
2 changes: 1 addition & 1 deletion packages/astro/src/core/build/plugins/plugin-css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]) => {
Expand Down
14 changes: 9 additions & 5 deletions packages/astro/src/core/config/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
assets: '_astro',
serverEntry: 'entry.mjs',
redirects: true,
inlineStylesheets: 'never',
},
compressHTML: false,
server: {
Expand All @@ -43,7 +44,6 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
assets: false,
hybridOutput: false,
customClientDirectives: false,
inlineStylesheets: 'never',
middleware: false,
redirects: false,
},
Expand Down Expand Up @@ -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({}),
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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({}),
Expand Down
12 changes: 6 additions & 6 deletions packages/astro/test/css-inline-stylesheets.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
});
Expand Down Expand Up @@ -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',
},
});
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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',
},
});
Expand Down Expand Up @@ -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',
},
});
Expand Down