[mui-plugin-rtl] fix RTL does not work with CSS layer with a new package

docs/data/joy/customization/right-to-left/RtlDemo.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { prefixer } from 'stylis';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';

docs/data/joy/customization/right-to-left/RtlDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { prefixer } from 'stylis';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';

docs/data/joy/customization/right-to-left/RtlOptOut.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { styled } from '@mui/joy/styles';

docs/data/joy/customization/right-to-left/RtlOptOut.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { styled } from '@mui/joy/styles';

docs/data/joy/customization/right-to-left/right-to-left.md

@@ -60,33 +60,33 @@ const theme = extendTheme({
 
 ### 3. Configure RTL style plugin
 
-Install the [`stylis-plugin-rtl`](https://github.com/styled-components/stylis-plugin-rtl) using one of the commands below:
+Install the `@mui/stylis-plugin-rtl` using one of the commands below:
 
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install stylis stylis-plugin-rtl
+npm install stylis @mui/stylis-plugin-rtl
 ```
 
 ```bash pnpm
-pnpm add stylis stylis-plugin-rtl
+pnpm add stylis @mui/stylis-plugin-rtl
 ```
 
 ```bash yarn
-yarn add stylis stylis-plugin-rtl
+yarn add stylis @mui/stylis-plugin-rtl
 ```
 
 </codeblock>
 
 #### With Emotion
 
-If you're using Emotion, use the [CacheProvider](https://emotion.sh/docs/cache-provider) to create a new cache instance that uses `rtlPlugin` from `stylis-plugin-rtl` and add that to the top of your application tree:
+If you're using Emotion, use the [CacheProvider](https://emotion.sh/docs/cache-provider) to create a new cache instance that uses `rtlPlugin` from `@mui/stylis-plugin-rtl` and add that to the top of your application tree:
 
 ```jsx
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 
 // Create rtl cache
 const cacheRtl = createCache({
@@ -105,7 +105,7 @@ If you're using styled-components, use the [StyleSheetManager](https://styled-co
 
 ```jsx
 import { StyleSheetManager } from 'styled-components';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 
 function Rtl(props) {
   return (

docs/data/material/customization/right-to-left/RtlDemo.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { prefixer } from 'stylis';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';

docs/data/material/customization/right-to-left/RtlDemo.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider, Theme } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { prefixer } from 'stylis';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';

docs/data/material/customization/right-to-left/RtlOptOut.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { styled } from '@mui/material/styles';

docs/data/material/customization/right-to-left/RtlOptOut.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { styled } from '@mui/material/styles';

docs/data/material/customization/right-to-left/right-to-left.md

@@ -60,33 +60,33 @@ const theme = createTheme({
 
 ### 3. Configure RTL style plugin
 
-Install the [`stylis-plugin-rtl`](https://github.com/styled-components/stylis-plugin-rtl) using one of the commands below:
+Install the `@mui/stylis-plugin-rtl` using one of the commands below:
 
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install stylis stylis-plugin-rtl
+npm install stylis @mui/stylis-plugin-rtl
 ```
 
 ```bash pnpm
-pnpm add stylis stylis-plugin-rtl
+pnpm add stylis @mui/stylis-plugin-rtl
 ```
 
 ```bash yarn
-yarn add stylis stylis-plugin-rtl
+yarn add stylis @mui/stylis-plugin-rtl
 ```
 
 </codeblock>
 
 #### With Emotion
 
-If you're using Emotion, use the [CacheProvider](https://emotion.sh/docs/cache-provider) to create a new cache instance that uses `rtlPlugin` from `stylis-plugin-rtl` and add that to the top of your application tree:
+If you're using Emotion, use the [CacheProvider](https://emotion.sh/docs/cache-provider) to create a new cache instance that uses `rtlPlugin` from `@mui/stylis-plugin-rtl` and add that to the top of your application tree:
 
 ```jsx
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 
 // Create rtl cache
 const rtlCache = createCache({
@@ -105,7 +105,7 @@ If you're using styled-components, use the [StyleSheetManager](https://styled-co
 
 ```jsx
 import { StyleSheetManager } from 'styled-components';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 
 function Rtl(props) {
   return (

docs/package.json

@@ -40,6 +40,7 @@
     "@mui/system": "workspace:^",
     "@mui/types": "workspace:^",
     "@mui/utils": "workspace:^",
+    "@mui/stylis-plugin-rtl": "workspace:^",
     "@mui/x-charts": "8.3.1",
     "@mui/x-data-grid": "8.3.1",
     "@mui/x-data-grid-generator": "8.3.1",
@@ -105,7 +106,6 @@
     "rimraf": "^6.0.1",
     "styled-components": "^6.1.18",
     "stylis": "4.2.0",
-    "stylis-plugin-rtl": "^2.1.1",
     "use-count-up": "^3.0.1",
     "webpack-bundle-analyzer": "^4.10.2"
   },

docs/src/BrandingCssVarsProvider.tsx

@@ -150,6 +150,19 @@ export default function BrandingCssVarsProvider(props: {
       setDocsColors(nextPaletteColors.primary, nextPaletteColors.secondary);
     }
   }, []);
+  useEnhancedEffect(() => {
+    // This is required to ensure that the layer order is declared first in the head
+    // because when the direction is RTL on the client, emotion reinserts the RTL styles back to the top of the insertion point.
+    if (direction === 'rtl') {
+      const head = document.querySelector('head');
+      if (head) {
+        const style = document.createElement('style');
+        style.textContent =
+          '@layer theme, docsearch, mui, mui.global, mui.default, mui.theme, mui.custom, mui.sx, utilities;';
+        head.prepend(style);
+      }
+    }
+  }, [direction]);
   return (
     <ThemeProvider
       theme={theme}

docs/src/modules/components/AppTableOfContents.js

@@ -21,7 +21,7 @@ const Nav = styled('nav')(({ theme }) => ({
   overflowY: 'auto',
   paddingTop: theme.spacing(4),
   paddingBottom: theme.spacing(7),
-  paddingRight: theme.spacing(4), // We can't use `padding` as stylis-plugin-rtl doesn't swap it
+  paddingRight: theme.spacing(4), // We can't use `padding` as @mui/stylis-plugin-rtl doesn't swap it
   display: 'none',
   scrollbarWidth: 'thin',
   [theme.breakpoints.up('md')]: {

docs/src/modules/components/DemoSandbox.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { StyleSheetManager } from 'styled-components';

docs/src/modules/utils/StyledEngineProvider.js

@@ -4,7 +4,7 @@ import { StyleSheetManager } from 'styled-components';
 import { CacheProvider } from '@emotion/react';
 import { createEmotionCache as createCache } from '@mui/material-nextjs/v15-pagesRouter';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { ThemeOptionsContext } from 'docs/src/modules/components/ThemeContext';
 import globalSelector from './globalSelector';

packages/mui-stylis-plugin-rtl/README.md

@@ -0,0 +1,51 @@
+# @mui/stylis-plugin-rtl
+
+Stylis RTL plugin for Material UI.
+
+> Note: this is a fork of [stylis-plugin-rtl](https://github.com/styled-components/stylis-plugin-rtl) to fix issues with CSS layers and to support the latest version of Stylis.
+
+## Installation
+
+```bash
+npm install @mui/stylis-plugin-rtl @emotion/cache stylis
+```
+
+## Usage
+
+```js
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
+import { prefixer } from 'stylis';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+
+const theme = createTheme({
+  direction: 'rtl',
+});
+
+const cacheRtl = createCache({
+  key: 'muirtl',
+  stylisPlugins: [prefixer, rtlPlugin],
+});
+
+export default function RtlDemo() {
+  return (
+    <CacheProvider value={cacheRtl}>
+      <ThemeProvider theme={theme}>
+        <div dir="rtl">
+          <TextField
+            label="ملصق"
+            placeholder="العنصر النائب"
+            helperText="هذا نص مساعد"
+            variant="outlined"
+          />
+        </div>
+      </ThemeProvider>
+    </CacheProvider>
+  );
+}
+```
+
+For more information, see the [RTL documentation](https://mui.com/material-ui/guides/right-to-left/).

packages/mui-stylis-plugin-rtl/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@mui/stylis-plugin-rtl",
+  "version": "7.1.0",
+  "author": "MUI Team",
+  "description": "A plugin for Material UI that provides RTL (right-to-left) support.",
+  "main": "./src/index.ts",
+  "keywords": [
+    "react",
+    "react-component",
+    "mui",
+    "rtl"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mui/material-ui.git",
+    "directory": "packages/mui-stylis-plugin-rtl"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui/material-ui/issues"
+  },
+  "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-utils",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "scripts": {
+    "build": "pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
+    "build:node": "node ../../scripts/build.mjs node",
+    "build:stable": "node ../../scripts/build.mjs stable",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:types": "tsx ../../scripts/buildTypes.mts",
+    "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
+    "release": "pnpm build && pnpm publish",
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-utils/**/*.test.?(c|m)[jt]s?(x)'",
+    "typescript": "tsc -p tsconfig.json",
+    "attw": "attw --pack ./build --exclude-entrypoints esm modern"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.27.1",
+    "cssjanus": "^2.0.1"
+  },
+  "devDependencies": {
+    "@mui/internal-test-utils": "workspace:^",
+    "@types/chai": "^4.3.20",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^20.17.50",
+    "@types/sinon": "^17.0.4",
+    "@types/stylis": "4.2.7",
+    "chai": "^4.5.0",
+    "sinon": "^19.0.5",
+    "stylis": "4.3.6"
+  },
+  "peerDependencies": {
+    "stylis": "4.x"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "directory": "build"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}