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

Add CSS Modules examples to docs #15601

Merged
merged 8 commits into from
Jul 29, 2020
Merged

Add CSS Modules examples to docs #15601

merged 8 commits into from
Jul 29, 2020

Conversation

lfades
Copy link
Member

@lfades lfades commented Jul 28, 2020 •
edited
Loading

Fixes #15595

  • Updated the tailwindcss and tailwindcss-emotion examples to the latest version of tailwindcss
  • Added a new with-styled-jsx example
  • Updated the basic-css example to use CSS Modules instead of styled-jsx
  • Added the examples to the documentation page for built-in css support

@ijjk ijjk added type: documentation examples Issue/PR related to examples labels Jul 28, 2020
@ijjk
Copy link
Member

ijjk commented Jul 28, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary lfades/next.js docs/css-examples Change
buildDuration 13.9s 13.7s -137ms
nodeModulesSize 65.5 MB 65.5 MB ✓
Page Load Tests Overall decrease ⚠️
vercel/next.js canary lfades/next.js docs/css-examples Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.591 2.569 -0.02
/ avg req/sec 964.85 972.97 +8.12
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.579 1.655 ⚠️ +0.08
/error-in-render avg req/sec 1583.24 1510.81 ⚠️ -72.43
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..b7a9.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-c5a676d..82de.js gzip 6.75 kB 6.75 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 56.8 kB 56.8 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..dule.js gzip 6.09 kB 6.09 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-079bffd..dule.js gzip 5.83 kB 5.83 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 51.8 kB 51.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js docs/css-examples Change
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
Overall change 30.8 kB 30.8 kB ✓
Client Pages
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-a98d9..5cb7.js gzip 3.45 kB 3.45 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-d5979..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js docs/css-examples Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes
vercel/next.js canary lfades/next.js docs/css-examples Change
index.html gzip 947 B 947 B ✓
link.html gzip 951 B 951 B ✓
withRouter.html gzip 937 B 937 B ✓
Overall change 2.83 kB 2.83 kB ✓
Serverless Mode
General
vercel/next.js canary lfades/next.js docs/css-examples Change
buildDuration 15.5s 15.5s -21ms
nodeModulesSize 65.5 MB 65.5 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..b7a9.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-c5a676d..82de.js gzip 6.75 kB 6.75 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 56.8 kB 56.8 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..dule.js gzip 6.09 kB 6.09 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-079bffd..dule.js gzip 5.83 kB 5.83 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 51.8 kB 51.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js docs/css-examples Change
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
Overall change 30.8 kB 30.8 kB ✓
Client Pages
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-a98d9..5cb7.js gzip 3.45 kB 3.45 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-d5979..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js docs/css-examples Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Serverless bundles
vercel/next.js canary lfades/next.js docs/css-examples Change
_error.js 1.02 MB 1.02 MB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 1.02 MB 1.02 MB ✓
link.js 1.06 MB 1.06 MB ✓
routerDirect.js 1.05 MB 1.05 MB ✓
withRouter.js 1.05 MB 1.05 MB ✓
Overall change 5.2 MB 5.2 MB ✓
Commit: ae1ce3c

@ijjk
Copy link
Member

ijjk commented Jul 28, 2020

Failing test suites

Commit: ae1ce3c

test/integration/error-is-clickable/test/index.test.js

  • Clickable error link > Shows error which is clickable and redirects
Expand output

● Clickable error link › Shows error which is clickable and redirects

JavascriptError: javascript error: Cannot read property 'click' of null
  (Session info: headless chrome=84.0.4147.89)

  22 |     const browser = await webdriver(appPort, '/first')
  23 | 
> 24 |     await browser.eval(`(function () {
     |     ^
  25 |           document.querySelector("nextjs-portal")
  26 |           .shadowRoot
  27 |           .querySelector("#nextjs__container_errors_desc > a").click()

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/error-is-clickable/test/index.test.js:24:5)

● Clickable error link › Shows error which is clickable and redirects

thrown: "Exceeded timeout of 300000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  19 |   afterAll(() => killApp(app))
  20 | 
> 21 |   it('Shows error which is clickable and redirects', async () => {
     |   ^
  22 |     const browser = await webdriver(appPort, '/first')
  23 | 
  24 |     await browser.eval(`(function () {

  at integration/error-is-clickable/test/index.test.js:21:3
  at Object.<anonymous> (integration/error-is-clickable/test/index.test.js:12:1)

Timer
Timer previously approved these changes Jul 29, 2020
View reviewed changes
Copy link
Member

@Timer Timer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

ijjk
ijjk reviewed Jul 29, 2020
View reviewed changes
examples/basic-css/README.md Outdated Show resolved Hide resolved
@Timer @ijjk
Apply suggestions from code review
2fc6aee 
Co-authored-by: JJ Kasper <jj@jjsweb.site>
@ijjk
Copy link
Member

ijjk commented Jul 29, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary lfades/next.js docs/css-examples Change
buildDuration 12.2s 11.9s -248ms
nodeModulesSize 65.5 MB 65.5 MB ✓
Page Load Tests Overall increase ✓
vercel/next.js canary lfades/next.js docs/css-examples Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.145 2.028 -0.12
/ avg req/sec 1165.56 1232.54 +66.98
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.162 1.168 ⚠️ +0.01
/error-in-render avg req/sec 2151.49 2140.88 ⚠️ -10.61
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..b7a9.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-c5a676d..82de.js gzip 6.75 kB 6.75 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 56.8 kB 56.8 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..dule.js gzip 6.09 kB 6.09 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-079bffd..dule.js gzip 5.83 kB 5.83 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 51.8 kB 51.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js docs/css-examples Change
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
Overall change 30.8 kB 30.8 kB ✓
Client Pages
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-a98d9..5cb7.js gzip 3.45 kB 3.45 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-6f8445b..99e1.js gzip 1.3 kB 1.3 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.72 kB 7.72 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-d5979..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-91516ae..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js docs/css-examples Change
_buildManifest.js gzip 274 B 274 B ✓
_buildManife..dule.js gzip 282 B 282 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes
vercel/next.js canary lfades/next.js docs/css-examples Change
index.html gzip 947 B 947 B ✓
link.html gzip 952 B 952 B ✓
withRouter.html gzip 937 B 937 B ✓
Overall change 2.84 kB 2.84 kB ✓
Serverless Mode
General
vercel/next.js canary lfades/next.js docs/css-examples Change
buildDuration 13.4s 13.2s -232ms
nodeModulesSize 65.5 MB 65.5 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..b7a9.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-c5a676d..82de.js gzip 6.75 kB 6.75 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 56.8 kB 56.8 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..dule.js gzip 6.09 kB 6.09 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-079bffd..dule.js gzip 5.83 kB 5.83 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 51.8 kB 51.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js docs/css-examples Change
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
Overall change 30.8 kB 30.8 kB ✓
Client Pages
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-a98d9..5cb7.js gzip 3.45 kB 3.45 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-6f8445b..99e1.js gzip 1.3 kB 1.3 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.72 kB 7.72 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-d5979..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-91516ae..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js docs/css-examples Change
_buildManifest.js gzip 274 B 274 B ✓
_buildManife..dule.js gzip 282 B 282 B ✓
Overall change 556 B 556 B ✓
Serverless bundles
vercel/next.js canary lfades/next.js docs/css-examples Change
_error.js 1.02 MB 1.02 MB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 1.02 MB 1.02 MB ✓
link.js 1.06 MB 1.06 MB ✓
routerDirect.js 1.05 MB 1.05 MB ✓
withRouter.js 1.05 MB 1.05 MB ✓
Overall change 5.2 MB 5.2 MB ✓
Commit: 2ffa7ae

@ijjk
Copy link
Member

ijjk commented Jul 29, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary lfades/next.js docs/css-examples Change
buildDuration 14.4s 14.2s -204ms
nodeModulesSize 65.5 MB 65.5 MB ✓
Page Load Tests Overall increase ✓
vercel/next.js canary lfades/next.js docs/css-examples Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.594 2.663 ⚠️ +0.07
/ avg req/sec 963.59 938.69 ⚠️ -24.9
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.573 1.504 -0.07
/error-in-render avg req/sec 1589.81 1662.12 +72.31
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..b7a9.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-c5a676d..82de.js gzip 6.75 kB 6.75 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 56.8 kB 56.8 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..dule.js gzip 6.09 kB 6.09 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-079bffd..dule.js gzip 5.83 kB 5.83 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 51.8 kB 51.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js docs/css-examples Change
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
Overall change 30.8 kB 30.8 kB ✓
Client Pages
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-a98d9..5cb7.js gzip 3.45 kB 3.45 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-6f8445b..99e1.js gzip 1.3 kB 1.3 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.72 kB 7.72 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-d5979..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-91516ae..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js docs/css-examples Change
_buildManifest.js gzip 274 B 274 B ✓
_buildManife..dule.js gzip 282 B 282 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes
vercel/next.js canary lfades/next.js docs/css-examples Change
index.html gzip 947 B 947 B ✓
link.html gzip 952 B 952 B ✓
withRouter.html gzip 937 B 937 B ✓
Overall change 2.84 kB 2.84 kB ✓
Serverless Mode
General
vercel/next.js canary lfades/next.js docs/css-examples Change
buildDuration 15.6s 15.6s -6ms
nodeModulesSize 65.5 MB 65.5 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..b7a9.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-c5a676d..82de.js gzip 6.75 kB 6.75 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 56.8 kB 56.8 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..dule.js gzip 6.09 kB 6.09 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-079bffd..dule.js gzip 5.83 kB 5.83 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 51.8 kB 51.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js docs/css-examples Change
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
Overall change 30.8 kB 30.8 kB ✓
Client Pages
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-a98d9..5cb7.js gzip 3.45 kB 3.45 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-6f8445b..99e1.js gzip 1.3 kB 1.3 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.72 kB 7.72 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-d5979..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-91516ae..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js docs/css-examples Change
_buildManifest.js gzip 274 B 274 B ✓
_buildManife..dule.js gzip 282 B 282 B ✓
Overall change 556 B 556 B ✓
Serverless bundles
vercel/next.js canary lfades/next.js docs/css-examples Change
_error.js 1.02 MB 1.02 MB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 1.02 MB 1.02 MB ✓
link.js 1.06 MB 1.06 MB ✓
routerDirect.js 1.05 MB 1.05 MB ✓
withRouter.js 1.05 MB 1.05 MB ✓
Overall change 5.2 MB 5.2 MB ✓
Commit: 2fc6aee

@ijjk
Copy link
Member

ijjk commented Jul 29, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary lfades/next.js docs/css-examples Change
buildDuration 14.3s 14.1s -209ms
nodeModulesSize 65.5 MB 65.5 MB ✓
Page Load Tests Overall decrease ⚠️
vercel/next.js canary lfades/next.js docs/css-examples Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.559 2.83 ⚠️ +0.27
/ avg req/sec 977.12 883.49 ⚠️ -93.63
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.61 1.745 ⚠️ +0.14
/error-in-render avg req/sec 1552.54 1432.58 ⚠️ -119.96
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..b7a9.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-c5a676d..82de.js gzip 6.75 kB 6.75 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 56.8 kB 56.8 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..dule.js gzip 6.09 kB 6.09 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-079bffd..dule.js gzip 5.83 kB 5.83 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 51.8 kB 51.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js docs/css-examples Change
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
Overall change 30.8 kB 30.8 kB ✓
Client Pages
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-a98d9..5cb7.js gzip 3.45 kB 3.45 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-6f8445b..99e1.js gzip 1.3 kB 1.3 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.72 kB 7.72 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-d5979..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-91516ae..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js docs/css-examples Change
_buildManifest.js gzip 274 B 274 B ✓
_buildManife..dule.js gzip 282 B 282 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes
vercel/next.js canary lfades/next.js docs/css-examples Change
index.html gzip 947 B 947 B ✓
link.html gzip 952 B 952 B ✓
withRouter.html gzip 937 B 937 B ✓
Overall change 2.84 kB 2.84 kB ✓
Serverless Mode
General
vercel/next.js canary lfades/next.js docs/css-examples Change
buildDuration 15.7s 15.8s ⚠️ +142ms
nodeModulesSize 65.5 MB 65.5 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..b7a9.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-c5a676d..82de.js gzip 6.75 kB 6.75 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 56.8 kB 56.8 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
677f882d2ed8..dule.js gzip 6.09 kB 6.09 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-079bffd..dule.js gzip 5.83 kB 5.83 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 51.8 kB 51.8 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lfades/next.js docs/css-examples Change
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
Overall change 30.8 kB 30.8 kB ✓
Client Pages
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-a98d9..5cb7.js gzip 3.45 kB 3.45 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-6f8445b..99e1.js gzip 1.3 kB 1.3 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.72 kB 7.72 kB ✓
Client Pages Modern
vercel/next.js canary lfades/next.js docs/css-examples Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-d5979..dule.js gzip 2.3 kB 2.3 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-91516ae..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary lfades/next.js docs/css-examples Change
_buildManifest.js gzip 274 B 274 B ✓
_buildManife..dule.js gzip 282 B 282 B ✓
Overall change 556 B 556 B ✓
Serverless bundles
vercel/next.js canary lfades/next.js docs/css-examples Change
_error.js 1.02 MB 1.02 MB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 1.02 MB 1.02 MB ✓
link.js 1.06 MB 1.06 MB ✓
routerDirect.js 1.05 MB 1.05 MB ✓
withRouter.js 1.05 MB 1.05 MB ✓
Overall change 5.2 MB 5.2 MB ✓
Commit: adec3f0

@kodiakhq kodiakhq bot merged commit 63ea2d8 into vercel:canary Jul 29, 2020
LauraBeatris pushed a commit to LauraBeatris/next.js that referenced this pull request Sep 1, 2020
@lfades @LauraBeatris
Add CSS Modules examples to docs (vercel#15601)
c9a3d50 
Fixes vercel#15595

- Updated the tailwindcss and tailwindcss-emotion examples to the latest version of tailwindcss
- Added a new `with-styled-jsx` example
- Updated the `basic-css` example to use CSS Modules instead of styled-jsx
- Added the examples to the documentation page for built-in css support
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ijjk ijjk ijjk approved these changes

@Timer Timer Timer approved these changes

@chibicode chibicode Awaiting requested review from chibicode

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
examples Issue/PR related to examples
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Docs] Add css examples to documentation
3 participants
@lfades @ijjk @Timer