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.

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

chore: adds compiled css example #22786

Merged
merged 4 commits into from
Mar 8, 2021

Conversation

itsdouges
Copy link

@itsdouges itsdouges commented Mar 5, 2021

Hiya! I was asked to add an example of how to use Compiled with Next.js, figured I might as well at it to the source 😄. Let me know if there's any changes needed.

@ijjk ijjk added the examples Issue was opened via the examples template. label Mar 5, 2021
github-Hesham
github-Hesham approved these changes Mar 5, 2021
Copy link

@github-Hesham github-Hesham left a comment

Choose a reason for hiding this comment

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

heshamalhashmi #

Copy link

@github-Hesham github-Hesham left a comment

Choose a reason for hiding this comment

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

heshamalhashmi #

github-Hesham
github-Hesham previously approved these changes Mar 5, 2021
Copy link

@github-Hesham github-Hesham left a comment

Choose a reason for hiding this comment

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

heshamalhashmi #

marcodejongh
marcodejongh previously approved these changes Mar 5, 2021
Copy link

@marcodejongh marcodejongh left a comment

Choose a reason for hiding this comment

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

Just testing to see if randoms can approve PR's

@itsdouges itsdouges dismissed stale reviews from marcodejongh, ghost , and github-Hesham via 70fe9c6 March 5, 2021 11:08
@itsdouges itsdouges force-pushed the compiled-css-example branch from 70fe9c6 to 07fe735 Compare March 6, 2021 01:19
@andreipfeiffer
Copy link
Contributor

andreipfeiffer commented Mar 6, 2021

@lfades @marcodejongh @timneutkens I have a question and can't seem to find an answer.

When you build this example, you don't get a separate chunk for the library, instead it's bundled inside each page.
The same applies for the examples for Fela and Goober.

However, for other CSS-in-JS solutions like Styled Components, Emotion, Stitches, JSS or TypeStyle you get a separate chunk of the lib, that is shared across all pages.

So, the questions are:

  • why is this difference? is there a reason for getting handled differently?
  • is there a way to control what gets to common chunks, and what not? (I've searched all the official docs, without any luck)

I would really appreciate if you could shed some light.

I'm working on a thorough analysis of all CSS-in-JS solutions with Next.js, and can't get my head around this tiny bit.

Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

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

LGTM. Thank you @Madou !

@kodiakhq kodiakhq bot merged commit 40f4cf4 into vercel:canary Mar 8, 2021
This was referenced Mar 16, 2021
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
examples Issue was opened via the examples template.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants