fix shorthand flipping, handling of @noflip directives

package.json

@@ -37,7 +37,9 @@
     "babel-preset-flow": "^6.23.0",
     "flow-bin": "^0.78.0",
     "flow-typed": "^2.5.1",
-    "jest": "^23.5.0"
+    "jest": "^23.5.0",
+    "prettier": "^1.19.1",
+    "stylis": "^3.5.4"
   },
   "dependencies": {
     "cssjanus": "^1.3.0"

src/stylis-rtl.js

@@ -1,6 +1,6 @@
 // @flow
 
-import cssjanus from 'cssjanus'
+import cssjanus from "cssjanus";
 
 // https://github.com/thysultan/stylis.js#plugins
 const STYLIS_CONTEXTS = {
@@ -10,13 +10,16 @@ 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>;
+
+// We need to apply cssjanus as early as possible to capture the noflip directives if used
+// (they are not present at the PROPERTY, SELECTOR_BLOCK, or POST_PROCESS steps)
+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 cssjanus.transform(content);
   }
-}
+};

src/stylis-rtl.test.js

@@ -1,33 +1,80 @@
 // @flow
 
-import stylisRtlPlugin, { STYLIS_PROPERTY_CONTEXT } from './stylis-rtl'
+import Stylis from "stylis";
+import stylisRtlPlugin, { STYLIS_PROPERTY_CONTEXT } from "./stylis-rtl";
 
-describe('Stylis RTL Plugin', () => {
-  it('converts LTR to RTL', () => {
+const stylis = new Stylis();
+
+stylis.use(stylisRtlPlugin);
+
+describe("Stylis RTL Plugin", () => {
+  it("converts LTR to RTL", () => {
     expect(
-      stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, 'padding-left: 2px;')
-    ).toEqual('padding-right: 2px;')
+      stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, "padding-left: 2px;")
+    ).toEqual("padding-right: 2px;");
     expect(
-      stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, 'margin: 0 1px 0 2px;')
-    ).toEqual('margin: 0 2px 0 1px;')
-  })
+      stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, "margin: 0 1px 0 2px;")
+    ).toEqual("margin: 0 2px 0 1px;");
+  });
 
-  it('allows you to skip rules via comments', () => {
+  it("allows you to skip rules via comments", () => {
     const input = `
       margin: 0 2px 0 1px;
       /* @noflip */
       margin: 0 1px 0 2px;
       /* just a regular comment */
       margin: 0 2px 0 1px;
-    `
+    `;
 
     const output = `
       margin: 0 1px 0 2px;
       /* @noflip */
       margin: 0 1px 0 2px;
       /* just a regular comment */
       margin: 0 1px 0 2px;
+    `;
+    expect(stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, input)).toEqual(output);
+  });
+});
+
+describe("integration test with stylis", () => {
+  it("flips simple rules", () => {
+    expect(
+      stylis(
+        ".a",
+        `
+      padding-left: 5px;
+      margin-right: 5px;
+      border-left: 1px solid red;
+    `
+      )
+    ).toMatchInlineSnapshot(
+      `".a{padding-right:5px;margin-left:5px;border-right:1px solid red;}"`
+    );
+  });
+
+  it("flips shorthands", () => {
+    expect(
+      stylis(
+        ".a",
+        `
+      padding: 0 5px 0 0;
+      margin: 0 0 0 5px;
+    `
+      )
+    ).toMatchInlineSnapshot(`".a{padding:0 0 0 5px;margin:0 5px 0 0;}"`);
+  });
+
+  it("handles noflip directives", () => {
+    expect(
+      stylis(
+        ".a",
+        `
+        /* @noflip */
+      padding: 0 5px 0 0;
+      margin: 0 0 0 5px;
     `
-    expect(stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, input)).toEqual(output)
-  })
-})
+      )
+    ).toMatchInlineSnapshot(`".a{padding:0 5px 0 0;margin:0 5px 0 0;}"`);
+  });
+});