Add FAQ section to Built-in CSS Support #13846

rafaelalmeidatk · 2020-06-06T19:53:58Z

I added a FAQ section to answer questions I see frequently. Motivation: #13625 (reply in thread)

rafaelalmeidatk · 2020-06-06T19:55:46Z

docs/basic-features/built-in-css-support.md

+
+### How can I import global styles from `node_modules` inside components code?
+
+Due to CSS ordering issues, all CSS files that aren't modules should be imported inside `pages/_app.js`.


I am not 100% sure this is the reason 🤔

ijjk · 2020-06-06T20:02:29Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
buildDuration	13s	12.8s	-208ms
nodeModulesSize	66 MB	66 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.308	2.24	-0.07
/ avg req/sec	1083.3	1115.84	⚠️ +32.54
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.389	1.403	⚠️ +0.01
/error-in-render avg req/sec	1799.9	1781.98	-17.92

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.js gzip	6.61 kB	6.61 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..9545.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.module.js gzip	5.69 kB	5.69 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
index.html gzip	927 B	927 B	✓
link.html gzip	936 B	936 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
buildDuration	16.1s	15.4s	-765ms
nodeModulesSize	66 MB	66 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.js gzip	6.61 kB	6.61 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..9545.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.module.js gzip	5.69 kB	5.69 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_error.js	878 kB	878 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	878 kB	878 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.5 MB	4.5 MB	✓

docs/basic-features/built-in-css-support.md

Co-authored-by: Luis Alvarez D. <luis@vercel.com>

ijjk · 2020-06-06T20:11:53Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
buildDuration	12.3s	11.6s	-716ms
nodeModulesSize	66 MB	66 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.144	2.161	⚠️ +0.02
/ avg req/sec	1166.11	1157.11	-9
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.355	1.319	-0.04
/error-in-render avg req/sec	1845.08	1895.69	⚠️ +50.61

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.js gzip	6.61 kB	6.61 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..9545.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.module.js gzip	5.69 kB	5.69 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
index.html gzip	927 B	927 B	✓
link.html gzip	936 B	936 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
buildDuration	12.6s	12.9s	⚠️ +270ms
nodeModulesSize	66 MB	66 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.js gzip	6.61 kB	6.61 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..9545.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.module.js gzip	5.69 kB	5.69 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_error.js	878 kB	878 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	878 kB	878 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.5 MB	4.5 MB	✓

chibicode · 2020-06-06T21:23:46Z

@rafaelalmeidatk Thanks! I think it might be better to move the section about node_modules right before the "Adding Component-Level CSS" section so it’s more visible. I edited it here: 88ee734 cc @lfades

ijjk · 2020-06-06T21:31:20Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
buildDuration	13.1s	13s	-21ms
nodeModulesSize	66 MB	66 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.229	2.302	⚠️ +0.07
/ avg req/sec	1121.72	1085.83	-35.89
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.427	1.51	⚠️ +0.08
/error-in-render avg req/sec	1751.42	1655.52	-95.9

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.js gzip	6.61 kB	6.61 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..9545.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.module.js gzip	5.69 kB	5.69 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
index.html gzip	927 B	927 B	✓
link.html gzip	936 B	936 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
buildDuration	14.3s	14.1s	-158ms
nodeModulesSize	66 MB	66 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.js gzip	6.61 kB	6.61 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..9545.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
main-HASH.module.js gzip	5.69 kB	5.69 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	vercel/next.js canary	rafaelalmeidatk/next.js patch-5	Change
_error.js	878 kB	878 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	878 kB	878 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.5 MB	4.5 MB	✓

rafaelalmeidatk · 2020-06-06T22:32:10Z

@chibicode I am fine with the change but I think it would be good to explain why it isn't possible yet since this is a common situation

Timer

LGTM!

I added a FAQ section to answer questions I see frequently. Motivation: vercel#13625 (reply in thread)

Update built-in-css-support.md

17b125f

rafaelalmeidatk requested review from chibicode, ijjk, lfades, Timer and timneutkens as code owners June 6, 2020 19:53

ijjk added the type: documentation label Jun 6, 2020

rafaelalmeidatk commented Jun 6, 2020

View reviewed changes

lfades reviewed Jun 6, 2020

View reviewed changes

docs/basic-features/built-in-css-support.md Outdated Show resolved Hide resolved

Update docs/basic-features/built-in-css-support.md

fac654b

Co-authored-by: Luis Alvarez D. <luis@vercel.com>

Update built-in-css-support.md

88ee734

Timer approved these changes Jun 6, 2020

View reviewed changes

kodiakhq bot merged commit a89afc2 into vercel:canary Jun 6, 2020

rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020

Add FAQ section to Built-in CSS Support (vercel#13846)

d7f8472

I added a FAQ section to answer questions I see frequently. Motivation: vercel#13625 (reply in thread)

vercel locked as resolved and limited conversation to collaborators Jan 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add FAQ section to Built-in CSS Support #13846

Add FAQ section to Built-in CSS Support #13846

rafaelalmeidatk commented Jun 6, 2020

rafaelalmeidatk Jun 6, 2020

ijjk commented Jun 6, 2020

ijjk commented Jun 6, 2020

chibicode commented Jun 6, 2020 •

edited

ijjk commented Jun 6, 2020

rafaelalmeidatk commented Jun 6, 2020

Timer left a comment


		### How can I import global styles from `node_modules` inside components code?

		Due to CSS ordering issues, all CSS files that aren't modules should be imported inside `pages/_app.js`.

Add FAQ section to Built-in CSS Support #13846

Add FAQ section to Built-in CSS Support #13846

Conversation

rafaelalmeidatk commented Jun 6, 2020

rafaelalmeidatk Jun 6, 2020

Choose a reason for hiding this comment

ijjk commented Jun 6, 2020

Stats from current PR

ijjk commented Jun 6, 2020

Stats from current PR

chibicode commented Jun 6, 2020 • edited

ijjk commented Jun 6, 2020

Stats from current PR

rafaelalmeidatk commented Jun 6, 2020

Timer left a comment

Choose a reason for hiding this comment

chibicode commented Jun 6, 2020 •

edited