@stylexjs/rollup-plugin 0.1.0-beta.6 → 0.2.0-beta.8

package/__tests__/index-test.js

@@ -77,7 +77,8 @@ describe('rollup-plugin-stylex', () => {
       var styles$2 = {
         bar: {
           display: "xntgbld",
-          width: "x6mlivy"
+          width: "x6mlivy",
+          $$css: true
         }
       };
 
@@ -86,7 +87,8 @@ describe('rollup-plugin-stylex', () => {
         baz: {
           display: "x1wdx05y",
           height: "x1je5kxa",
-          width: "x1u78jha"
+          width: "x1u78jha",
+          $$css: true
         }
       };
 
@@ -98,7 +100,8 @@ describe('rollup-plugin-stylex', () => {
           marginStart: "x1n8p6zw",
           marginBlockStart: "x188knyk",
           height: "x1je5kxa",
-          ":hover_background": "x1kflwvg"
+          ":hover_background": "x1kflwvg",
+          $$css: true
         }
       };
       function App() {
@@ -129,7 +132,8 @@ describe('rollup-plugin-stylex', () => {
           bar: {
             "otherStyles__styles.bar": "otherStyles__styles.bar",
             display: "xntgbld",
-            width: "x6mlivy"
+            width: "x6mlivy",
+            $$css: true
           }
         };
 
@@ -142,7 +146,8 @@ describe('rollup-plugin-stylex', () => {
             "npmStyles__styles.baz": "npmStyles__styles.baz",
             display: "x1wdx05y",
             height: "x1je5kxa",
-            width: "x1u78jha"
+            width: "x1u78jha",
+            $$css: true
           }
         };
 
@@ -162,7 +167,8 @@ describe('rollup-plugin-stylex', () => {
             marginStart: "x1n8p6zw",
             marginBlockStart: "x188knyk",
             height: "x1je5kxa",
-            ":hover_background": "x1kflwvg"
+            ":hover_background": "x1kflwvg",
+            $$css: true
           }
         };
         function App() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/rollup-plugin",
-  "version": "0.1.0-beta.6",
+  "version": "0.2.0-beta.8",
   "description": "Rollup plugin for stylex",
   "main": "src/index.js",
   "repository": "https://www.github.com/facebookexternal/stylex",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.16.0",
-    "@stylexjs/babel-plugin": "0.1.0-beta.6"
+    "@stylexjs/babel-plugin": "0.2.0-beta.8"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.16.8",
@@ -26,6 +26,6 @@
     "@rollup/plugin-commonjs": "^23.0.1",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "rollup": "^3.2.3",
-    "@stylexjs/stylex": "0.1.0-beta.6"
+    "@stylexjs/stylex": "0.2.0-beta.8"
   }
 }

package/src/index.js

@@ -7,6 +7,10 @@
 
 const babel = require('@babel/core');
 const stylexBabelPlugin = require('@stylexjs/babel-plugin');
+const flowSyntaxPlugin = require('@babel/plugin-syntax-flow');
+const jsxSyntaxPlugin = require('@babel/plugin-syntax-jsx');
+const typescriptSyntaxPlugin = require('@babel/plugin-syntax-typescript');
+const path = require('path');
 
 const IS_DEV_ENV =
   process.env.NODE_ENV === 'development' ||
@@ -15,17 +19,19 @@ const IS_DEV_ENV =
 module.exports = function stylexPlugin({
   dev = IS_DEV_ENV,
   fileName = 'stylex.css',
+  babelConig: { plugins = [], presets = [] } = {},
 } = {}) {
-  let stylexRules = [];
+  let stylexRules = {};
 
   return {
     name: 'rollup-plugin-stylex',
     buildStart() {
-      stylexRules = [];
+      stylexRules = {};
     },
     generateBundle() {
-      if (stylexRules.length > 0) {
-        const collectedCSS = stylexBabelPlugin.processStylexRules(stylexRules);
+      const rules = Object.values(stylexRules).flat();
+      if (rules.length > 0) {
+        const collectedCSS = stylexBabelPlugin.processStylexRules(rules);
 
         this.emitFile({
           fileName,
@@ -34,18 +40,30 @@ module.exports = function stylexPlugin({
         });
       }
     },
+    shouldTransformCachedModule({ code, id, cache, meta }) {
+      stylexRules[id] = meta.stylex;
+      return false;
+    },
     async transform(inputCode, id) {
       const { code, map, metadata } = await babel.transformAsync(inputCode, {
         babelrc: false,
         filename: id,
-        plugins: [[stylexBabelPlugin, { dev, stylexSheetName: fileName }]],
+        presets,
+        plugins: [
+          ...plugins,
+          /\.jsx?/.test(path.extname(id))
+            ? flowSyntaxPlugin
+            : typescriptSyntaxPlugin,
+          jsxSyntaxPlugin,
+          [stylexBabelPlugin, { dev, stylexSheetName: fileName }],
+        ],
       });
 
       if (!dev && metadata.stylex != null && metadata.stylex.length > 0) {
-        stylexRules = stylexRules.concat(metadata.stylex);
+        stylexRules[id] = metadata.stylex;
       }
 
-      return { code, map };
+      return { code, map, meta: metadata };
     },
   };
 };