fix: support @layer rule

README.md

@@ -1,4 +1,4 @@
-# stylis-plugin-rtl
+# mui-rtl-plugin
 
 Stylis RTL plugin based on CSSJanus
 
@@ -9,20 +9,20 @@ Stylis RTL plugin based on CSSJanus
 ### v1
 
 ```shell
-yarn add stylis-plugin-rtl@^1
+yarn add mui-rtl-plugin@^1
 ```
 
 ### v2
 
 ```shell
-yarn add stylis-plugin-rtl stylis
+yarn add mui-rtl-plugin stylis
 ```
 
 ## Usage with styled-components v5+
 
 ```javascript
 import styled, { StyleSheetManager } from "styled-components";
-import rtlPlugin from "stylis-plugin-rtl";
+import rtlPlugin from "mui-rtl-plugin";
 
 const Box = styled.div`
   padding-left: 10px;
@@ -39,9 +39,10 @@ function MakeItRTL() {
 
 #### NOTE: Preventing flipping
 
-Because minification removes all comments from your CSS before it passes to `<StyleSheetManager>`, `/* @noflip */` comment won't work. 
+Because minification removes all comments from your CSS before it passes to `<StyleSheetManager>`, `/* @noflip */` comment won't work.
 You will have to either:
-- add an exclamation mark at the beginning of the comment, like this  `/*! @noflip */`, to prevent it from being removed
+
+- add an exclamation mark at the beginning of the comment, like this `/*! @noflip */`, to prevent it from being removed
 - disable minification entirely by setting `minify` to `false` in `.babelrc` (see [styled-components documentation](https://styled-components.com/docs/tooling#minification)).
 
-<small>This is a fork of `stylis-rtl` for use with styled-components v5+</small>
+<small>This is a fork of `stylis-plugin-rtl` for use with Material UI v5+</small>

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "stylis-plugin-rtl",
-  "version": "2.1.1",
-  "description": "Fork of stylis-rtl, uses cssjanus under the hood to flip style orientations for RTL",
+  "name": "mui-rtl-plugin",
+  "version": "2.2.0",
+  "description": "Fork of stylis-plugin-rtl to fix the CSS layer issue, uses cssjanus under the hood to flip style orientations for RTL",
   "module": "dist/stylis-rtl.js",
   "main": "dist/cjs/stylis-rtl.js",
   "types": "dist/stylis-rtl.d.ts",
@@ -16,7 +16,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/styled-components/stylis-plugin-rtl.git"
+    "url": "git+https://github.com/siriwatknp/mui-rtl-plugin.git"
   },
   "keywords": [
     "rtl",
@@ -28,24 +28,25 @@
     "preprocessor",
     "styled-components"
   ],
-  "author": "Jop de Klein",
+  "author": "Siriwat K.",
   "contributors": [
-    "Evan Jacobs <[email protected]> (https://probablyup.com)"
+    "Evan Jacobs <[email protected]> (https://probablyup.com)",
+    "Siriwat K. (https://github.com/siriwatknp)"
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/styled-components/stylis-plugin-rtl/issues"
+    "url": "https://github.com/siriwatknp/mui-rtl-plugin/issues"
   },
-  "homepage": "https://github.com/styled-components/stylis-plugin-rtl#readme",
+  "homepage": "https://github.com/siriwatknp/mui-rtl-plugin#readme",
   "peerDependencies": {
     "stylis": "4.x"
   },
   "devDependencies": {
     "@types/jest": "^27.0.2",
-    "@types/stylis": "^4.0.2",
+    "@types/stylis": "4.2.7",
     "jest": "^27.3.1",
     "prettier": "^2.4.1",
-    "stylis": "^4.0.13",
+    "stylis": "4.3.6",
     "ts-jest": "^27.0.7",
     "typescript": "^4.4.4"
   },

src/stylis-rtl.test.ts

@@ -132,4 +132,43 @@ describe('integration test with stylis', () => {
       `)
     ).toMatchInlineSnapshot(`".cls{margin-left:32px;}.cls .first-child{margin-left:32px;}"`);
   });
+
+  it("works for layer rules", () => {
+    expect(
+      stylis(`
+        @layer default {
+          .cls {
+            margin-right: 32px;
+            & .first-child {
+              margin-right: 32px;
+            }
+          }
+        }
+      `)
+    ).toMatchInlineSnapshot(
+      `"@layer default{.cls{margin-left:32px;}.cls .first-child{margin-left:32px;}}"`
+    );
+  });
+
+  it("works for nested layer rules", () => {
+    expect(
+      stylis(`
+        @layer root {
+          .foo {
+            margin-right: 32px;
+          }
+          @layer default {
+            .cls {
+              margin-right: 32px;
+              & .first-child {
+                margin-right: 32px;
+              }
+            }
+          }
+        }
+      `)
+    ).toMatchInlineSnapshot(
+      `"@layer root{.foo{margin-left:32px;}@layer default{.cls{margin-left:32px;}.cls .first-child{margin-left:32px;}}}"`
+    );
+  });
 });

src/stylis-rtl.ts

@@ -11,6 +11,7 @@ import {
   KEYFRAMES,
   MEDIA,
   SUPPORTS,
+  LAYER,
 } from 'stylis';
 
 type MiddlewareParams = Parameters<Middleware>;
@@ -50,7 +51,7 @@ function stylisRTLPlugin(
   if (
     element.type === KEYFRAMES ||
     element.type === SUPPORTS ||
-    (element.type === RULESET && (!element.parent || element.parent.type === MEDIA || element.parent.type === RULESET))
+    (element.type === RULESET && (!element.parent || element.parent.type === MEDIA || element.parent.type === RULESET || element.parent.type === LAYER))
   ) {
     const stringified = cssjanus.transform(stringifyPreserveComments(element, index, children));
 

yarn.lock

@@ -599,10 +599,10 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/stylis@^4.0.2":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.0.2.tgz#311c62d68a23dfb01462d54b04549484a4c5cb2a"
-  integrity sha512-wtckGuk1eXUlUz0Qb1eXHG37Z7HWT2GfMdqRf8F/ifddTwadSS9Jwsqi4qtXk7cP7MtoyGVIHPElFCLc6HItbg==
+"@types/stylis@4.2.7":
+  version "4.2.7"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.7.tgz#1813190525da9d2a2b6976583bdd4af5301d9fd4"
+  integrity sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==
 
 "@types/yargs-parser@*":
   version "20.2.1"
@@ -2306,10 +2306,10 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
-stylis@^4.0.13:
-  version "4.0.13"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
-  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+stylis@4.3.6:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.6.tgz#7c7b97191cb4f195f03ecab7d52f7902ed378320"
+  integrity sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==
 
 supports-color@^5.3.0:
   version "5.5.0"