Next.js integration example

[andreipfeiffer]

Is your feature request related to a problem? Please describe.
I would like to include Compiled in my CSS-in-TS analysis.

Describe the solution you'd like
A working example with Next.js will greatly help.

Describe alternatives you've considered
I've searched for articles or any example, but couldn't find any.
I've also searched the Next.js examples folder.

[itsdouges]

Heya! Thanks for the issue

Can you add bespoke webpack plugins to next? You could try using the webpack loader

[andreipfeiffer]

Yes, it is possible to add webpack plugins in Next.js.

However, I feel that there's more to that, regarding:

• code splitting
• SSR
• development vs production builds

Setting all these up requires a bit of understanding of how the library works under the hood.

Other CSS-in-JS libraries either provide:

• a Next.js plugin
• or an integration example, typically in Next.js examples folder.

[itsdouges]

That's fair!

Currently without the CSS extraction story (spike here: #561) you can actually just add the webpack plugin and all your points will work.

• code splitting (works because everything is JS)
• SSR (works the same as emotion SSR)
• dev vs. prod (works when building prod with NODE_ENV=production)

So you should just be able to add the plugin and you're good to go! When the CSS extraction comes into play, as well as extracting from NPM packages - then it'll be slightly more complex (but it isn't shipped yet).

[andreipfeiffer]

Hey @Madou thanks for the info, I'll give it a try then.

As a side note: what is the plan regarding CSS extraction? do you plan to ship it sometimes this year?

[itsdouges]

Good luck! We are hoping to ship this year yes

[andreipfeiffer]

@Madou one more thing:

When you say CSS extraction, do you mean:

1. Critical CSS extraction for SSR?
2. Static CSS files extraction, without runtime?

[itsdouges]

The latter

…

On Thu, 4 Mar 2021, 6:44 pm Andrei Pfeiffer, ***@***.***> wrote: @Madou <https://github.com/madou> one more thing: When you say CSS extraction, do you mean: 1. Critical CSS extraction for SSR? 2. Static CSS files extraction, without runtime? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#603 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABT4PHJZXEFMQ4NGAO7CBKTTB426LANCNFSM4YPYXUFQ> .

[andreipfeiffer]

As I said, theoretically it's simple, but the devil is in the details :)
I get a cryptic error, which seems to be thrown by webpack:

TypeError: this.getOptions is not a function

Apparently, there are a lot of such errors reported on the web, and it seems to be due to a breaking change in webpack versions: https://webpack.js.org/migrate/5/#getoptions-method-for-loaders

What version of webpack does your plugin supports?

[itsdouges]

It supports v5, we should put a peer dependency if it's not in there - sorry!

[itsdouges]

I'll spend some time setting up an example, i'll put up a PR against next.

[itsdouges]

I've updated compiled to work with v4 and also added a next example here vercel/next.js#22786

👍 let me know how you go

[andreipfeiffer]

Hey @Madou thanks a lot, man, I really appreciate the effort.

• I left you a comment on your PR
• I'll start my review today and let you know if I encounter any issues

[andreipfeiffer]

@Madou there's only 1 thing I cannot figure out:

Is there any specific API or approach for defining global styles?
ie: styles for default font-family, for html or body

[andreipfeiffer]

@Madou apart from the global styles question mentioned above, I have some more questions:

1. is Compiled framework agnostic? or React-only?
2. does it come with a built-in theming system?
3. using the ClassNames package (which apparently is also React specific) is the only option to get a string of CSS class names, right?
4. I'm also including the global styles question here

[itsdouges]

Hello

Is there any specific API or approach for defining global styles? ie: styles for default font-family, for html or body

not at this time #62

is Compiled framework agnostic? or React-only?

react only for now.

does it come with a built-in theming system?

not at this time #18

using the ClassNames package (which apparently is also React specific) is the only option to get a string of CSS class names, right?

yes

[andreipfeiffer]

Hi @Madou don't know where is best to post this, but here's the review on the library:
https://github.com/andreipfeiffer/css-in-js/blob/main/README.md#compiled

Thank you again for helping out with this.

[itsdouges]

Thanks!

Re:

bundles nested styles even if they are not used in component

What do you mean by this?

Also totally agree with the ClassNames component. I wrote up a thought here #618

[andreipfeiffer]

Regarding unused bundle styles, it's something that each library does one way or another (see the .unused_styles nested rule, for example)

This is more prevalent in libraries that support any arbitrary nested selector, as it doesn't enforce good practices for scalable CSS, so anybody could add any nested rules, that the library doesn't check against the template to see if they really are used (I understand that it could be way too involved to do this, and in some case like dynamic selectors or certain pseudos it's practically impossible).

The only libraries that I haven't seen to bundle nested styles are:

• style9
• Tailwind (which is not css-in-js, and it has no nesting)

I think I should probably move that bullet into the Overall observations section, as all libs have this behaviour.

[itsdouges]

Sure! There is a strict mode we'd like to investigate later, see: #182

Realistically though it would be an opt in thing. If we do it.

[andreipfeiffer]

Oohhh, very nice.

For backwards compatibility, you would probably have it opt-in, yes. However, if you implement such a feature, then:

• probably you would have a mechanism to detect those rules (in strict mode)
• with that in place, you could/should throw some errors (at built, or runtime) so the developer knows what's happening

Considering the above 2 statements, you could flip the logic:

• make it opt-out, enabled by default
• when you throw the error, you could point to the docs to tell the devs that if they need that feature, they can disable strict mode
• this way, you're promoting good practices, while also providing an escape hatch for those that understand the consequences

... just a thought.