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

Inline global CSS files in AMP pages in production builds #17914

Closed
wants to merge 7 commits into from
Closed

Inline global CSS files in AMP pages in production builds #17914

wants to merge 7 commits into from

Conversation

jpbow
Copy link

@jpbow jpbow commented Oct 15, 2020 •
edited

Relates to #7121 and #10549

This solves the first part of the issue: Imported CSS files are now inlined in AMP pages during production builds.

The second part is to inline styles on AMP pages in dev mode. I have no idea how to approach this as style-loader is not run at all when rendering AMP pages in dev - if there's any way to enable it though I'm happy to make the changes!

@jpbow jpbow changed the title Inline global CSS files in AMP pages WIP: Inline global CSS files in AMP pages Oct 15, 2020
@jpbow jpbow changed the title WIP: Inline global CSS files in AMP pages Inline global CSS files in AMP pages in production builds Oct 19, 2020
@jpbow jpbow marked this pull request as ready for review October 19, 2020 08:04
@ijjk
Copy link
Member

ijjk commented Oct 19, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary jpbow/next.js amp-inline-css Change
buildDuration 12.4s 12.7s ⚠️ +298ms
nodeModulesSize 64.4 MB 64.4 MB ⚠️ +1.92 kB
Page Load Tests Overall increase ✓
vercel/next.js canary jpbow/next.js amp-inline-css Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.403 2.296 -0.11
/ avg req/sec 1040.46 1088.71 +48.25
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.273 1.25 -0.02
/error-in-render avg req/sec 1963.1 2000.5 +37.4
Client Bundles (main, webpack, commons)
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..7765.js gzip 11.1 kB 11.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-5aa1543..4e79.js gzip 7.34 kB 7.34 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.1 kB 58.1 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..dule.js gzip 6.94 kB 6.94 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-7d849dd..dule.js gzip 6.32 kB 6.32 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53 kB 53 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary jpbow/next.js amp-inline-css Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-89ad9e7..25bb.js gzip 1.34 kB 1.34 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.74 kB 7.74 kB ✓
Client Pages Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-aeb707b..dule.js gzip 1.29 kB 1.29 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.39 kB 5.39 kB ✓
Client Build Manifests
vercel/next.js canary jpbow/next.js amp-inline-css Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Rendered Page Sizes
vercel/next.js canary jpbow/next.js amp-inline-css Change
index.html gzip 1 kB 1 kB ✓
link.html gzip 1.01 kB 1.01 kB ✓
withRouter.html gzip 996 B 996 B ✓
Overall change 3.01 kB 3.01 kB ✓
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary jpbow/next.js amp-inline-css Change
buildDuration 14.6s 14.3s -320ms
nodeModulesSize 64.4 MB 64.4 MB ⚠️ +1.92 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..7765.js gzip 11.1 kB 11.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-5aa1543..4e79.js gzip 7.34 kB 7.34 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.1 kB 58.1 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..dule.js gzip 6.94 kB 6.94 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-7d849dd..dule.js gzip 6.32 kB 6.32 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53 kB 53 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary jpbow/next.js amp-inline-css Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-89ad9e7..25bb.js gzip 1.34 kB 1.34 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.74 kB 7.74 kB ✓
Client Pages Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-aeb707b..dule.js gzip 1.29 kB 1.29 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.39 kB 5.39 kB ✓
Client Build Manifests
vercel/next.js canary jpbow/next.js amp-inline-css Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary jpbow/next.js amp-inline-css Change
_error.js 1.06 MB 1.06 MB ⚠️ +638 B
404.html 4.34 kB 4.34 kB ✓
hooks.html 3.92 kB 3.92 kB ✓
index.js 1.06 MB 1.06 MB ⚠️ +638 B
link.js 1.1 MB 1.1 MB ⚠️ +638 B
routerDirect.js 1.1 MB 1.1 MB ⚠️ +638 B
withRouter.js 1.1 MB 1.1 MB ⚠️ +638 B
Overall change 5.42 MB 5.42 MB ⚠️ +3.19 kB
Commit: 5de6bd3

@ijjk
Copy link
Member

ijjk commented Oct 22, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary jpbow/next.js amp-inline-css Change
buildDuration 12.8s 12.6s -203ms
nodeModulesSize 91.2 MB 91.2 MB ⚠️ +1.92 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary jpbow/next.js amp-inline-css Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.362 2.324 -0.04
/ avg req/sec 1058.56 1075.67 +17.11
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.252 1.271 ⚠️ +0.02
/error-in-render avg req/sec 1996.11 1967.66 ⚠️ -28.45
Client Bundles (main, webpack, commons)
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..35e7.js gzip 11.1 kB 11.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-23d7afb..be6f.js gzip 7.34 kB 7.34 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.1 kB 58.1 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..dule.js gzip 6.94 kB 6.94 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-ccae7c3..dule.js gzip 6.32 kB 6.32 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53 kB 53 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary jpbow/next.js amp-inline-css Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-89ad9e7..25bb.js gzip 1.34 kB 1.34 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.74 kB 7.74 kB ✓
Client Pages Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-aeb707b..dule.js gzip 1.29 kB 1.29 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.39 kB 5.39 kB ✓
Client Build Manifests
vercel/next.js canary jpbow/next.js amp-inline-css Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Rendered Page Sizes
vercel/next.js canary jpbow/next.js amp-inline-css Change
index.html gzip 1 kB 1 kB ✓
link.html gzip 1.01 kB 1.01 kB ✓
withRouter.html gzip 994 B 994 B ✓
Overall change 3.01 kB 3.01 kB ✓
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary jpbow/next.js amp-inline-css Change
buildDuration 14.5s 14.4s -97ms
nodeModulesSize 91.2 MB 91.2 MB ⚠️ +1.92 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..35e7.js gzip 11.1 kB 11.1 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-23d7afb..be6f.js gzip 7.34 kB 7.34 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.1 kB 58.1 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..dule.js gzip 6.94 kB 6.94 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-ccae7c3..dule.js gzip 6.32 kB 6.32 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53 kB 53 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary jpbow/next.js amp-inline-css Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-89ad9e7..25bb.js gzip 1.34 kB 1.34 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.74 kB 7.74 kB ✓
Client Pages Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-aeb707b..dule.js gzip 1.29 kB 1.29 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.39 kB 5.39 kB ✓
Client Build Manifests
vercel/next.js canary jpbow/next.js amp-inline-css Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary jpbow/next.js amp-inline-css Change
_error.js 1.06 MB 1.06 MB ⚠️ +638 B
404.html 4.73 kB 4.73 kB ✓
hooks.html 3.92 kB 3.92 kB ✓
index.js 1.06 MB 1.06 MB ⚠️ +638 B
link.js 1.1 MB 1.1 MB ⚠️ +638 B
routerDirect.js 1.1 MB 1.1 MB ⚠️ +638 B
withRouter.js 1.1 MB 1.1 MB ⚠️ +638 B
Overall change 5.42 MB 5.42 MB ⚠️ +3.19 kB
Commit: a4c4a04

@ijjk
Copy link
Member

ijjk commented Oct 28, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary jpbow/next.js amp-inline-css Change
buildDuration 13.2s 13.1s -111ms
nodeModulesSize 91.3 MB 91.3 MB ⚠️ +1.92 kB
Page Load Tests Overall increase ✓
vercel/next.js canary jpbow/next.js amp-inline-css Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.383 2.472 ⚠️ +0.09
/ avg req/sec 1049.24 1011.22 ⚠️ -38.02
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.348 1.274 -0.07
/error-in-render avg req/sec 1855.23 1962.37 +107.14
Client Bundles (main, webpack, commons)
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..3aa9.js gzip 11.3 kB 11.3 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-fc2ed98..cd2b.js gzip 7.33 kB 7.33 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.3 kB 58.3 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..dule.js gzip 7.03 kB 7.03 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-20f9619..dule.js gzip 6.31 kB 6.31 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.1 kB 53.1 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary jpbow/next.js amp-inline-css Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-41ceea0..6b62.js gzip 1.35 kB 1.35 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.75 kB 7.75 kB ✓
Client Pages Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-2d41a89..dule.js gzip 1.31 kB 1.31 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.4 kB 5.4 kB ✓
Client Build Manifests
vercel/next.js canary jpbow/next.js amp-inline-css Change
_buildManifest.js gzip 323 B 323 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 652 B 652 B ✓
Rendered Page Sizes
vercel/next.js canary jpbow/next.js amp-inline-css Change
index.html gzip 1 kB 1 kB ✓
link.html gzip 1.01 kB 1.01 kB ✓
withRouter.html gzip 996 B 996 B ✓
Overall change 3.01 kB 3.01 kB ✓
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary jpbow/next.js amp-inline-css Change
buildDuration 14.7s 15s ⚠️ +376ms
nodeModulesSize 91.3 MB 91.3 MB ⚠️ +1.92 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..3aa9.js gzip 11.3 kB 11.3 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-fc2ed98..cd2b.js gzip 7.33 kB 7.33 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 58.3 kB 58.3 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
677f882d2ed8..dule.js gzip 7.03 kB 7.03 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-20f9619..dule.js gzip 6.31 kB 6.31 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 53.1 kB 53.1 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary jpbow/next.js amp-inline-css Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-41ceea0..6b62.js gzip 1.35 kB 1.35 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.75 kB 7.75 kB ✓
Client Pages Modern
vercel/next.js canary jpbow/next.js amp-inline-css Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-2d41a89..dule.js gzip 1.31 kB 1.31 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.4 kB 5.4 kB ✓
Client Build Manifests
vercel/next.js canary jpbow/next.js amp-inline-css Change
_buildManifest.js gzip 323 B 323 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 652 B 652 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary jpbow/next.js amp-inline-css Change
_error.js 1.06 MB 1.06 MB ⚠️ +638 B
404.html 4.73 kB 4.73 kB ✓
hooks.html 3.92 kB 3.92 kB ✓
index.js 1.06 MB 1.06 MB ⚠️ +638 B
link.js 1.11 MB 1.11 MB ⚠️ +638 B
routerDirect.js 1.1 MB 1.1 MB ⚠️ +638 B
withRouter.js 1.1 MB 1.1 MB ⚠️ +638 B
Overall change 5.43 MB 5.44 MB ⚠️ +3.19 kB
Commit: 8bb83f7

@jpbow jpbow mentioned this pull request Nov 12, 2020
Closed
@masihjahangiri
Copy link

@jpbow It's a great job and I really need this PR to use tailwindcss in my AMP pages. Can I help you to process it as soon as possible? I like to help you.

@jpbow jpbow closed this Aug 30, 2021
@vercel vercel locked as resolved and limited conversation to collaborators Jan 27, 2022
@jpbow jpbow deleted the amp-inline-css branch February 5, 2022 07:27
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ijjk ijjk Awaiting requested review from ijjk ijjk is a code owner

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

@timneutkens timneutkens Awaiting requested review from timneutkens timneutkens is a code owner

Assignees
No one assigned
Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@jpbow @ijjk @masihjahangiri