Update example: update to new stitches version and api #14876

christianalfoni · 2020-07-06T06:53:50Z

No description provided.

ijjk · 2020-07-06T07:02:49Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
buildDuration	12.9s	12.3s	-600ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.106	2.107	0
/ avg req/sec	1187.36	1186.79	⚠️ -0.57
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.335	1.283	-0.05
/error-in-render avg req/sec	1872.46	1947.97	+75.51

Client Bundles (main, webpack, commons)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..18e4.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.09 kB	7.09 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Rendered Page Sizes

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
index.html gzip	954 B	954 B	✓
link.html gzip	958 B	958 B	✓
withRouter.html gzip	945 B	945 B	✓
Overall change	2.86 kB	2.86 kB	✓

Serverless Mode

General

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
buildDuration	14.8s	14.8s	-28ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..18e4.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.09 kB	7.09 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Serverless bundles

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_error.js	876 kB	876 kB	✓
404.html	4.17 kB	4.17 kB	✓
hooks.html	3.79 kB	3.79 kB	✓
index.js	876 kB	876 kB	✓
link.js	915 kB	915 kB	✓
routerDirect.js	908 kB	908 kB	✓
withRouter.js	908 kB	908 kB	✓
Overall change	4.49 MB	4.49 MB	✓

Commit: 1ddaf06

timneutkens

Could you fix the linting

ijjk · 2020-07-06T20:03:38Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
buildDuration	12.1s	11.7s	-426ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.958	1.952	-0.01
/ avg req/sec	1276.69	1280.62	+3.93
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.183	1.125	-0.06
/error-in-render avg req/sec	2114.16	2222.95	+108.79

Client Bundles (main, webpack, commons)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..6834.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.09 kB	7.09 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Rendered Page Sizes

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
index.html gzip	953 B	953 B	✓
link.html gzip	959 B	959 B	✓
withRouter.html gzip	945 B	945 B	✓
Overall change	2.86 kB	2.86 kB	✓

Serverless Mode

General

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
buildDuration	12.7s	12.7s	-62ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..6834.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.09 kB	7.09 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Serverless bundles

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_error.js	876 kB	876 kB	✓
404.html	4.17 kB	4.17 kB	✓
hooks.html	3.79 kB	3.79 kB	✓
index.js	876 kB	876 kB	✓
link.js	915 kB	915 kB	✓
routerDirect.js	908 kB	908 kB	✓
withRouter.js	908 kB	908 kB	✓
Overall change	4.49 MB	4.49 MB	✓

Commit: 36d66a5

fixed

ijjk · 2020-07-07T04:05:04Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
buildDuration	12s	11.9s	-38ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.073	2.06	-0.01
/ avg req/sec	1206.26	1213.73	+7.47
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.44	1.394	-0.05
/error-in-render avg req/sec	1736.33	1793.63	+57.3

Client Bundles (main, webpack, commons)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..6834.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.09 kB	7.09 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Rendered Page Sizes

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
index.html gzip	953 B	953 B	✓
link.html gzip	959 B	959 B	✓
withRouter.html gzip	945 B	945 B	✓
Overall change	2.86 kB	2.86 kB	✓

Serverless Mode

General

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
buildDuration	13s	13.2s	⚠️ +237ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..6834.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.09 kB	7.09 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Serverless bundles

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_error.js	876 kB	876 kB	✓
404.html	4.17 kB	4.17 kB	✓
hooks.html	3.79 kB	3.79 kB	✓
index.js	876 kB	876 kB	✓
link.js	915 kB	915 kB	✓
routerDirect.js	908 kB	908 kB	✓
withRouter.js	908 kB	908 kB	✓
Overall change	4.49 MB	4.49 MB	✓

Commit: 6cc66fb

ijjk · 2020-07-07T04:07:57Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
buildDuration	13.4s	13.2s	-225ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.223	2.276	⚠️ +0.05
/ avg req/sec	1124.54	1098.37	⚠️ -26.17
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.534	1.484	-0.05
/error-in-render avg req/sec	1630.11	1684.68	+54.57

Client Bundles (main, webpack, commons)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..6834.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.09 kB	7.09 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Rendered Page Sizes

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
index.html gzip	953 B	953 B	✓
link.html gzip	959 B	959 B	✓
withRouter.html gzip	945 B	945 B	✓
Overall change	2.86 kB	2.86 kB	✓

Serverless Mode

General

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
buildDuration	14.2s	14.2s	-10ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..6834.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.09 kB	7.09 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Serverless bundles

	vercel/next.js canary	christianalfoni/next.js with-new-stitches	Change
_error.js	876 kB	876 kB	✓
404.html	4.17 kB	4.17 kB	✓
hooks.html	3.79 kB	3.79 kB	✓
index.js	876 kB	876 kB	✓
link.js	915 kB	915 kB	✓
routerDirect.js	908 kB	908 kB	✓
withRouter.js	908 kB	908 kB	✓
Overall change	4.49 MB	4.49 MB	✓

Commit: dbdad4c

peduarte · 2020-07-07T07:36:07Z

examples/with-stitches/pages/_document.js

-            {css.getStyles().map((css, index) => (
-              <style key={index}>{css}</style>
+            {extractedStyles.map((content) => (
+              <style>{content}</style>


Should we add a key here to prevent React from moaning? 😄

peduarte · 2020-07-07T07:36:23Z

examples/with-stitches-styled/pages/_document.js

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
-            <style>{css.getStyles()}</style>
+            {extractedStyles.map((content) => (
+              <style>{content}</style>


Should we add a key here to prevent React from moaning? 😄

peduarte · 2020-07-07T07:56:37Z

@christianalfoni Sorry, left some comments a bit late.

I've been working on a demo to showcase Stitches SSR and CRP and have been referring to this.

After a while of having some unexpected rendering issues, I decided to clone this and test here as well. At first it worked fine, until I realised this project and mine had different versions of Next.js.

This uses Next v9.3.5 and I was using v9.4.4.

Changing this to use Next v9.4 surfaces the same issues I'm having, which is:

Make a change
HMR kicks in and applies new styles
Refresh browser twice
Styles are gone

Also: it looks like the css vars and being defined twice, had you noticed that too?

peduarte · 2020-07-07T09:14:20Z

@christianalfoni another thing I noticed with this, although Im not sure it's related (but I believe it is):

Im unable to add an external stylesheet.
I've tried adding it in the _document_, in index and in _app

<Head>
  <link rel="stylesheet" href="https://core.modulz.app/fonts/fonts.css" />
</Head>

Adding that link tag anywhere, causes the following to happen:

update to new stitches version and api

1ddaf06

christianalfoni requested review from chibicode, ijjk, lfades, Timer and timneutkens as code owners July 6, 2020 06:53

ijjk added the examples Issue/PR related to examples label Jul 6, 2020

christianalfoni changed the title ~~update to new stitches version and api~~ Update example: update to new stitches version and api Jul 6, 2020

timneutkens approved these changes Jul 6, 2020

View reviewed changes

timneutkens previously requested changes Jul 6, 2020

View reviewed changes

remove wrong comment

36d66a5

fix lint

6cc66fb

Timer approved these changes Jul 7, 2020

View reviewed changes

Merge branch 'canary' into with-new-stitches

dbdad4c

kodiakhq bot merged commit 974cae6 into vercel:canary Jul 7, 2020

peduarte reviewed Jul 7, 2020

View reviewed changes

peduarte mentioned this pull request Jul 8, 2020

With Next.js "Prop className did not match. Server: " stitchesjs/stitches#38

Closed

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

Update example: update to new stitches version and api (vercel#14876)

f16724d

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

Update example: update to new stitches version and api #14876

Update example: update to new stitches version and api #14876

christianalfoni commented Jul 6, 2020

ijjk commented Jul 6, 2020

timneutkens left a comment

ijjk commented Jul 6, 2020

ijjk commented Jul 7, 2020

ijjk commented Jul 7, 2020

peduarte Jul 7, 2020

peduarte Jul 7, 2020

peduarte commented Jul 7, 2020 •

edited

peduarte commented Jul 7, 2020

Update example: update to new stitches version and api #14876

Update example: update to new stitches version and api #14876

Conversation

christianalfoni commented Jul 6, 2020

ijjk commented Jul 6, 2020

Stats from current PR

timneutkens left a comment

Choose a reason for hiding this comment

ijjk commented Jul 6, 2020

Stats from current PR

ijjk commented Jul 7, 2020

Stats from current PR

ijjk commented Jul 7, 2020

Stats from current PR

peduarte Jul 7, 2020

Choose a reason for hiding this comment

peduarte Jul 7, 2020

Choose a reason for hiding this comment

peduarte commented Jul 7, 2020 • edited

peduarte commented Jul 7, 2020

peduarte commented Jul 7, 2020 •

edited