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

Added with-styled-components-rtl example #10074

Merged
merged 3 commits into from Jan 14, 2020
Merged

Added with-styled-components-rtl example #10074

merged 3 commits into from Jan 14, 2020

Conversation

aganglada
Copy link
Contributor

styled-components just released v5 and with that enabled a really powerful feature, RTL styles by default using stylis plugins.

This example shows how to do it with nextjs.

@ijjk
Copy link
Member

ijjk commented Jan 13, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
buildDuration 13.5s 13.3s -181ms
nodeModulesSize 49 MB 49 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.js gzip 5.11 kB 5.11 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..9881.js gzip 13.7 kB 13.7 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 67.5 kB 67.5 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.module.js gzip 4.18 kB 4.18 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 62.1 kB 62.1 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.js gzip 1.33 kB 1.33 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.9 kB 2.9 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.87 kB 9.87 kB ✓
Client Pages Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.module.js gzip 757 B 757 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.47 kB 2.47 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.41 kB 7.41 kB ✓
Client Build Manifests
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl 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
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
index.html gzip 1.02 kB 1.02 kB ✓
link.html gzip 1.03 kB 1.03 kB ✓
withRouter.html gzip 1.01 kB 1.01 kB ✓
Overall change 3.06 kB 3.06 kB ✓
Serverless Mode
General
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
buildDuration 14.1s 14.3s ⚠️ +272ms
nodeModulesSize 49 MB 49 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.js gzip 5.11 kB 5.11 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..9881.js gzip 13.7 kB 13.7 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 67.5 kB 67.5 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.module.js gzip 4.18 kB 4.18 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 62.1 kB 62.1 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.js gzip 1.33 kB 1.33 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.9 kB 2.9 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.87 kB 9.87 kB ✓
Client Pages Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.module.js gzip 757 B 757 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.47 kB 2.47 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.41 kB 7.41 kB ✓
Client Build Manifests
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_error.js gzip 77.8 kB 77.8 kB ✓
hooks.html gzip 1.05 kB 1.05 kB ✓
index.js gzip 78 kB 78 kB ✓
link.js gzip 80.4 kB 80.4 kB ✓
routerDirect.js gzip 78.1 kB 78.1 kB ✓
withRouter.js gzip 78.1 kB 78.1 kB ✓
Overall change 393 kB 393 kB ✓

Commit: 767f14e

@lfades
Copy link
Member

lfades commented Jan 13, 2020

@aganglada Hi, thank you for the PR, can you describe what feature was enabled, what is RTL and why does it deserve its own example in the readme please 🙏

For example, in the amp example:

## The idea behind the example

This example shows how to create AMP pages using Next.js and the AMP feature. It shows a normal page (non-AMP), an AMP only page, and a hybrid AMP page.

@aganglada
Copy link
Contributor Author

@lfades Thank you for the feedback, I added a description of the example. Let me know if you find it useful.

I think i's going to be useful to have the example. There is no really good documentation from the SC side (which I intent to improve as well) on this as they just released it. I think there is going to be many people asking how to implement this (I've followed the release all over and I've had the same issue).

@ijjk
Copy link
Member

ijjk commented Jan 13, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
buildDuration 13.3s 13.2s -41ms
nodeModulesSize 49 MB 49 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.js gzip 5.11 kB 5.11 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..9881.js gzip 13.7 kB 13.7 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 67.5 kB 67.5 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.module.js gzip 4.18 kB 4.18 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 62.1 kB 62.1 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.js gzip 1.33 kB 1.33 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.9 kB 2.9 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.87 kB 9.87 kB ✓
Client Pages Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.module.js gzip 757 B 757 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.47 kB 2.47 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.41 kB 7.41 kB ✓
Client Build Manifests
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl 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
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
index.html gzip 1.02 kB 1.02 kB ✓
link.html gzip 1.03 kB 1.03 kB ✓
withRouter.html gzip 1.01 kB 1.01 kB ✓
Overall change 3.06 kB 3.06 kB ✓
Serverless Mode
General
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
buildDuration 14s 14.2s ⚠️ +195ms
nodeModulesSize 49 MB 49 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.js gzip 5.11 kB 5.11 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..9881.js gzip 13.7 kB 13.7 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 67.5 kB 67.5 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.module.js gzip 4.18 kB 4.18 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 62.1 kB 62.1 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.js gzip 1.33 kB 1.33 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.9 kB 2.9 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.87 kB 9.87 kB ✓
Client Pages Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.module.js gzip 757 B 757 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.47 kB 2.47 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.41 kB 7.41 kB ✓
Client Build Manifests
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_error.js gzip 77.8 kB 77.8 kB ✓
hooks.html gzip 1.05 kB 1.05 kB ✓
index.js gzip 78 kB 78 kB ✓
link.js gzip 80.4 kB 80.4 kB ✓
routerDirect.js gzip 78.1 kB 78.1 kB ✓
withRouter.js gzip 78.1 kB 78.1 kB ✓
Overall change 393 kB 393 kB ✓

Commit: 9a2d496

@Timer Timer added the examples Issue/PR related to examples label Jan 14, 2020
@Timer Timer added this to the 9.2.0 milestone Jan 14, 2020
Timer
Timer approved these changes Jan 14, 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 good, thanks!

@ijjk
Copy link
Member

ijjk commented Jan 14, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
buildDuration 12.3s 12.3s ⚠️ +24ms
nodeModulesSize 49 MB 49 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.js gzip 5.11 kB 5.11 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..9881.js gzip 13.7 kB 13.7 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 67.5 kB 67.5 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.module.js gzip 4.18 kB 4.18 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 62.1 kB 62.1 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.js gzip 1.33 kB 1.33 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.9 kB 2.9 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.87 kB 9.87 kB ✓
Client Pages Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.module.js gzip 757 B 757 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.47 kB 2.47 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.41 kB 7.41 kB ✓
Client Build Manifests
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl 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
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
index.html gzip 1.02 kB 1.02 kB ✓
link.html gzip 1.03 kB 1.03 kB ✓
withRouter.html gzip 1.01 kB 1.01 kB ✓
Overall change 3.06 kB 3.06 kB ✓
Serverless Mode
General
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
buildDuration 12.8s 12.7s -66ms
nodeModulesSize 49 MB 49 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.js gzip 5.11 kB 5.11 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB ✓
commons.HASH.js gzip 4.06 kB 4.06 kB ✓
de003c3a9d30..9881.js gzip 13.7 kB 13.7 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 67.5 kB 67.5 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
main-HASH.module.js gzip 4.18 kB 4.18 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB ✓
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 62.1 kB 62.1 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB ✓
Overall change 4.76 kB 4.76 kB ✓
Client Pages
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.js gzip 1.33 kB 1.33 kB ✓
_error.js gzip 4.07 kB 4.07 kB ✓
hooks.js gzip 779 B 779 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.9 kB 2.9 kB ✓
routerDirect.js gzip 283 B 283 B ✓
withRouter.js gzip 282 B 282 B ✓
Overall change 9.87 kB 9.87 kB ✓
Client Pages Modern
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_app.module.js gzip 757 B 757 B ✓
_error.module.js gzip 3.06 kB 3.06 kB ✓
hooks.module.js gzip 371 B 371 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 2.47 kB 2.47 kB ✓
routerDirect..dule.js gzip 273 B 273 B ✓
withRouter.m..dule.js gzip 272 B 272 B ✓
Overall change 7.41 kB 7.41 kB ✓
Client Build Manifests
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
zeit/next.js canary aganglada/next.js feature/with-styled-components-rtl Change
_error.js gzip 77.8 kB 77.8 kB ✓
hooks.html gzip 1.05 kB 1.05 kB ✓
index.js gzip 78 kB 78 kB ✓
link.js gzip 80.4 kB 80.4 kB ✓
routerDirect.js gzip 78.1 kB 78.1 kB ✓
withRouter.js gzip 78.1 kB 78.1 kB ✓
Overall change 393 kB 393 kB ✓

Commit: 1e8af3f

@Timer Timer merged commit c30e542 into vercel:canary Jan 14, 2020
@aganglada aganglada deleted the feature/with-styled-components-rtl branch January 15, 2020 06:38
@snyk-bot snyk-bot mentioned this pull request Feb 11, 2020
Merged
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Timer Timer Timer approved these changes

@lfades lfades Awaiting requested review from lfades

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

Successfully merging this pull request may close these issues.

None yet
4 participants
@aganglada @ijjk @lfades @Timer