@stylexjs/babel-plugin 0.1.0-beta.1

package/__tests__/stylex-transform-value-normalize-test.js

@@ -0,0 +1,287 @@
+/**
+ * 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', () => {
+  /**
+   * CSS value normalization
+   */
+
+  describe('[transform] CSS value normalization', () => {
+    test('normalize whitespace in CSS values', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            x: {
+              transform: '  rotate(10deg)  translate3d( 0 , 0 , 0 )  '
+            }
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x18qx21s{transform:rotate(10deg) translate3d(0,0,0)}", 1);"
+      `);
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({ x: { color: 'rgba( 1, 222,  33 , 0.5)' } });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".xe1l9yr{color:rgba(1,222,33,.5)}", 1);"
+      `);
+    });
+
+    test('no dimensions for 0 values', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({ x: {
+            margin: '0px',
+            marginLeft: '1px'
+          } });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".xdj266r{margin-top:0}", 1);
+        stylex.inject(".x11i5rnm{margin-right:0}", 1, ".x11i5rnm{margin-left:0}");
+        stylex.inject(".xat24cr{margin-bottom:0}", 1);
+        stylex.inject(".x1mh8g0r{margin-left:0}", 1, ".x1mh8g0r{margin-right:0}");
+        stylex.inject(".xgsvwom{margin-left:1px}", 1.1);"
+      `);
+    });
+
+    test('0 timings are all "0s"', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({ x: { transitionDuration: '500ms' } });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x1wsgiic{transition-duration:.5s}", 1);"
+      `);
+    });
+
+    test('0 angles are all "0deg"', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            x: { transform: '0rad' },
+            y: { transform: '0turn' },
+            z: { transform: '0grad' }
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x1jpfit1{transform:0deg}", 1);"
+      `);
+    });
+
+    test('calc() preserves spaces aroung "+" and "-"', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({ x: { width: 'calc((100% + 3% -   100px) / 7)' } });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x1hauit9{width:calc((100% + 3% - 100px) / 7)}", 1);"
+      `);
+    });
+
+    test('strip leading zeros', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({ x: {
+            transitionDuration: '0.01s',
+            transitionTimingFunction: 'cubic-bezier(.08,.52,.52,1)'
+          } });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".xpvlhck{transition-duration:.01s}", 1);
+        stylex.inject(".xxziih7{transition-timing-function:cubic-bezier(.08,.52,.52,1)}", 1);"
+      `);
+    });
+
+    test('use double quotes in empty strings', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({ x: { quotes: "''" } });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x169joja{quotes:\\"\\"}", 1);"
+      `);
+    });
+
+    test('timing values are converted to seconds unless < 10ms', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            x: { transitionDuration: '1234ms' },
+            y: { transitionDuration: '10ms' },
+            z: { transitionDuration: '1ms' }
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".xsa3hc2{transition-duration:1.234s}", 1);
+        stylex.inject(".xpvlhck{transition-duration:.01s}", 1);
+        stylex.inject(".xjd9b36{transition-duration:1ms}", 1);"
+      `);
+    });
+
+    test('transforms non-unitless property values', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            normalize: {
+              height: 500,
+              margin: 10,
+              width: 500
+            },
+            unitless: {
+              fontWeight: 500,
+              lineHeight: 1.5,
+              opacity: 0.5
+            },
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x1egiwwb{height:500px}", 1);
+        stylex.inject(".x1anpbxc{margin-top:10px}", 1);
+        stylex.inject(".xmo9yow{margin-right:10px}", 1, ".xmo9yow{margin-left:10px}");
+        stylex.inject(".xyorhqc{margin-bottom:10px}", 1);
+        stylex.inject(".x17adc0v{margin-left:10px}", 1, ".x17adc0v{margin-right:10px}");
+        stylex.inject(".xvue9z{width:500px}", 1);
+        stylex.inject(".xk50ysn{font-weight:500}", 1);
+        stylex.inject(".x1evy7pa{line-height:1.5}", 1);
+        stylex.inject(".xbyyjgo{opacity:.5}", 1);"
+      `);
+    });
+
+    test('number values rounded down to four decimal points', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({ x: { height: 100 / 3 } });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x1vvwc6p{height:33.3333px}", 1);"
+      `);
+    });
+
+    test('"content" property values are wrapped in quotes', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            default: {
+              content: '',
+            },
+            other: {
+              content: 'next',
+            },
+            withQuotes: {
+              content: '"prev"',
+            }
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x14axycx{content:\\"\\"}", 1);
+        stylex.inject(".xmmpjw1{content:\\"next\\"}", 1);
+        stylex.inject(".x12vzfr8{content:\\"prev\\"}", 1);"
+      `);
+    });
+
+    test('[legacy] transforms font size from px to rem', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            foo: {
+              fontSize: '24px',
+            },
+            bar: {
+              fontSize: 18,
+            },
+            baz: {
+              fontSize: '1.25rem',
+            },
+            qux: {
+              fontSize: 'inherit',
+            }
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".xngnso2{font-size:1.5rem}", 1);
+        stylex.inject(".x1c3i2sq{font-size:1.125rem}", 1);
+        stylex.inject(".x1603h9y{font-size:1.25rem}", 1);
+        stylex.inject(".x1qlqyl8{font-size:inherit}", 1);"
+      `);
+    });
+
+    test('[legacy] transforms font size from px to rem even with calc', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            foo: {
+              fontSize: 'calc(100% - 24px)',
+            },
+          });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".x37c5sx{font-size:calc(100% - 1.5rem)}", 1);"
+      `);
+    });
+
+    test('[legacy] no space before "!important"', () => {
+      expect(
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({ x: { color: 'red !important' } });
+        `)
+      ).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+        stylex.inject(".xzw3067{color:red!important}", 1);"
+      `);
+    });
+  });
+});

package/__tests__/stylex-transform-variable-removal-test.js

@@ -0,0 +1,112 @@
+/**
+ * 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 = {}) {
+  const options = {
+    filename: opts.filename,
+    plugins: [[stylexPlugin, opts]],
+  };
+  const result = transformSync(source, options);
+  return result;
+}
+
+describe('[optimization] Removes `styles` variable when not needed', () => {
+  test('Keeps used styles', () => {
+    const result = transform(`
+      import stylex from 'stylex';
+
+      const styles = stylex.create({
+        default: {
+          backgroundColor: 'red',
+          color: 'blue',
+        }
+      });
+      styles;
+    `);
+    expect(result.code).toMatchInlineSnapshot(`
+      "import stylex from 'stylex';
+      stylex.inject(".xrkmrrc{background-color:red}", 1);
+      stylex.inject(".xju2f9n{color:blue}", 1);
+      const styles = {
+        default: {
+          backgroundColor: "xrkmrrc",
+          color: "xju2f9n"
+        }
+      };
+      styles;"
+    `);
+    expect(result.metadata).toMatchInlineSnapshot(`
+      {
+        "stylex": [
+          [
+            "xrkmrrc",
+            {
+              "ltr": ".xrkmrrc{background-color:red}",
+              "rtl": null,
+            },
+            1,
+          ],
+          [
+            "xju2f9n",
+            {
+              "ltr": ".xju2f9n{color:blue}",
+              "rtl": null,
+            },
+            1,
+          ],
+        ],
+      }
+    `);
+  });
+
+  test('Removes unused styles', () => {
+    const result = transform(`
+      import stylex from 'stylex';
+
+      const styles = stylex.create({
+        default: {
+          backgroundColor: 'red',
+          color: 'blue',
+        }
+      });
+    `);
+    expect(result.code).toMatchInlineSnapshot(`
+      "import stylex from 'stylex';
+      stylex.inject(".xrkmrrc{background-color:red}", 1);
+      stylex.inject(".xju2f9n{color:blue}", 1);"
+    `);
+    expect(result.metadata).toMatchInlineSnapshot(`
+      {
+        "stylex": [
+          [
+            "xrkmrrc",
+            {
+              "ltr": ".xrkmrrc{background-color:red}",
+              "rtl": null,
+            },
+            1,
+          ],
+          [
+            "xju2f9n",
+            {
+              "ltr": ".xju2f9n{color:blue}",
+              "rtl": null,
+            },
+            1,
+          ],
+        ],
+      }
+    `);
+  });
+});

package/__tests__/stylex-validation-create-test.ts

@@ -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.
+ */
+
+jest.autoMockOff();
+
+import { transformSync } from '@babel/core';
+import { messages } from '@stylexjs/shared';
+import stylexPlugin from '../src/index';
+
+function transform(source: string, opts: { [key: string]: any } = {}) {
+  return transformSync(source, {
+    filename: opts.filename,
+    parserOpts: {
+      flow: {
+        all: true,
+      },
+    } as any,
+    plugins: [[stylexPlugin, opts]],
+  });
+}
+
+describe('@stylexjs/babel-plugin', () => {
+  /**
+   * stylex.create
+   */
+
+  describe('[validation] stylex.create()', () => {
+    test('must be bound to a variable', () => {
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          stylex.create({});
+        `);
+      }).toThrow(messages.UNBOUND_STYLEX_CALL_VALUE);
+    });
+
+    test('must be called at top level', () => {
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          if (bar) {
+            const styles = stylex.create({});
+          } 
+       `);
+      }).toThrow(messages.ONLY_TOP_LEVEL);
+    });
+
+    test('its only argument must be a single object', () => {
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create(genStyles());
+        `);
+      }).toThrow(messages.NON_OBJECT_FOR_STYLEX_CALL);
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create();
+        `);
+      }).toThrow(messages.ILLEGAL_ARGUMENT_LENGTH);
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({}, {});
+        `);
+      }).toThrow(messages.ILLEGAL_ARGUMENT_LENGTH);
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({});
+        `);
+      }).not.toThrow();
+    });
+
+    test('namespace keys must be a static value', () => {
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            [root]: {
+              backgroundColor: 'red',
+            }
+          });
+        `);
+      }).toThrow(messages.NON_STATIC_VALUE);
+    });
+
+    test('namespace values must be an object', () => {
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            namespace: false,
+          });
+        `);
+      }).toThrow(messages.ILLEGAL_NAMESPACE_VALUE);
+      expect(() => {
+        transform(`
+          const styles = stylex.create({
+            namespace: {},
+          });
+        `);
+      }).not.toThrow();
+    });
+
+    /* Properties */
+
+    test('properties must be a static value', () => {
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            root: {
+              [backgroundColor]: 'red',
+            }
+          });
+        `);
+      }).toThrow(messages.NON_STATIC_VALUE);
+    });
+
+    /* Values */
+
+    test('values must be static (arrays of) number or string in stylex.create()', () => {
+      // number
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            root: {
+              padding: 5,
+            }
+          });
+        `);
+      }).not.toThrow();
+      // string
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            root: {
+              backgroundColor: 'red',
+            }
+          });
+        `);
+      }).not.toThrow();
+      // array of numbers
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            default: {
+              transitionDuration: [500],
+            },
+          });
+        `);
+      }).not.toThrow();
+      // array of strings
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            default: {
+              transitionDuration: ['0.5s'],
+            },
+          });
+        `);
+      }).not.toThrow();
+      // not string or number
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            default: {
+              transitionDuration: [[], {}],
+            },
+          });
+        `);
+      }).toThrow(messages.ILLEGAL_PROP_ARRAY_VALUE);
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            default: {
+              color: true,
+            },
+          });
+        `);
+      }).toThrow(messages.ILLEGAL_PROP_VALUE);
+      // not static
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            root: {
+              backgroundColor: backgroundColor,
+            }
+          });
+        `);
+      }).toThrow(messages.NON_STATIC_VALUE);
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            root: {
+              backgroundColor: generateBg(),
+            }
+          });
+        `);
+      }).toThrow(messages.NON_STATIC_VALUE);
+    });
+
+    test('values can reference local bindings in stylex.create()', () => {
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const bg = '#eee';
+          const styles = stylex.create({
+            root: {
+              backgroundColor: bg,
+            }
+          });
+        `);
+      }).not.toThrow();
+    });
+
+    test('values can be pure complex expressions in stylex.create()', () => {
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const borderRadius = 2;
+          const styles = stylex.create({
+            root: {
+              borderRadius: borderRadius * 2,
+            }
+          });
+        `);
+      }).not.toThrow();
+    });
+
+    test('values can be template literal expressions in stylex.create()', () => {
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const borderSize = 2;
+          const styles = stylex.create({
+            root: {
+              borderRadius: \`\${borderSize * 2}px\`,
+            }
+          });
+        `);
+      }).not.toThrow();
+    });
+
+    /* Complex selectors */
+
+    test('pseudo-classes must start with ":" character', () => {
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            default: {
+              ':hover': {},
+            },
+          });
+        `);
+      }).not.toThrow();
+
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            default: {
+              'hover': {},
+            },
+          });
+        `);
+      }).toThrow(messages.INVALID_PSEUDO);
+
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            default: {
+              '&:hover': {},
+            },
+          });
+        `);
+      }).toThrow(messages.INVALID_PSEUDO);
+    });
+
+    test('pseudo-classes cannot be nested', () => {
+      expect(() => {
+        transform(`
+          import stylex from 'stylex';
+          const styles = stylex.create({
+            default: {
+              ':hover': {
+                ':active': {},
+              },
+            },
+          });
+        `);
+      }).toThrow(messages.ILLEGAL_NESTED_PSEUDO);
+    });
+  });
+});