[fix] mui-stylis-plugin-rtl not wrapping css with @layer bug fixed wi… #46611
Conversation
…th a factory fn
Netlify deploy previewhttps://deploy-preview-46611--material-ui.netlify.app/ Bundle size reportℹ️ Using snapshot from parent commit 499f347 (fallback from merge base cf8e5ab).
|
zannager
added
the
scope: system
|
Thanks for submitting the PR but there is no need to create a factory function. The last piece to add RTL support is: import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import { prefixer } from 'stylis';
import rtlPlugin from '@mui/stylis-plugin-rtl'
export default function RootLayout() {
return (
<html lang="en" suppressHydrationWarning>
<body>
<AppRouterCacheProvider options={{ enableCssLayer: true, stylisPlugins: [prefixer, rtlPlugin] }}>
{/* Your app */}
</AppRouterCacheProvider>
</body>
</html>
);
}Here is a preview https://stackblitz.com/edit/github-z8dxvj7v?file=src%2Fapp%2Fpage.tsx Please close the PR if it works on your side. |
|
In this example, you are correct — I should have provided more context. I ran into issues setting up StackBlitz, so I am providing a GitHub repository instead. Github Repository: https://github.com/sina-byn/next-mui-boilerplate The problem occurs when there are two languages:
When switching between the two, the styles applied by Tailwind to a link are not applied in RTL. After inspecting, I found that the mui layer is not applied at this stage. From what I’ve read, this issue previously existed before Tailwind CSS support became stable. What I Tried / Proposed Solution With this update: When supporting both directions (LTR & RTL), you should add the factoryFn. When supporting only one direction, the current implementation remains sufficient. The problem was originally reported by you, and I found my solution from this comment: Related Issues Original issue: #44700 |
|
I'm still waiting for your feedback. Would be glad if you checked it. |
Working on a Next.js app router and MUI project using tailwindcss for customizations. I found that when changing to
RTLthe rtl cache provider does not wrap CSS with@layer muieven thoughenableCssLayeris set totrue. This ruins the tailwindcss integration because the layer ordering is not properly applied. So based on these two issues #44700 - emotion-js/emotion#3134 (comment). I refactored themui-stylis-plugin-rtlto export a plugin factory that accepts an optinal layer name. If provided the output CSS will be wrapped with an@layer <layer-name>and if not the output will be as is.If this pull request is merged I'm willing to update both tests and the documentation website ASAP, which isn't possible for now since there's a major change in tests which happen to use the installed version of the plugin, so updating tests isn't possible before updating the package.