Using RTLCSS plugin instead of CSSJanus - Adding more tests

package.json

@@ -40,6 +40,6 @@
     "jest": "^23.5.0"
   },
   "dependencies": {
-    "cssjanus": "^1.3.0"
+    "rtlcss": "^2.4.0"
   }
 }

src/stylis-rtl.js

@@ -1,6 +1,7 @@
 // @flow
 
-import cssjanus from 'cssjanus'
+// https://rtlcss.com/
+import rtlcss from 'rtlcss';
 
 // https://github.com/thysultan/stylis.js#plugins
 const STYLIS_CONTEXTS = {
@@ -10,13 +11,14 @@ const STYLIS_CONTEXTS = {
   PROPERTY: 1,
   SELECTOR_BLOCK: 2,
   AT_RULE: 3
-}
+};
 
-export type StylisContextType = $Values<typeof STYLIS_CONTEXTS>
-export const STYLIS_PROPERTY_CONTEXT = STYLIS_CONTEXTS.PROPERTY
+export type StylisContextType = $Values<typeof STYLIS_CONTEXTS>;
+// Using PREPARATION because comments are getting removed at the PROPERTY level.
+export const STYLIS_PROPERTY_CONTEXT = STYLIS_CONTEXTS.PREPARATION;
 
 export default (context: StylisContextType, content: string): ?string => {
   if (context === STYLIS_PROPERTY_CONTEXT) {
-    return cssjanus.transform(content)
+    return rtlcss.process(content);
   }
-}
+};

src/stylis-rtl.test.js

@@ -1,33 +1,48 @@
 // @flow
 
-import stylisRtlPlugin, { STYLIS_PROPERTY_CONTEXT } from './stylis-rtl'
+import stylisRtlPlugin, { STYLIS_PROPERTY_CONTEXT } from './stylis-rtl';
 
 describe('Stylis RTL Plugin', () => {
   it('converts LTR to RTL', () => {
     expect(
       stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, 'padding-left: 2px;')
-    ).toEqual('padding-right: 2px;')
+    ).toEqual('padding-right: 2px;');
     expect(
       stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, 'margin: 0 1px 0 2px;')
-    ).toEqual('margin: 0 2px 0 1px;')
-  })
+    ).toEqual('margin: 0 2px 0 1px;');
+  });
+
+  it('allows you to replace a value via inline comments', () => {
+    expect(
+      stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, 'font-size: 16px/*rtl:14px*/;')
+    ).toEqual('font-size: 14px;');
+  });
 
   it('allows you to skip rules via comments', () => {
     const input = `
       margin: 0 2px 0 1px;
-      /* @noflip */
-      margin: 0 1px 0 2px;
+      /*rtl:begin:ignore*/
+      text-align:left;
+      /*rtl:end:ignore*/
       /* just a regular comment */
       margin: 0 2px 0 1px;
-    `
+    `;
 
     const output = `
       margin: 0 1px 0 2px;
-      /* @noflip */
-      margin: 0 1px 0 2px;
+      text-align:left;
       /* just a regular comment */
       margin: 0 1px 0 2px;
-    `
-    expect(stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, input)).toEqual(output)
-  })
-})
+    `;
+    expect(stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, input)).toEqual(output);
+  });
+
+  it('allows you to prepend a value via comments', () => {
+    expect(
+      stylisRtlPlugin(
+        STYLIS_PROPERTY_CONTEXT,
+        'font-family: "Droid Sans", sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/;'
+      )
+    ).toEqual('font-family: "Droid Arabic Kufi","Droid Sans", sans-serif;');
+  });
+});