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

package/README.md

@@ -0,0 +1,3 @@
+# @stylexjs/rollup-plugin
+
+...

package/__tests__/index-test.js

@@ -57,16 +57,15 @@ describe('rollup-plugin-stylex', () => {
 
     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%}
+      .xntgbld{display:block}
+      .x1c4r43l{display:flex}
       .x1wdx05y{display:inline}
+      .x1je5kxa{height:500px}
+      .xo3gju4{margin-inline-start:10px}
+      .x1h9ru99{margin-top:99px}
       .x6mlivy{width:100%}
-      .xntgbld{display:block}
+      .x1u78jha{width:50%}
       .x1kflwvg:hover{background:red}"
     `);
 
@@ -77,7 +76,8 @@ describe('rollup-plugin-stylex', () => {
       var styles$2 = {
         bar: {
           display: "xntgbld",
-          width: "x6mlivy"
+          width: "x6mlivy",
+          $$css: true
         }
       };
 
@@ -86,7 +86,8 @@ describe('rollup-plugin-stylex', () => {
         baz: {
           display: "x1wdx05y",
           height: "x1je5kxa",
-          width: "x1u78jha"
+          width: "x1u78jha",
+          $$css: true
         }
       };
 
@@ -95,10 +96,21 @@ describe('rollup-plugin-stylex', () => {
         foo: {
           animationName: "x1nrqb13",
           display: "x1c4r43l",
-          marginStart: "x1n8p6zw",
-          marginBlockStart: "x188knyk",
+          marginInlineStart: "xo3gju4",
+          marginLeft: null,
+          marginRight: null,
+          marginTop: "x1h9ru99",
           height: "x1je5kxa",
-          ":hover_background": "x1kflwvg"
+          ":hover_background": "x1kflwvg",
+          ":hover_backgroundAttachment": null,
+          ":hover_backgroundClip": null,
+          ":hover_backgroundColor": null,
+          ":hover_backgroundImage": null,
+          ":hover_backgroundOrigin": null,
+          ":hover_backgroundPosition": null,
+          ":hover_backgroundRepeat": null,
+          ":hover_backgroundSize": null,
+          $$css: true
         }
       };
       function App() {
@@ -123,46 +135,59 @@ describe('rollup-plugin-stylex', () => {
         "import stylex from 'stylex';
 
         // otherStyles.js
-        stylex.inject(".xntgbld{display:block}", 1);
-        stylex.inject(".x6mlivy{width:100%}", 1);
+        stylex.inject(".xntgbld{display:block}", 4);
+        stylex.inject(".x6mlivy{width:100%}", 4);
         var styles$2 = {
           bar: {
             "otherStyles__styles.bar": "otherStyles__styles.bar",
             display: "xntgbld",
-            width: "x6mlivy"
+            width: "x6mlivy",
+            $$css: true
           }
         };
 
         // npmStyles.js
-        stylex.inject(".x1wdx05y{display:inline}", 1);
-        stylex.inject(".x1je5kxa{height:500px}", 1);
-        stylex.inject(".x1u78jha{width:50%}", 1);
+        stylex.inject(".x1wdx05y{display:inline}", 4);
+        stylex.inject(".x1je5kxa{height:500px}", 4);
+        stylex.inject(".x1u78jha{width:50%}", 4);
         const styles$1 = {
           baz: {
             "npmStyles__styles.baz": "npmStyles__styles.baz",
             display: "x1wdx05y",
             height: "x1je5kxa",
-            width: "x1u78jha"
+            width: "x1u78jha",
+            $$css: true
           }
         };
 
         // 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);
+        stylex.inject(".x1nrqb13{animation-name:x11gtny7-B}", 4);
+        stylex.inject(".x1c4r43l{display:flex}", 4);
+        stylex.inject(".xo3gju4{margin-inline-start:10px}", 4);
+        stylex.inject(".x1h9ru99{margin-top:99px}", 4);
+        stylex.inject(".x1je5kxa{height:500px}", 4);
+        stylex.inject(".x1kflwvg:hover{background:red}", 16);
         var styles = {
           foo: {
             "index__styles.foo": "index__styles.foo",
             animationName: "x1nrqb13",
             display: "x1c4r43l",
-            marginStart: "x1n8p6zw",
-            marginBlockStart: "x188knyk",
+            marginInlineStart: "xo3gju4",
+            marginLeft: null,
+            marginRight: null,
+            marginTop: "x1h9ru99",
             height: "x1je5kxa",
-            ":hover_background": "x1kflwvg"
+            ":hover_background": "x1kflwvg",
+            ":hover_backgroundAttachment": null,
+            ":hover_backgroundClip": null,
+            ":hover_backgroundColor": null,
+            ":hover_backgroundImage": null,
+            ":hover_backgroundOrigin": null,
+            ":hover_backgroundPosition": null,
+            ":hover_backgroundRepeat": null,
+            ":hover_backgroundSize": null,
+            $$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.10",
   "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.10"
   },
   "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.10"
   }
 }

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: _code, id, cache: _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 };
     },
   };
 };