diff --git a/README.md b/README.md index 6c3bb75..9980949 100644 --- a/README.md +++ b/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 ``, `/* @noflip */` comment won't work. +Because minification removes all comments from your CSS before it passes to ``, `/* @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)). -This is a fork of `stylis-rtl` for use with styled-components v5+ \ No newline at end of file +This is a fork of `stylis-plugin-rtl` for use with Material UI v5+ diff --git a/package.json b/package.json index 56c8cfc..1f8df2e 100644 --- a/package.json +++ b/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 (https://probablyup.com)" + "Evan Jacobs (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" }, diff --git a/src/stylis-rtl.test.ts b/src/stylis-rtl.test.ts index 6a5a6b6..d5a1415 100644 --- a/src/stylis-rtl.test.ts +++ b/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;}}}"` + ); + }); }); diff --git a/src/stylis-rtl.ts b/src/stylis-rtl.ts index 581bf93..81be212 100644 --- a/src/stylis-rtl.ts +++ b/src/stylis-rtl.ts @@ -11,6 +11,7 @@ import { KEYFRAMES, MEDIA, SUPPORTS, + LAYER, } from 'stylis'; type MiddlewareParams = Parameters; @@ -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)); diff --git a/yarn.lock b/yarn.lock index 594ba5a..c3d0b13 100644 --- a/yarn.lock +++ b/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"