@stylexjs/rollup-plugin 0.3.0 → 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__/index-test.js

@@ -9,19 +9,23 @@
 
 '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(),
@@ -31,7 +35,7 @@ describe('rollup-plugin-stylex', () => {
           configFile: path.resolve(__dirname, '__fixtures__/.babelrc.json'),
           exclude: [/npmStyles\.js/],
         }),
-        stylexPlugin(options),
+        stylexPlugin({ useCSSLayers: true, ...options }),
       ],
     });
 
@@ -169,7 +173,8 @@ describe('rollup-plugin-stylex', () => {
       expect(css).toBeUndefined();
 
       expect(js).toMatchInlineSnapshot(`
-        "import stylex from 'stylex';
+        "import _inject from '@stylexjs/stylex/lib/stylex-inject';
+        import stylex from 'stylex';
 
         /**
          * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -180,8 +185,8 @@ describe('rollup-plugin-stylex', () => {
          *
          */
 
-        stylex.inject(".x1lliihq{display:block}", 3000);
-        stylex.inject(".xh8yej3{width:100%}", 4000);
+        _inject(".x1lliihq{display:block}", 3000);
+        _inject(".xh8yej3{width:100%}", 4000);
         var styles$2 = {
           bar: {
             "otherStyles__styles.bar": "otherStyles__styles.bar",
@@ -200,9 +205,9 @@ describe('rollup-plugin-stylex', () => {
          *
          */
 
-        stylex.inject(".xt0psk2{display:inline}", 3000);
-        stylex.inject(".x1egiwwb{height:500px}", 4000);
-        stylex.inject(".x3hqpx7{width:50%}", 4000);
+        _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",
@@ -222,13 +227,13 @@ describe('rollup-plugin-stylex', () => {
          *
          */
 
-        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);
+        _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",