@stylexjs/rollup-plugin 0.1.0-beta.1

package/__tests__/__fixtures__/.babelrc.json

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "ie": 11
+        }
+      }
+    ]
+  ]
+}

package/__tests__/__fixtures__/index.js

@@ -0,0 +1,33 @@
+// index.js
+
+'use strict';
+
+import stylex from 'stylex';
+import otherStyles from './otherStyles';
+import npmStyles from './npmStyles';
+
+const fadeAnimation = stylex.keyframes({
+  '0%': {
+    opacity: 0.25,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
+const styles = stylex.create({
+  foo: {
+    animationName: fadeAnimation,
+    display: 'flex',
+    marginStart: 10,
+    marginBlockStart: 99,
+    height: 500,
+    ':hover': {
+      background: 'red',
+    },
+  },
+});
+
+export default function App() {
+  return stylex(otherStyles.bar, styles.foo, npmStyles.baz);
+}

package/__tests__/__fixtures__/npmStyles.js

@@ -0,0 +1,15 @@
+// npmStyles.js
+
+'use strict';
+
+import stylex from 'stylex';
+
+const styles = stylex.create({
+  baz: {
+    display: 'inline',
+    height: 500,
+    width: '50%',
+  },
+});
+
+export default styles;

package/__tests__/__fixtures__/otherStyles.js

@@ -0,0 +1,14 @@
+// otherStyles.js
+
+'use strict';
+
+import stylex from 'stylex';
+
+const styles = stylex.create({
+  bar: {
+    display: 'block',
+    width: '100%',
+  },
+});
+
+export default styles;

package/__tests__/index-test.js

@@ -0,0 +1,177 @@
+/**
+ * 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';
+
+const path = require('path');
+const rollup = require('rollup');
+const { babel } = require('@rollup/plugin-babel');
+const commonjs = require('@rollup/plugin-commonjs');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const stylexPlugin = require('../src/index');
+
+describe('rollup-plugin-stylex', () => {
+  async function runStylex(options) {
+    // Configure a rollup bundle
+    const bundle = await rollup.rollup({
+      // Remove stylex runtime from bundle
+      external: ['stylex'],
+      input: path.resolve(__dirname, '__fixtures__/index.js'),
+      plugins: [
+        nodeResolve(),
+        commonjs(),
+        babel({
+          babelHelpers: 'bundled',
+          configFile: path.resolve(__dirname, '__fixtures__/.babelrc.json'),
+          exclude: [/npmStyles\.js/],
+        }),
+        stylexPlugin(options),
+      ],
+    });
+
+    // Generate output specific code in-memory
+    // You can call this function multiple times on the same bundle object
+    const { output } = await bundle.generate({
+      file: path.resolve(__dirname, '/__builds__/bundle.js'),
+    });
+
+    let css, js;
+
+    for (const chunkOrAsset of output) {
+      if (chunkOrAsset.fileName === 'stylex.css') {
+        css = chunkOrAsset.source;
+      } else if (chunkOrAsset.fileName === 'bundle.js') {
+        js = chunkOrAsset.code;
+      }
+    }
+
+    return { css, js };
+  }
+
+  it('extracts CSS and removes stylex.inject calls', async () => {
+    const { css, js } = await runStylex({ fileName: 'stylex.css' });
+
+    expect(css).toMatchInlineSnapshot(`
+      "@keyframes x11gtny7-B{0%{opacity:.25;}100%{opacity:1;}}
+      .x188knyk{margin-block-start:99px}
+      .x1c4r43l{display:flex}
+      .x1je5kxa{height:500px}
+      html:not([dir='rtl']) .x1n8p6zw{margin-left:10px}
+      html[dir='rtl'] .x1n8p6zw{margin-right:10px}
+      .x1nrqb13{animation-name:x11gtny7-B}
+      .x1u78jha{width:50%}
+      .x1wdx05y{display:inline}
+      .x6mlivy{width:100%}
+      .xntgbld{display:block}
+      .x1kflwvg:hover{background:red}"
+    `);
+
+    expect(js).toMatchInlineSnapshot(`
+      "import stylex from 'stylex';
+
+      // otherStyles.js
+      var styles$2 = {
+        bar: {
+          display: "xntgbld",
+          width: "x6mlivy"
+        }
+      };
+
+      // npmStyles.js
+      const styles$1 = {
+        baz: {
+          display: "x1wdx05y",
+          height: "x1je5kxa",
+          width: "x1u78jha"
+        }
+      };
+
+      // index.js
+      var styles = {
+        foo: {
+          animationName: "x1nrqb13",
+          display: "x1c4r43l",
+          marginStart: "x1n8p6zw",
+          marginBlockStart: "x188knyk",
+          height: "x1je5kxa",
+          ":hover_background": "x1kflwvg"
+        }
+      };
+      function App() {
+        return stylex(styles$2.bar, styles.foo, styles$1.baz);
+      }
+
+      export { App as default };
+      "
+    `);
+  });
+
+  describe('when in dev mode', () => {
+    it('preserves stylex.inject calls and does not extract CSS', async () => {
+      const { css, js } = await runStylex({
+        dev: true,
+        fileName: 'stylex.css',
+      });
+
+      expect(css).toBeUndefined();
+
+      expect(js).toMatchInlineSnapshot(`
+        "import stylex from 'stylex';
+
+        // otherStyles.js
+        stylex.inject(".xntgbld{display:block}", 1);
+        stylex.inject(".x6mlivy{width:100%}", 1);
+        var styles$2 = {
+          bar: {
+            "otherStyles__styles.bar": "otherStyles__styles.bar",
+            display: "xntgbld",
+            width: "x6mlivy"
+          }
+        };
+
+        // npmStyles.js
+        stylex.inject(".x1wdx05y{display:inline}", 1);
+        stylex.inject(".x1je5kxa{height:500px}", 1);
+        stylex.inject(".x1u78jha{width:50%}", 1);
+        const styles$1 = {
+          baz: {
+            "npmStyles__styles.baz": "npmStyles__styles.baz",
+            display: "x1wdx05y",
+            height: "x1je5kxa",
+            width: "x1u78jha"
+          }
+        };
+
+        // index.js
+        stylex.inject("@keyframes x11gtny7-B{0%{opacity:.25;}100%{opacity:1;}}", 1);
+        stylex.inject(".x1nrqb13{animation-name:x11gtny7-B}", 1);
+        stylex.inject(".x1c4r43l{display:flex}", 1);
+        stylex.inject(".x1n8p6zw{margin-left:10px}", 1, ".x1n8p6zw{margin-right:10px}");
+        stylex.inject(".x188knyk{margin-block-start:99px}", 1);
+        stylex.inject(".x1je5kxa{height:500px}", 1);
+        stylex.inject(".x1kflwvg:hover{background:red}", 8);
+        var styles = {
+          foo: {
+            "index__styles.foo": "index__styles.foo",
+            animationName: "x1nrqb13",
+            display: "x1c4r43l",
+            marginStart: "x1n8p6zw",
+            marginBlockStart: "x188knyk",
+            height: "x1je5kxa",
+            ":hover_background": "x1kflwvg"
+          }
+        };
+        function App() {
+          return stylex(styles$2.bar, styles.foo, styles$1.baz);
+        }
+
+        export { App as default };
+        "
+      `);
+    });
+  });
+});

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@stylexjs/rollup-plugin",
+  "version": "0.1.0-beta.1",
+  "description": "Rollup plugin for stylex",
+  "main": "src/index.js",
+  "repository": "https://www.github.com/facebookexternal/stylex",
+  "license": "MIT",
+  "scripts": {
+    "test": "jest"
+  },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "__builds__",
+      "/__fixtures__/"
+    ],
+    "testEnvironment": "node"
+  },
+  "dependencies": {
+    "@babel/core": "^7.16.0",
+    "@stylexjs/babel-plugin": "0.1.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.16.8",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@rollup/plugin-commonjs": "^23.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "rollup": "^3.2.3",
+    "@stylexjs/stylex": "0.1.0"
+  }
+}

package/src/index.js

@@ -0,0 +1,51 @@
+/**
+ * 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.
+ */
+
+const babel = require('@babel/core');
+const stylexBabelPlugin = require('@stylexjs/babel-plugin');
+
+const IS_DEV_ENV =
+  process.env.NODE_ENV === 'development' ||
+  process.env.BABEL_ENV === 'development';
+
+module.exports = function stylexPlugin({
+  dev = IS_DEV_ENV,
+  fileName = 'stylex.css',
+} = {}) {
+  let stylexRules = [];
+
+  return {
+    name: 'rollup-plugin-stylex',
+    buildStart() {
+      stylexRules = [];
+    },
+    generateBundle() {
+      if (stylexRules.length > 0) {
+        const collectedCSS = stylexBabelPlugin.processStylexRules(stylexRules);
+
+        this.emitFile({
+          fileName,
+          source: collectedCSS,
+          type: 'asset',
+        });
+      }
+    },
+    async transform(inputCode, id) {
+      const { code, map, metadata } = await babel.transformAsync(inputCode, {
+        babelrc: false,
+        filename: id,
+        plugins: [[stylexBabelPlugin, { dev, stylexSheetName: fileName }]],
+      });
+
+      if (!dev && metadata.stylex != null && metadata.stylex.length > 0) {
+        stylexRules = stylexRules.concat(metadata.stylex);
+      }
+
+      return { code, map };
+    },
+  };
+};