@stylexjs/babel-plugin 0.1.0-beta.1

package/__tests__/stylex-transform-import-test.js

@@ -0,0 +1,310 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+jest.autoMockOff();
+
+const { transformSync } = require('@babel/core');
+const stylexPlugin = require('../src/index');
+
+function transform(source, opts = {}) {
+  return transformSync(source, {
+    filename: opts.filename,
+    parserOpts: {
+      flow: {
+        all: true,
+      },
+    },
+    plugins: [[stylexPlugin, opts]],
+  }).code;
+}
+
+describe('@stylexjs/babel-plugin', () => {
+  describe('[transform] stylex imports', () => {
+    test('ignores valid imports', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          import {foo, bar} from 'other';
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        import { foo, bar } from 'other';"
+      `);
+    });
+
+    test('ignores valid requires', () => {
+      expect(
+        transform(`
+          const stylex = require('stylex');
+          const {foo, bar} = require('other');
+        `)
+      ).toMatchInlineSnapshot(`
+        "const stylex = require('stylex');
+        const {
+          foo,
+          bar
+        } = require('other');"
+      `);
+    });
+
+    test('named declaration export', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          export const styles = stylex.create({
+            foo: {
+              color: 'red'
+            },
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x1e2nbdu{color:red}", 1);
+        export const styles = {
+          foo: {
+            color: "x1e2nbdu"
+          }
+        };"
+      `);
+    });
+
+    test('Does nothing when stylex not imported', () => {
+      expect(
+        transform(`
+          export const styles = stylex.create({
+            foo: {
+              color: 'red'
+            },
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "export const styles = stylex.create({
+          foo: {
+            color: 'red'
+          }
+        });"
+      `);
+    });
+
+    test('named property export', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            foo: {
+              color: 'red'
+            },
+          });
+          export {styles}
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x1e2nbdu{color:red}", 1);
+        const styles = {
+          foo: {
+            color: "x1e2nbdu"
+          }
+        };
+        export { styles };"
+      `);
+    });
+
+    test('default export', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          export default (stylex.create({
+            foo: {
+              color: 'red'
+            },
+          }));
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x1e2nbdu{color:red}", 1);
+        export default {
+          foo: {
+            color: "x1e2nbdu"
+          }
+        };"
+      `);
+    });
+
+    test('module.export', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            foo: {
+              color: 'red'
+            },
+          });
+          module.export = styles;
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x1e2nbdu{color:red}", 1);
+        const styles = {
+          foo: {
+            color: "x1e2nbdu"
+          }
+        };
+        module.export = styles;"
+      `);
+    });
+  });
+
+  describe('[transform] import aliases', () => {
+    test('can import with a different name ', () => {
+      expect(
+        transform(`
+          import foobar from 'stylex';
+
+          const styles = foobar.create({
+            default: {
+              backgroundColor: 'red',
+              color: 'blue',
+              padding: 5
+            }
+          });
+          styles;
+        `)
+      ).toMatchInlineSnapshot(`
+        "import foobar from 'stylex';
+        foobar.inject(".xrkmrrc{background-color:red}", 1);
+        foobar.inject(".xju2f9n{color:blue}", 1);
+        foobar.inject(".x123j3cw{padding-top:5px}", 1);
+        foobar.inject(".x1mpkggp{padding-right:5px}", 1, ".x1mpkggp{padding-left:5px}");
+        foobar.inject(".xs9asl8{padding-bottom:5px}", 1);
+        foobar.inject(".x1t2a60a{padding-left:5px}", 1, ".x1t2a60a{padding-right:5px}");
+        const styles = {
+          default: {
+            backgroundColor: "xrkmrrc",
+            color: "xju2f9n",
+            paddingTop: "x123j3cw",
+            paddingEnd: "x1mpkggp",
+            paddingBottom: "xs9asl8",
+            paddingStart: "x1t2a60a"
+          }
+        };
+        styles;"
+      `);
+    });
+
+    test('can import wildcard', () => {
+      expect(
+        transform(`
+          import * as foobar from 'stylex';
+
+          const styles = foobar.create({
+            default: {
+              backgroundColor: 'red',
+              color: 'blue',
+              padding: 5
+            }
+          });
+          styles;
+        `)
+      ).toMatchInlineSnapshot(`
+        "import * as foobar from 'stylex';
+        foobar.inject(".xrkmrrc{background-color:red}", 1);
+        foobar.inject(".xju2f9n{color:blue}", 1);
+        foobar.inject(".x123j3cw{padding-top:5px}", 1);
+        foobar.inject(".x1mpkggp{padding-right:5px}", 1, ".x1mpkggp{padding-left:5px}");
+        foobar.inject(".xs9asl8{padding-bottom:5px}", 1);
+        foobar.inject(".x1t2a60a{padding-left:5px}", 1, ".x1t2a60a{padding-right:5px}");
+        const styles = {
+          default: {
+            backgroundColor: "xrkmrrc",
+            color: "xju2f9n",
+            paddingTop: "x123j3cw",
+            paddingEnd: "x1mpkggp",
+            paddingBottom: "xs9asl8",
+            paddingStart: "x1t2a60a"
+          }
+        };
+        styles;"
+      `);
+    });
+
+    test('can import just {create}', () => {
+      expect(
+        transform(`
+          import {create} from 'stylex';
+
+          const styles = create({
+            default: {
+              backgroundColor: 'red',
+              color: 'blue',
+              padding: 5
+            }
+          });
+          styles;
+        `)
+      ).toMatchInlineSnapshot(`
+        "import { create } from 'stylex';
+        import __stylex__ from "stylex";
+        __stylex__.inject(".xrkmrrc{background-color:red}", 1);
+        __stylex__.inject(".xju2f9n{color:blue}", 1);
+        __stylex__.inject(".x123j3cw{padding-top:5px}", 1);
+        __stylex__.inject(".x1mpkggp{padding-right:5px}", 1, ".x1mpkggp{padding-left:5px}");
+        __stylex__.inject(".xs9asl8{padding-bottom:5px}", 1);
+        __stylex__.inject(".x1t2a60a{padding-left:5px}", 1, ".x1t2a60a{padding-right:5px}");
+        const styles = {
+          default: {
+            backgroundColor: "xrkmrrc",
+            color: "xju2f9n",
+            paddingTop: "x123j3cw",
+            paddingEnd: "x1mpkggp",
+            paddingBottom: "xs9asl8",
+            paddingStart: "x1t2a60a"
+          }
+        };
+        styles;"
+      `);
+    });
+
+    test('can import just {create} with alias', () => {
+      expect(
+        transform(`
+          import {create as css} from 'stylex';
+
+          const styles = css({
+            default: {
+              backgroundColor: 'red',
+              color: 'blue',
+              padding: 5
+            }
+          });
+          styles;
+        `)
+      ).toMatchInlineSnapshot(`
+        "import { create as css } from 'stylex';
+        import __stylex__ from "stylex";
+        __stylex__.inject(".xrkmrrc{background-color:red}", 1);
+        __stylex__.inject(".xju2f9n{color:blue}", 1);
+        __stylex__.inject(".x123j3cw{padding-top:5px}", 1);
+        __stylex__.inject(".x1mpkggp{padding-right:5px}", 1, ".x1mpkggp{padding-left:5px}");
+        __stylex__.inject(".xs9asl8{padding-bottom:5px}", 1);
+        __stylex__.inject(".x1t2a60a{padding-left:5px}", 1, ".x1t2a60a{padding-right:5px}");
+        const styles = {
+          default: {
+            backgroundColor: "xrkmrrc",
+            color: "xju2f9n",
+            paddingTop: "x123j3cw",
+            paddingEnd: "x1mpkggp",
+            paddingBottom: "xs9asl8",
+            paddingStart: "x1t2a60a"
+          }
+        };
+        styles;"
+      `);
+    });
+  });
+});

package/__tests__/stylex-transform-keyframes-test.js

@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+jest.autoMockOff();
+
+const { transformSync } = require('@babel/core');
+const stylexPlugin = require('../src/index');
+
+function transform(source, opts = {}) {
+  return transformSync(source, {
+    filename: opts.filename,
+    parserOpts: {
+      flow: {
+        all: true,
+      },
+    },
+    plugins: [[stylexPlugin, opts]],
+  }).code;
+}
+
+describe('@stylexjs/babel-plugin', () => {
+  describe('[transform] CSS keyframes', () => {
+    test('converts keyframes to CSS', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const name = stylex.keyframes({
+            from: {
+              backgroundColor: 'red',
+            },
+
+            to: {
+              backgroundColor: 'blue',
+            }
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject("@keyframes xbopttm-B{from{background-color:red;}to{background-color:blue;}}", 1);
+        const name = "xbopttm-B";"
+      `);
+    });
+
+    test('allows template literal references to keyframes', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const name = stylex.keyframes({
+            from: {
+              backgroundColor: 'blue',
+            },
+            to: {
+              backgroundColor: 'red',
+            },
+          });
+
+          const styles = stylex.create({
+            default: {
+              animation: \`3s \${name}\`,
+            },
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject("@keyframes x3zqmp-B{from{background-color:blue;}to{background-color:red;}}", 1);
+        const name = "x3zqmp-B";
+        stylex.inject(".x1qs41r0{animation:3s x3zqmp-B}", 1);"
+      `);
+    });
+
+    test('allows inline references to keyframes', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+
+          const styles = stylex.create({
+            default: {
+              animationName: stylex.keyframes({
+                from: {
+                  backgroundColor: 'blue',
+                },
+                to: {
+                  backgroundColor: 'red',
+                },
+              }),
+            },
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject("@keyframes x3zqmp-B{from{background-color:blue;}to{background-color:red;}}", 1);
+        stylex.inject(".xcoz2pf{animation-name:x3zqmp-B}", 1);"
+      `);
+    });
+
+    test('generates RTL-specific keyframes', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const name = stylex.keyframes({
+            from: {
+              start: 0,
+            },
+
+            to: {
+              start: 500,
+            },
+          });
+
+          export const styles = stylex.create({
+            root: {
+              animationName: name,
+            },
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject("@keyframes x1lvx8r0-B{from{left:0;}to{left:500px;}}", 1, "@keyframes x1lvx8r0-B{from{right:0;}to{right:500px;}}");
+        const name = "x1lvx8r0-B";
+        stylex.inject(".x1ugarde{animation-name:x1lvx8r0-B}", 1);
+        export const styles = {
+          root: {
+            animationName: "x1ugarde"
+          }
+        };"
+      `);
+    });
+  });
+});