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

Insert <style> tags after anchor element #8795

Merged
merged 3 commits into from Sep 19, 2019
Merged

Insert <style> tags after anchor element #8795

merged 3 commits into from Sep 19, 2019

Conversation

lucleray
Copy link
Member

@lucleray lucleray commented Sep 19, 2019 •
edited

Related to #8790

This PR injects the style tags after the noscript tag. Before this PR, the style tags were injected inside the noscript tag.

This solves a bug where snapshotted + rerendered html of the page is not rendered with the styles applied.

@lucleray lucleray requested a review from Timer September 19, 2019 05:27
@ijjk
Copy link
Member

ijjk commented Sep 19, 2019

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary zeit/next.js insert-css-dev Change
buildDuration 16.6s 16.3s -285ms
nodeModulesSize 48.4 MB 48.4 MB ⚠️ +1.7 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary zeit/next.js insert-css-dev Change
main-HASH.js 18.3 kB 18.3 kB ✓
main-HASH.js gzip 6.64 kB 6.64 kB ✓
webpack-HASH.js 1.53 kB 1.53 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB ✓
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB ✓
de003c3a9d30..3fa59b1f5.js 43.1 kB 43.1 kB ✓
de003c3a9d30..b1f5.js gzip 15.5 kB 15.5 kB ✓
framework.5b..dbaff70d3.js 125 kB 125 kB ✓
framework.5b..70d3.js gzip 39.4 kB 39.4 kB ✓
Overall change 210 kB 210 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary zeit/next.js insert-css-dev Change
main-HASH.module.js 16.5 kB 16.5 kB ✓
main-HASH.module.js gzip 6.39 kB 6.39 kB ✓
webpack-HASH.module.js 1.53 kB 1.53 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..4b.module.js 45.5 kB 45.5 kB ✓
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB ✓
framework.5b..d3.module.js 125 kB 125 kB ✓
framework.5b..dule.js gzip 39.4 kB 39.4 kB ✓
Overall change 189 kB 189 kB ✓
Client Pages
zeit/next.js canary zeit/next.js insert-css-dev Change
_app.js 1.81 kB 1.81 kB ✓
_app.js gzip 873 B 873 B ✓
_error.js 12 kB 12 kB ✓
_error.js gzip 4.73 kB 4.73 kB ✓
hooks.js 12.7 kB 12.7 kB ✓
hooks.js gzip 4.79 kB 4.79 kB ✓
index.js 318 B 318 B ✓
index.js gzip 222 B 222 B ✓
link.js 8.14 kB 8.14 kB ✓
link.js gzip 3.5 kB 3.5 kB ✓
routerDirect.js 408 B 408 B ✓
routerDirect.js gzip 281 B 281 B ✓
withRouter.js 419 B 419 B ✓
withRouter.js gzip 280 B 280 B ✓
Overall change 35.8 kB 35.8 kB ✓
Client Pages Modern
zeit/next.js canary zeit/next.js insert-css-dev Change
_app.module.js 1.7 kB 1.7 kB ✓
_app.module.js gzip 832 B 832 B ✓
_error.module.js 23.3 kB 23.3 kB ✓
_error.module.js gzip 8.59 kB 8.59 kB ✓
hooks.module.js 1.52 kB 1.52 kB ✓
hooks.module.js gzip 793 B 793 B ✓
index.module.js 294 B 294 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js 8.53 kB 8.53 kB ✓
link.module.js gzip 3.68 kB 3.68 kB ✓
routerDirect.module.js 394 B 394 B ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.module.js 404 B 404 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 36.1 kB 36.1 kB ✓
Client Build Manifests
zeit/next.js canary zeit/next.js insert-css-dev Change
_buildManifest.js 81 B 81 B ✓
_buildManifest.js gzip 61 B 61 B ✓
_buildManifest.module.js 81 B 81 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 162 B 162 B ✓
Rendered Page Sizes
zeit/next.js canary zeit/next.js insert-css-dev Change
index.html 3.62 kB 3.62 kB ✓
index.html gzip 947 B 947 B ✓
link.html 3.66 kB 3.66 kB ✓
link.html gzip 955 B 955 B ✓
withRouter.html 3.67 kB 3.67 kB ✓
withRouter.html gzip 943 B 943 B ✓
Overall change 10.9 kB 10.9 kB ✓
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary zeit/next.js insert-css-dev Change
buildDuration 16.5s 16s -489ms
nodeModulesSize 48.4 MB 48.4 MB ⚠️ +1.7 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary zeit/next.js insert-css-dev Change
main-HASH.js 18.3 kB 18.3 kB ✓
main-HASH.js gzip 6.64 kB 6.64 kB ✓
webpack-HASH.js 1.53 kB 1.53 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB ✓
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB ✓
de003c3a9d30..3fa59b1f5.js 43.1 kB 43.1 kB ✓
de003c3a9d30..b1f5.js gzip 15.5 kB 15.5 kB ✓
framework.5b..dbaff70d3.js 125 kB 125 kB ✓
framework.5b..70d3.js gzip 39.4 kB 39.4 kB ✓
Overall change 210 kB 210 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary zeit/next.js insert-css-dev Change
main-HASH.module.js 16.5 kB 16.5 kB ✓
main-HASH.module.js gzip 6.39 kB 6.39 kB ✓
webpack-HASH.module.js 1.53 kB 1.53 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..4b.module.js 45.5 kB 45.5 kB ✓
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB ✓
framework.5b..d3.module.js 125 kB 125 kB ✓
framework.5b..dule.js gzip 39.4 kB 39.4 kB ✓
Overall change 189 kB 189 kB ✓
Client Pages
zeit/next.js canary zeit/next.js insert-css-dev Change
_app.js 1.81 kB 1.81 kB ✓
_app.js gzip 873 B 873 B ✓
_error.js 12 kB 12 kB ✓
_error.js gzip 4.73 kB 4.73 kB ✓
hooks.js 12.7 kB 12.7 kB ✓
hooks.js gzip 4.79 kB 4.79 kB ✓
index.js 318 B 318 B ✓
index.js gzip 222 B 222 B ✓
link.js 8.14 kB 8.14 kB ✓
link.js gzip 3.5 kB 3.5 kB ✓
routerDirect.js 408 B 408 B ✓
routerDirect.js gzip 281 B 281 B ✓
withRouter.js 419 B 419 B ✓
withRouter.js gzip 280 B 280 B ✓
Overall change 35.8 kB 35.8 kB ✓
Client Pages Modern
zeit/next.js canary zeit/next.js insert-css-dev Change
_app.module.js 1.7 kB 1.7 kB ✓
_app.module.js gzip 832 B 832 B ✓
_error.module.js 23.3 kB 23.3 kB ✓
_error.module.js gzip 8.59 kB 8.59 kB ✓
hooks.module.js 1.52 kB 1.52 kB ✓
hooks.module.js gzip 793 B 793 B ✓
index.module.js 294 B 294 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js 8.53 kB 8.53 kB ✓
link.module.js gzip 3.68 kB 3.68 kB ✓
routerDirect.module.js 394 B 394 B ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.module.js 404 B 404 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 36.1 kB 36.1 kB ✓
Client Build Manifests
zeit/next.js canary zeit/next.js insert-css-dev Change
_buildManifest.js 81 B 81 B ✓
_buildManifest.js gzip 61 B 61 B ✓
_buildManifest.module.js 81 B 81 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 162 B 162 B ✓
Serverless bundles
zeit/next.js canary zeit/next.js insert-css-dev Change
_error.js 249 kB 249 kB ✓
_error.js gzip 66.5 kB 66.5 kB ✓
hooks.html 3.75 kB 3.75 kB ✓
hooks.html gzip 980 B 980 B ✓
index.js 249 kB 249 kB ✓
index.js gzip 66.8 kB 66.8 kB ✓
link.js 257 kB 257 kB ✓
link.js gzip 68.8 kB 68.8 kB ✓
routerDirect.js 250 kB 250 kB ✓
routerDirect.js gzip 66.8 kB 66.8 kB ✓
withRouter.js 250 kB 250 kB ✓
withRouter.js gzip 66.9 kB 66.9 kB ✓
Overall change 1.26 MB 1.26 MB ✓

Commit: 8c73f30

@ijjk
Copy link
Member

ijjk commented Sep 19, 2019

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary zeit/next.js insert-css-dev Change
buildDuration 16.1s 15.8s -321ms
nodeModulesSize 48.4 MB 48.4 MB ⚠️ +1.69 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary zeit/next.js insert-css-dev Change
main-HASH.js 18.3 kB 18.3 kB ✓
main-HASH.js gzip 6.64 kB 6.64 kB ✓
webpack-HASH.js 1.53 kB 1.53 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB ✓
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB ✓
de003c3a9d30..3fa59b1f5.js 43.1 kB 43.1 kB ✓
de003c3a9d30..b1f5.js gzip 15.5 kB 15.5 kB ✓
framework.5b..dbaff70d3.js 125 kB 125 kB ✓
framework.5b..70d3.js gzip 39.4 kB 39.4 kB ✓
Overall change 210 kB 210 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary zeit/next.js insert-css-dev Change
main-HASH.module.js 16.5 kB 16.5 kB ✓
main-HASH.module.js gzip 6.39 kB 6.39 kB ✓
webpack-HASH.module.js 1.53 kB 1.53 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..4b.module.js 45.5 kB 45.5 kB ✓
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB ✓
framework.5b..d3.module.js 125 kB 125 kB ✓
framework.5b..dule.js gzip 39.4 kB 39.4 kB ✓
Overall change 189 kB 189 kB ✓
Client Pages
zeit/next.js canary zeit/next.js insert-css-dev Change
_app.js 1.81 kB 1.81 kB ✓
_app.js gzip 873 B 873 B ✓
_error.js 12 kB 12 kB ✓
_error.js gzip 4.73 kB 4.73 kB ✓
hooks.js 12.7 kB 12.7 kB ✓
hooks.js gzip 4.79 kB 4.79 kB ✓
index.js 318 B 318 B ✓
index.js gzip 222 B 222 B ✓
link.js 8.14 kB 8.14 kB ✓
link.js gzip 3.5 kB 3.5 kB ✓
routerDirect.js 408 B 408 B ✓
routerDirect.js gzip 281 B 281 B ✓
withRouter.js 419 B 419 B ✓
withRouter.js gzip 280 B 280 B ✓
Overall change 35.8 kB 35.8 kB ✓
Client Pages Modern
zeit/next.js canary zeit/next.js insert-css-dev Change
_app.module.js 1.7 kB 1.7 kB ✓
_app.module.js gzip 832 B 832 B ✓
_error.module.js 23.3 kB 23.3 kB ✓
_error.module.js gzip 8.59 kB 8.59 kB ✓
hooks.module.js 1.52 kB 1.52 kB ✓
hooks.module.js gzip 793 B 793 B ✓
index.module.js 294 B 294 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js 8.53 kB 8.53 kB ✓
link.module.js gzip 3.68 kB 3.68 kB ✓
routerDirect.module.js 394 B 394 B ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.module.js 404 B 404 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 36.1 kB 36.1 kB ✓
Client Build Manifests
zeit/next.js canary zeit/next.js insert-css-dev Change
_buildManifest.js 81 B 81 B ✓
_buildManifest.js gzip 61 B 61 B ✓
_buildManifest.module.js 81 B 81 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 162 B 162 B ✓
Rendered Page Sizes
zeit/next.js canary zeit/next.js insert-css-dev Change
index.html 3.62 kB 3.62 kB ✓
index.html gzip 947 B 947 B ✓
link.html 3.66 kB 3.66 kB ✓
link.html gzip 955 B 955 B ✓
withRouter.html 3.67 kB 3.67 kB ✓
withRouter.html gzip 943 B 943 B ✓
Overall change 10.9 kB 10.9 kB ✓
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary zeit/next.js insert-css-dev Change
buildDuration 16.6s 16.6s ⚠️ +76ms
nodeModulesSize 48.4 MB 48.4 MB ⚠️ +1.69 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary zeit/next.js insert-css-dev Change
main-HASH.js 18.3 kB 18.3 kB ✓
main-HASH.js gzip 6.64 kB 6.64 kB ✓
webpack-HASH.js 1.53 kB 1.53 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB ✓
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB ✓
de003c3a9d30..3fa59b1f5.js 43.1 kB 43.1 kB ✓
de003c3a9d30..b1f5.js gzip 15.5 kB 15.5 kB ✓
framework.5b..dbaff70d3.js 125 kB 125 kB ✓
framework.5b..70d3.js gzip 39.4 kB 39.4 kB ✓
Overall change 210 kB 210 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary zeit/next.js insert-css-dev Change
main-HASH.module.js 16.5 kB 16.5 kB ✓
main-HASH.module.js gzip 6.39 kB 6.39 kB ✓
webpack-HASH.module.js 1.53 kB 1.53 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..4b.module.js 45.5 kB 45.5 kB ✓
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB ✓
framework.5b..d3.module.js 125 kB 125 kB ✓
framework.5b..dule.js gzip 39.4 kB 39.4 kB ✓
Overall change 189 kB 189 kB ✓
Client Pages
zeit/next.js canary zeit/next.js insert-css-dev Change
_app.js 1.81 kB 1.81 kB ✓
_app.js gzip 873 B 873 B ✓
_error.js 12 kB 12 kB ✓
_error.js gzip 4.73 kB 4.73 kB ✓
hooks.js 12.7 kB 12.7 kB ✓
hooks.js gzip 4.79 kB 4.79 kB ✓
index.js 318 B 318 B ✓
index.js gzip 222 B 222 B ✓
link.js 8.14 kB 8.14 kB ✓
link.js gzip 3.5 kB 3.5 kB ✓
routerDirect.js 408 B 408 B ✓
routerDirect.js gzip 281 B 281 B ✓
withRouter.js 419 B 419 B ✓
withRouter.js gzip 280 B 280 B ✓
Overall change 35.8 kB 35.8 kB ✓
Client Pages Modern
zeit/next.js canary zeit/next.js insert-css-dev Change
_app.module.js 1.7 kB 1.7 kB ✓
_app.module.js gzip 832 B 832 B ✓
_error.module.js 23.3 kB 23.3 kB ✓
_error.module.js gzip 8.59 kB 8.59 kB ✓
hooks.module.js 1.52 kB 1.52 kB ✓
hooks.module.js gzip 793 B 793 B ✓
index.module.js 294 B 294 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js 8.53 kB 8.53 kB ✓
link.module.js gzip 3.68 kB 3.68 kB ✓
routerDirect.module.js 394 B 394 B ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.module.js 404 B 404 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 36.1 kB 36.1 kB ✓
Client Build Manifests
zeit/next.js canary zeit/next.js insert-css-dev Change
_buildManifest.js 81 B 81 B ✓
_buildManifest.js gzip 61 B 61 B ✓
_buildManifest.module.js 81 B 81 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 162 B 162 B ✓
Serverless bundles
zeit/next.js canary zeit/next.js insert-css-dev Change
_error.js 249 kB 249 kB ✓
_error.js gzip 66.5 kB 66.5 kB ✓
hooks.html 3.75 kB 3.75 kB ✓
hooks.html gzip 980 B 980 B ✓
index.js 249 kB 249 kB ✓
index.js gzip 66.8 kB 66.8 kB ✓
link.js 257 kB 257 kB ✓
link.js gzip 68.8 kB 68.8 kB ✓
routerDirect.js 250 kB 250 kB ✓
routerDirect.js gzip 66.8 kB 66.8 kB ✓
withRouter.js 250 kB 250 kB ✓
withRouter.js gzip 66.9 kB 66.9 kB ✓
Overall change 1.26 MB 1.26 MB ✓

Commit: f29ee9e

@Timer Timer changed the title Insert css *after* noscript tag in dev mode Insert <style> tags after anchor element Sep 19, 2019
@Timer Timer added this to the 9.0.7 milestone Sep 19, 2019
@Timer Timer merged commit 9b0c641 into canary Sep 19, 2019
@Timer Timer deleted the insert-css-dev branch September 19, 2019 14:53
@vercel vercel locked as resolved and limited conversation to collaborators Feb 1, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Timer Timer Awaiting requested review from Timer

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

@lfades lfades Awaiting requested review from lfades

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

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
9.0.7
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@lucleray @ijjk @Timer