[examples] Fix CSS modules integration #30381

oliviertassinari · 2021-12-23T11:29:09Z

A follow-up on [docs] Modify injection order for Gatsby and SSR examples #30358. @ShuPink thanks for spending time on this, however, it was not enough. I tested it locally, and it was not completely working. In the HTML output, the CSS modules styles were before the MUI Styles in the <head> element. This was leading to flickering.
I'm also doing a follow-up on [docs] Update nextjs-typescript-example #29974 that is inconsistent with the Next.js JS demo, breaks the /pages folder location, and adds unnecessary files.
Fix [examples] Nextjs CSS modules insert before emotion #29648, [docs] Add cssmodule injection order comments to Nextjs example #30213 is a good step forward, but it's not enough like for Gatsby, we need to make sure the <style> is added in the right location in the <head> relative to the <link> used to host the CSS modules styles.

This is also important when using Tailwind CSS

mui-pr-bot · 2021-12-23T11:31:05Z

Generated by 🚫 dangerJS against c0dbba9

oliviertassinari · 2021-12-23T13:25:16Z

docs/src/modules/components/Link.tsx

@@ -11,7 +11,7 @@ import { useUserLanguage } from 'docs/src/modules/utils/i18n';
 *
 * - /docs/src/modules/components/Link.tsx
 * - /examples/nextjs/src/Link.tsx
- * - /examples/nextjs-with-typescript/src/components/Link.tsx
+ * - /examples/nextjs-with-typescript/src/Link.tsx


Flatten the src folder to make it easier to discover for new users (less overwhelming).

oliviertassinari · 2021-12-23T13:26:44Z

examples/create-react-app-with-typescript/README.md

+<!-- #default-branch-switch -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript)


An alternative

oliviertassinari · 2021-12-23T13:27:24Z

examples/gatsby/README.md

-or:
-
-<!-- #default-branch-switch -->
-
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/gatsby)


It's not working and Gatsby's popularity is low, trending downward, so probably not worth trying to fix this.

oliviertassinari · 2021-12-23T13:27:45Z

examples/gatsby/plugins/gatsby-plugin-mui-emotion/gatsby-ssr.js

 import * as React from 'react';
 import { CacheProvider } from '@emotion/react';
 import createEmotionServer from '@emotion/server/create-instance';
 import { renderToString } from 'react-dom/server';
 import getEmotionCache from './getEmotionCache';

+// Inject MUI styles first to match with the prepend: true configuration.
+export const onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {


This fixes the initial HTML output (before JS hydration), #30358 was not enough.

oliviertassinari · 2021-12-23T13:28:17Z

examples/gatsby/sandbox.config.json

-{
-  "container": {
-    "node": "12"
-  }
-}


Legacy file for an old bug with Codesandbox

oliviertassinari · 2021-12-23T13:32:30Z

examples/nextjs/package.json

@@ -8,7 +8,6 @@
    "@emotion/styled": "latest",
    "@emotion/server": "latest",
    "@mui/material": "latest",
-    "clsx": "latest",


No longer needed with the styled() API

oliviertassinari · 2021-12-23T13:32:48Z

examples/nextjs/next.config.js

+module.exports = {
+  reactStrictMode: true,
+};


A healthy default for any new project. It was added in #29974 for TypeScript but we forgot about the JS version.

oliviertassinari · 2021-12-23T13:47:07Z

docs/src/modules/components/Head.js

@@ -21,7 +21,6 @@ export default function Head(props) {
  const preview = card.startsWith('http') ? card : `${HOST}${card}`;
  return (
    <NextHead>
-      <meta name="viewport" content="initial-scale=1, width=device-width" />


It's stable, no need to set it on each page. _app should do it.

oliviertassinari · 2021-12-23T13:47:36Z

examples/nextjs-with-typescript/package.json

@@ -6,7 +6,8 @@
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"


Fix regression, it was removed in #29974.

oliviertassinari · 2021-12-23T13:47:51Z

examples/nextjs-with-typescript/pages/_app.tsx

@@ -19,7 +19,6 @@ export default function MyApp(props: MyAppProps) {
  return (
    <CacheProvider value={emotionCache}>
      <Head>
-        <title>Change title in _app.tsx</title>


Should be set on each page, not once for all.

oliviertassinari · 2021-12-23T13:48:54Z

examples/ssr/README.md

-or:
-
-<!-- #default-branch-switch -->
-
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/ssr)


It's not working.

oliviertassinari · 2021-12-23T13:49:51Z

examples/nextjs-with-typescript/src/Link.tsx

  noLinkStyle?: boolean;
 } & Omit<NextLinkComposedProps, 'to' | 'linkAs' | 'href'> &
  Omit<MuiLinkProps, 'href'>;

 // A styled version of the Next.js Link component:
-// https://nextjs.org/docs/#with-link
+// https://nextjs.org/docs/api-reference/next/link


Regression introduced in #29974

siriwatknp

👍 Great improvement, especially for the CSS modules integration!

RemyMachado · 2021-12-29T14:28:18Z

I tried the latest nextjs-with-typescript example and I couldn't get it to work with CSS-modules.
There's still a FOUC.

Since the title of this PR is [examples] Fix CSS modules integration I was hoping it would be solved.
Do you have inputs on this? Should it be already working, but I'm not doing it the right way?
I would greatly appreciate indications.

oliviertassinari · 2021-12-29T15:35:03Z

@RemyMachado Do you have a reproduction I can look at?

RemyMachado · 2021-12-29T16:29:30Z

@oliviertassinari
Here's the codesandbox https://codesandbox.io/s/fooc-mui-nextjs-css-modules-ozdpo?file=/pages/index.module.css

I just used the latest nextjs-typescript example available on mui repository and added an index.module.css

When inspecting the network devtool. I can see that the server is only responsding with the emotion styling. Completely ignoring the css modules.

We are getting:

Instead of:

ShuPink · 2021-12-30T03:27:11Z

Is the FOUC issue present in your production build as well?
I think Next.js handles the loading of cssmodules a bit differently on dev and prod for hot reloading purposes

I tried running your sandbox in prod and I could see the css sheets show up in the head:

RemyMachado · 2021-12-30T12:27:39Z

Indeed, these links are showing up only on production:

     <link rel="preload" href="/_next/static/css/b8bc79d340957044.css" as="style"/>
     <link rel="stylesheet" href="/_next/static/css/b8bc79d340957044.css" data-n-p=""/>

I can't tell if it's the right file b8bc79d....css However, the FOUC is still there. It seems that the css stylesheet isn't properly used. Maybe it's overridden, I have no clue.

oliviertassinari · 2021-12-31T14:44:08Z

@RemyMachado Ok thanks for the extra details, This is not related to MUI AFAIK. It's specific to Next.js. I have taken your reproduction and removed MUI to prove it: https://github.com/oliviertassinari/fooc-nextjs-css-modules.

Now, AFAIK, there is no FOUC regardless of the content of the HTML output in dev mode. Why? Next.js loads the CSS using a JS script that is blocking until the first pain. Still, feel free to report the pain point to Next.js. I was also confused to not see the CSS loading with JavaScript disabled in dev mode at first.

[examples] Fix CSS modules integration in Gatsby

a5d4983

oliviertassinari added the docs Improvements or additions to the documentation label Dec 23, 2021

oliviertassinari force-pushed the SSR-style-injection-order branch from 3b645e9 to ffe52eb Compare December 23, 2021 11:34

add comment to explain why

88a00a6

oliviertassinari force-pushed the SSR-style-injection-order branch from ffe52eb to 88a00a6 Compare December 23, 2021 11:34

oliviertassinari marked this pull request as draft December 23, 2021 12:46

oliviertassinari mentioned this pull request Dec 23, 2021

[docs] Add cssmodule injection order comments to Nextjs example #30213

Merged

1 task

oliviertassinari force-pushed the SSR-style-injection-order branch 6 times, most recently from 795c5ac to c2854e0 Compare December 23, 2021 13:46

oliviertassinari commented Dec 23, 2021

View reviewed changes

oliviertassinari mentioned this pull request Dec 23, 2021

[docs] Update nextjs-typescript-example #29974

Merged

1 task

oliviertassinari marked this pull request as ready for review December 23, 2021 13:48

oliviertassinari changed the title ~~[examples] Fix CSS modules integration in Gatsby~~ [examples] Fix CSS modules integration Dec 23, 2021

oliviertassinari commented Dec 23, 2021

View reviewed changes

continue improving the examples

c0dbba9

oliviertassinari force-pushed the SSR-style-injection-order branch from c2854e0 to c0dbba9 Compare December 23, 2021 13:53

oliviertassinari added the examples Relating to /examples label Dec 23, 2021

siriwatknp approved these changes Dec 24, 2021

View reviewed changes

oliviertassinari merged commit 31924ee into mui:master Dec 24, 2021

oliviertassinari deleted the SSR-style-injection-order branch December 24, 2021 21:21

oliviertassinari mentioned this pull request Dec 24, 2021

[examples] Nextjs CSS modules insert before emotion #29648

Closed

2 tasks

oliviertassinari mentioned this pull request Jan 19, 2022

[docs] Add interoprability guide for using Tailwind CSS #30700

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[examples] Fix CSS modules integration #30381

[examples] Fix CSS modules integration #30381

oliviertassinari commented Dec 23, 2021 •

edited

Loading

mui-pr-bot commented Dec 23, 2021 •

edited

Loading

oliviertassinari Dec 23, 2021 •

edited

Loading

oliviertassinari Dec 23, 2021

oliviertassinari Dec 23, 2021

oliviertassinari Dec 23, 2021 •

edited

Loading

oliviertassinari Dec 23, 2021

oliviertassinari Dec 23, 2021

oliviertassinari Dec 23, 2021

oliviertassinari Dec 23, 2021

oliviertassinari Dec 23, 2021

oliviertassinari Dec 23, 2021

oliviertassinari Dec 23, 2021

oliviertassinari Dec 23, 2021

siriwatknp left a comment

RemyMachado commented Dec 29, 2021

oliviertassinari commented Dec 29, 2021

RemyMachado commented Dec 29, 2021

ShuPink commented Dec 30, 2021

RemyMachado commented Dec 30, 2021 •

edited

Loading

oliviertassinari commented Dec 31, 2021 •

edited

Loading

		<!-- #default-branch-switch -->

		[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript)

[examples] Fix CSS modules integration #30381

[examples] Fix CSS modules integration #30381

Conversation

oliviertassinari commented Dec 23, 2021 • edited Loading

mui-pr-bot commented Dec 23, 2021 • edited Loading

oliviertassinari Dec 23, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Dec 23, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp left a comment

Choose a reason for hiding this comment

RemyMachado commented Dec 29, 2021

oliviertassinari commented Dec 29, 2021

RemyMachado commented Dec 29, 2021

ShuPink commented Dec 30, 2021

RemyMachado commented Dec 30, 2021 • edited Loading

oliviertassinari commented Dec 31, 2021 • edited Loading

oliviertassinari commented Dec 23, 2021 •

edited

Loading

mui-pr-bot commented Dec 23, 2021 •

edited

Loading

oliviertassinari Dec 23, 2021 •

edited

Loading

oliviertassinari Dec 23, 2021 •

edited

Loading

RemyMachado commented Dec 30, 2021 •

edited

Loading

oliviertassinari commented Dec 31, 2021 •

edited

Loading