@stylexjs/rollup-plugin 0.2.0-beta.8 → 0.3.0

package/README.md

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

package/__tests__/__fixtures__/index.js

@@ -1,3 +1,12 @@
+/**
+ * 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.
+ *
+ *
+ */
+
 // index.js
 
 'use strict';

package/__tests__/__fixtures__/npmStyles.js

@@ -1,3 +1,12 @@
+/**
+ * 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.
+ *
+ *
+ */
+
 // npmStyles.js
 
 'use strict';

package/__tests__/__fixtures__/otherStyles.js

@@ -1,3 +1,12 @@
+/**
+ * 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.
+ *
+ *
+ */
+
 // otherStyles.js
 
 'use strict';

package/__tests__/index-test.js

@@ -3,6 +3,8 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ *
  */
 
 'use strict';
@@ -56,51 +58,96 @@ describe('rollup-plugin-stylex', () => {
     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}"
+      "
+      @layer priority1, priority2, priority3, priority4;
+      @layer priority1{
+      @keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}
+      }
+      @layer priority2{
+      .x1oz5o6v:hover{background:red}
+      }
+      @layer priority3{
+      .xeuoslp{animation-name:xgnty7z-B}
+      .x1lliihq{display:block}
+      .x78zum5{display:flex}
+      .xt0psk2{display:inline}
+      .x1hm9lzh{margin-inline-start:10px}
+      }
+      @layer priority4{
+      .x1egiwwb{height:500px}
+      .xlrshdv{margin-top:99px}
+      .xh8yej3{width:100%}
+      .x3hqpx7{width:50%}
+      }"
     `);
 
     expect(js).toMatchInlineSnapshot(`
       "import stylex from 'stylex';
 
-      // otherStyles.js
+      /**
+       * 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.
+       *
+       *
+       */
+
       var styles$2 = {
         bar: {
-          display: "xntgbld",
-          width: "x6mlivy",
+          display: "x1lliihq",
+          width: "xh8yej3",
           $$css: true
         }
       };
 
-      // npmStyles.js
+      /**
+       * 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 styles$1 = {
         baz: {
-          display: "x1wdx05y",
-          height: "x1je5kxa",
-          width: "x1u78jha",
+          display: "xt0psk2",
+          height: "x1egiwwb",
+          width: "x3hqpx7",
           $$css: true
         }
       };
 
-      // index.js
+      /**
+       * 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.
+       *
+       *
+       */
+
       var styles = {
         foo: {
-          animationName: "x1nrqb13",
-          display: "x1c4r43l",
-          marginStart: "x1n8p6zw",
-          marginBlockStart: "x188knyk",
-          height: "x1je5kxa",
-          ":hover_background": "x1kflwvg",
+          animationName: "xeuoslp",
+          display: "x78zum5",
+          marginInlineStart: "x1hm9lzh",
+          marginLeft: null,
+          marginRight: null,
+          marginTop: "xlrshdv",
+          height: "x1egiwwb",
+          ":hover_background": "x1oz5o6v",
+          ":hover_backgroundAttachment": null,
+          ":hover_backgroundClip": null,
+          ":hover_backgroundColor": null,
+          ":hover_backgroundImage": null,
+          ":hover_backgroundOrigin": null,
+          ":hover_backgroundPosition": null,
+          ":hover_backgroundPositionX": null,
+          ":hover_backgroundPositionY": null,
+          ":hover_backgroundRepeat": null,
+          ":hover_backgroundSize": null,
           $$css: true
         }
       };
@@ -117,7 +164,6 @@ describe('rollup-plugin-stylex', () => {
     it('preserves stylex.inject calls and does not extract CSS', async () => {
       const { css, js } = await runStylex({
         dev: true,
-        fileName: 'stylex.css',
       });
 
       expect(css).toBeUndefined();
@@ -125,49 +171,85 @@ describe('rollup-plugin-stylex', () => {
       expect(js).toMatchInlineSnapshot(`
         "import stylex from 'stylex';
 
-        // otherStyles.js
-        stylex.inject(".xntgbld{display:block}", 1);
-        stylex.inject(".x6mlivy{width:100%}", 1);
+        /**
+         * 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.
+         *
+         *
+         */
+
+        stylex.inject(".x1lliihq{display:block}", 3000);
+        stylex.inject(".xh8yej3{width:100%}", 4000);
         var styles$2 = {
           bar: {
             "otherStyles__styles.bar": "otherStyles__styles.bar",
-            display: "xntgbld",
-            width: "x6mlivy",
+            display: "x1lliihq",
+            width: "xh8yej3",
             $$css: true
           }
         };
 
-        // npmStyles.js
-        stylex.inject(".x1wdx05y{display:inline}", 1);
-        stylex.inject(".x1je5kxa{height:500px}", 1);
-        stylex.inject(".x1u78jha{width:50%}", 1);
+        /**
+         * 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.
+         *
+         *
+         */
+
+        stylex.inject(".xt0psk2{display:inline}", 3000);
+        stylex.inject(".x1egiwwb{height:500px}", 4000);
+        stylex.inject(".x3hqpx7{width:50%}", 4000);
         const styles$1 = {
           baz: {
             "npmStyles__styles.baz": "npmStyles__styles.baz",
-            display: "x1wdx05y",
-            height: "x1je5kxa",
-            width: "x1u78jha",
+            display: "xt0psk2",
+            height: "x1egiwwb",
+            width: "x3hqpx7",
             $$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);
+        /**
+         * 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.
+         *
+         *
+         */
+
+        stylex.inject("@keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}", 1);
+        stylex.inject(".xeuoslp{animation-name:xgnty7z-B}", 3000);
+        stylex.inject(".x78zum5{display:flex}", 3000);
+        stylex.inject(".x1hm9lzh{margin-inline-start:10px}", 3000);
+        stylex.inject(".xlrshdv{margin-top:99px}", 4000);
+        stylex.inject(".x1egiwwb{height:500px}", 4000);
+        stylex.inject(".x1oz5o6v:hover{background:red}", 1130);
         var styles = {
           foo: {
             "index__styles.foo": "index__styles.foo",
-            animationName: "x1nrqb13",
-            display: "x1c4r43l",
-            marginStart: "x1n8p6zw",
-            marginBlockStart: "x188knyk",
-            height: "x1je5kxa",
-            ":hover_background": "x1kflwvg",
+            animationName: "xeuoslp",
+            display: "x78zum5",
+            marginInlineStart: "x1hm9lzh",
+            marginLeft: null,
+            marginRight: null,
+            marginTop: "xlrshdv",
+            height: "x1egiwwb",
+            ":hover_background": "x1oz5o6v",
+            ":hover_backgroundAttachment": null,
+            ":hover_backgroundClip": null,
+            ":hover_backgroundColor": null,
+            ":hover_backgroundImage": null,
+            ":hover_backgroundOrigin": null,
+            ":hover_backgroundPosition": null,
+            ":hover_backgroundPositionX": null,
+            ":hover_backgroundPositionY": null,
+            ":hover_backgroundRepeat": null,
+            ":hover_backgroundSize": null,
             $$css: true
           }
         };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@stylexjs/rollup-plugin",
-  "version": "0.2.0-beta.8",
-  "description": "Rollup plugin for stylex",
+  "version": "0.3.0",
+  "description": "Rollup plugin for StyleX",
   "main": "src/index.js",
-  "repository": "https://www.github.com/facebookexternal/stylex",
+  "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
   "scripts": {
     "test": "jest"
@@ -18,14 +18,14 @@
   },
   "dependencies": {
     "@babel/core": "^7.16.0",
-    "@stylexjs/babel-plugin": "0.2.0-beta.8"
+    "@stylexjs/babel-plugin": "0.3.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.16.8",
     "@rollup/plugin-babel": "^6.0.0",
-    "@rollup/plugin-commonjs": "^23.0.1",
+    "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-node-resolve": "^15.0.0",
-    "rollup": "^3.2.3",
-    "@stylexjs/stylex": "0.2.0-beta.8"
+    "rollup": "^3.26.3 || ^4.0.2",
+    "@stylexjs/stylex": "0.3.0"
   }
 }

package/src/index.js

@@ -3,6 +3,8 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @format
  */
 
 const babel = require('@babel/core');
@@ -18,11 +20,12 @@ const IS_DEV_ENV =
 
 module.exports = function stylexPlugin({
   dev = IS_DEV_ENV,
+  unstable_moduleResolution = { type: 'commonJS', rootDir: process.cwd() },
   fileName = 'stylex.css',
-  babelConig: { plugins = [], presets = [] } = {},
+  babelConfig: { plugins = [], presets = [] } = {},
+  ...options
 } = {}) {
   let stylexRules = {};
-
   return {
     name: 'rollup-plugin-stylex',
     buildStart() {
@@ -31,8 +34,7 @@ module.exports = function stylexPlugin({
     generateBundle() {
       const rules = Object.values(stylexRules).flat();
       if (rules.length > 0) {
-        const collectedCSS = stylexBabelPlugin.processStylexRules(rules);
-
+        const collectedCSS = stylexBabelPlugin.processStylexRules(rules, true);
         this.emitFile({
           fileName,
           source: collectedCSS,
@@ -40,7 +42,7 @@ module.exports = function stylexPlugin({
         });
       }
     },
-    shouldTransformCachedModule({ code, id, cache, meta }) {
+    shouldTransformCachedModule({ code: _code, id, cache: _cache, meta }) {
       stylexRules[id] = meta.stylex;
       return false;
     },
@@ -55,14 +57,13 @@ module.exports = function stylexPlugin({
             ? flowSyntaxPlugin
             : typescriptSyntaxPlugin,
           jsxSyntaxPlugin,
-          [stylexBabelPlugin, { dev, stylexSheetName: fileName }],
+          [stylexBabelPlugin, { dev, unstable_moduleResolution, ...options }],
         ],
       });
 
       if (!dev && metadata.stylex != null && metadata.stylex.length > 0) {
         stylexRules[id] = metadata.stylex;
       }
-
       return { code, map, meta: metadata };
     },
   };