@stylexjs/rollup-plugin 0.2.0-beta.9 → 0.4.0

package/.babelrc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  assumptions: {
+    iterableIsArray: true,
+  },
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        exclude: ['@babel/plugin-transform-typeof-symbol'],
+        targets: 'defaults',
+        modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
+      },
+    ],
+    '@babel/preset-flow',
+  ],
+  plugins: [['babel-plugin-syntax-hermes-parser', { flow: 'detect' }]],
+};

package/README.md

@@ -1,3 +1,33 @@
 # @stylexjs/rollup-plugin
 
-...
+## Documentation Website
+[https://stylexjs.com](https://stylexjs.com)
+
+## Installation
+
+Install the package by using:
+```bash
+npm install --save-dev @stylexjs/rollup-plugin
+```
+
+or with yarn:
+
+```
+yarn add --dev @stylexjs/rollup-plugin
+```
+
+Add the following to you `rollup.config.mjs`
+```javascript
+import stylexPlugin from '@stylexjs/rollup-plugin';
+
+const config = {
+  input: './index.js',
+  output: {
+    file: './.build/bundle.js',
+    format: 'es',
+  },
+  plugins: [stylexPlugin({ fileName: 'stylex.css' })],
+};
+
+export default config;
+```

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,23 +3,29 @@
  *
  * 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');
+import path from 'path';
+import rollup from 'rollup';
+import { babel } from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import stylexPlugin from '../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'],
+      external: [
+        'stylex',
+        '@stylexjs/stylex',
+        '@stylexjs/stylex/lib/stylex-inject',
+      ],
       input: path.resolve(__dirname, '__fixtures__/index.js'),
       plugins: [
         nodeResolve(),
@@ -29,7 +35,7 @@ describe('rollup-plugin-stylex', () => {
           configFile: path.resolve(__dirname, '__fixtures__/.babelrc.json'),
           exclude: [/npmStyles\.js/],
         }),
-        stylexPlugin(options),
+        stylexPlugin({ useCSSLayers: true, ...options }),
       ],
     });
 
@@ -56,58 +62,94 @@ describe('rollup-plugin-stylex', () => {
     const { css, js } = await runStylex({ fileName: 'stylex.css' });
 
     expect(css).toMatchInlineSnapshot(`
-      "@keyframes x11gtny7-B{0%{opacity:.25;}100%{opacity:1;}}
-      .x1nrqb13{animation-name:x11gtny7-B}
-      .xntgbld{display:block}
-      .x1c4r43l{display:flex}
-      .x1wdx05y{display:inline}
-      .x1je5kxa{height:500px}
-      .xo3gju4{margin-inline-start:10px}
-      .x1h9ru99{margin-top:99px}
-      .x6mlivy{width:100%}
-      .x1u78jha{width:50%}
-      .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",
-          marginInlineStart: "xo3gju4",
+          animationName: "xeuoslp",
+          display: "x78zum5",
+          marginInlineStart: "x1hm9lzh",
           marginLeft: null,
           marginRight: null,
-          marginTop: "x1h9ru99",
-          height: "x1je5kxa",
-          ":hover_background": "x1kflwvg",
+          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
@@ -126,65 +168,91 @@ 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();
 
       expect(js).toMatchInlineSnapshot(`
-        "import stylex from 'stylex';
+        "import _inject from '@stylexjs/stylex/lib/stylex-inject';
+        import stylex from 'stylex';
 
-        // otherStyles.js
-        stylex.inject(".xntgbld{display:block}", 4);
-        stylex.inject(".x6mlivy{width:100%}", 4);
+        /**
+         * 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.
+         *
+         *
+         */
+
+        _inject(".x1lliihq{display:block}", 3000);
+        _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}", 4);
-        stylex.inject(".x1je5kxa{height:500px}", 4);
-        stylex.inject(".x1u78jha{width:50%}", 4);
+        /**
+         * 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.
+         *
+         *
+         */
+
+        _inject(".xt0psk2{display:inline}", 3000);
+        _inject(".x1egiwwb{height:500px}", 4000);
+        _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}", 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);
+        /**
+         * 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.
+         *
+         *
+         */
+
+        _inject("@keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}", 1);
+        _inject(".xeuoslp{animation-name:xgnty7z-B}", 3000);
+        _inject(".x78zum5{display:flex}", 3000);
+        _inject(".x1hm9lzh{margin-inline-start:10px}", 3000);
+        _inject(".xlrshdv{margin-top:99px}", 4000);
+        _inject(".x1egiwwb{height:500px}", 4000);
+        _inject(".x1oz5o6v:hover{background:red}", 1130);
         var styles = {
           foo: {
             "index__styles.foo": "index__styles.foo",
-            animationName: "x1nrqb13",
-            display: "x1c4r43l",
-            marginInlineStart: "xo3gju4",
+            animationName: "xeuoslp",
+            display: "x78zum5",
+            marginInlineStart: "x1hm9lzh",
             marginLeft: null,
             marginRight: null,
-            marginTop: "x1h9ru99",
-            height: "x1je5kxa",
-            ":hover_background": "x1kflwvg",
+            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