[next] Wrap all generated CSS with a cascade layer (WIP)

[Janpot]

One way to fix #199

• Updated stackblitz for Component styles are overridden when rendered inside Next.js layout #199
• Updated codesandbox for Priority of styleOverrides with custom theme higher than sx when using pigment-css in layout.tsx (Next.js) material-ui#43529.

Notes:

• Does this have unwanted side-effects?
• TODO: sourcemaps. Can we get away with them shifting down 1 line for the sake of a quick fix? => let's run with it for now.
• Does this belong in wyw-in-js?

Closes mui/material-ui#43705

[DiegoAndai]

Does this have unwanted side-effects?

We have visual regression tests running with Pigment on the Material UI repo, we can create a draft PR pointing to these builds to check if anything unexpected is happening there. It probably won't cover all edge cases but it would be helpful.

Can we get away with them shifting down 1 line for the sake of a quick fix?

Why do you consider this to be a quick fix?

If it is a quick fix, can users implement it on their side? We could propose it as a workaround until we agree on a definitive solution.

Does this belong in wyw-in-js?

If it is, let's try to fix it on our side anyway. We can open an issue on their repo and refactor it later, but let's not block a fix on our side.

[Janpot]

We have visual regression tests running with Pigment on the Material UI repo, we can create a draft PR pointing to these builds to check if anything unexpected is happening there. It probably won't cover all edge cases but it would be helpful.

Would this cover it? Seems to pass.

Why do you consider this to be a quick fix?

Because it's just rewriting the css without considering the source maps. This means that the links in devtools will be off by one line. It may be quite a bit more involved to write this in a way that sourcemaps are transformed as well. It all comes down to how much effort we want to pour down into fixing this. For now it's probably good enough as a fix.

If it is a quick fix, can users implement it on their side?

I don't think so, this is just a bug on our side.

[brijeshb42]

I am not sure how fool proof the fix is and if wouldn't cascade into some other bug.
Let me check this change with some calls to globalCss api.

[Janpot]

What do you mean with "globalCss api"?

I've tested by adding a ./global.css overriding some properties on Mui classes. That still works since unlayered styles are more specific than layered styles.

If this is not the fix, we're going to have to brainstorm 😄. Next.js recommends cascade layers as a way to get around this issue.

[brijeshb42]

Can you move the whole thing at the end of the if (isNext) check at line https://github.com/mui/pigment-css/blob/master/packages/pigment-css-unplugin/src/index.ts#L301

since we mainly want to do this for next.js and not webpack (unless someone reports it for webpack as well).

[brijeshb42]

Does this have unwanted side-effects?

We'll have to see if someone reports any new issues. It fixes the current bug.

TODO: sourcemaps. Can we get away with them shifting down 1 line for the sake of a quick fix? => let's run with it for now.

Sourcemaps are working without any issues since the linkage is through the generated class names which we are not touching.

Does this belong in wyw-in-js?

Not really since wyw does not have any nextjs specific solution. If it had @wyw/nextjs, then yes.

[brijeshb42]

Thanks for the fix.