fix handling of nodes

styled-components · May 5, 2021 · 79cd5b0 · 79cd5b0
1 parent a2fd792
commit 79cd5b0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/stylis-rtl.test.ts b/src/stylis-rtl.test.ts
@@ -2,7 +2,7 @@ import { compile, Middleware, middleware, prefixer, serialize, stringify } from
 import stylisRtlPlugin from './stylis-rtl';
 
 const stylis = (css: string, extraPlugins: Middleware[] = []) =>
-  serialize(compile(css), middleware([...extraPlugins, stylisRtlPlugin, stringify]));
+  serialize(compile(css), middleware([stylisRtlPlugin, ...extraPlugins, stringify]));
 
 describe('integration test with stylis', () => {
   it('flips simple rules', () => {

diff --git a/src/stylis-rtl.ts b/src/stylis-rtl.ts
@@ -1,5 +1,17 @@
 import cssjanus from 'cssjanus';
-import { COMMENT, compile, DECLARATION, IMPORT, RULESET, serialize, strlen, Middleware } from 'stylis';
+import {
+  COMMENT,
+  compile,
+  DECLARATION,
+  IMPORT,
+  RULESET,
+  serialize,
+  strlen,
+  Middleware,
+  KEYFRAMES,
+  MEDIA,
+  SUPPORTS,
+} from 'stylis';
 
 type MiddlewareParams = Parameters<Middleware>;
 
@@ -35,7 +47,11 @@ function stylisRTLPlugin(
   children: MiddlewareParams[2],
   callback: MiddlewareParams[3]
 ): string | void {
-  if (!element.root) {
+  if (
+    element.type === KEYFRAMES ||
+    element.type === SUPPORTS ||
+    (element.type === RULESET && (!element.parent || element.parent.type === MEDIA || element.parent.type === RULESET))
+  ) {
     const stringified = cssjanus.transform(stringifyPreserveComments(element, index, children));
     element.children = stringified ? compile(stringified)[0].children : [];