@stylexjs/rollup-plugin 0.6.1 → 0.7.0

package/.babelrc.cjs

@@ -8,7 +8,10 @@ module.exports = {
       {
         exclude: ['@babel/plugin-transform-typeof-symbol'],
         targets: 'defaults',
-        modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
+        modules:
+          process.env.NODE_ENV === 'test' || process.env.BABEL_ENV === 'cjs'
+            ? 'commonjs'
+            : false,
       },
     ],
     '@babel/preset-flow',

package/package.json

@@ -1,14 +1,22 @@
 {
   "name": "@stylexjs/rollup-plugin",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Rollup plugin for StyleX",
-  "main": "lib/index.js",
-  "type": "module",
+  "main": "./lib/index.js",
+  "module": "./lib/es/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    "import": "./lib/es/index.mjs",
+    "require": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
   "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
   "scripts": {
     "prebuild": "gen-types -i src/ -o lib/",
-    "build": "babel src/ --out-dir lib/ --copy-files",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src/ --out-dir lib/ --copy-files",
+    "build:esm": "cross-env BABEL_ENV=esm babel src/ --out-dir lib/es --out-file-extension .mjs",
+    "build": "npm run build:cjs && npm run build:esm",
     "test": "jest"
   },
   "jest": {
@@ -21,7 +29,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.23.9",
-    "@stylexjs/babel-plugin": "0.6.1",
+    "@stylexjs/babel-plugin": "0.7.0",
     "@babel/plugin-syntax-flow": "^7.23.3",
     "@babel/plugin-syntax-jsx": "^7.23.3",
     "@babel/plugin-syntax-typescript": "^7.23.3"

package/src/index.js

@@ -14,7 +14,12 @@ import jsxSyntaxPlugin from '@babel/plugin-syntax-jsx';
 import typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript';
 import path from 'path';
 import type { Options, Rule } from '@stylexjs/babel-plugin';
-import type { Plugin, PluginContext, TransformResult } from 'rollup';
+import type {
+  Plugin,
+  PluginContext,
+  TransformResult,
+  TransformPluginContext,
+} from 'rollup';
 
 const IS_DEV_ENV =
   process.env.NODE_ENV === 'development' ||
@@ -67,7 +72,11 @@ export default function stylexPlugin({
       stylexRules[id] = meta.stylex;
       return false;
     },
-    async transform(inputCode, id): Promise<null | TransformResult> {
+    async transform(
+      this: TransformPluginContext,
+      inputCode: string,
+      id: string,
+    ): Promise<null | TransformResult> {
       if (
         !importSources.some((importName) =>
           typeof importName === 'string'
@@ -96,6 +105,13 @@ export default function stylexPlugin({
             unstable_moduleResolution,
           }),
         ],
+        caller: {
+          name: '@stylexjs/rollup-plugin',
+          supportsStaticESM: true,
+          supportsDynamicImport: true,
+          supportsTopLevelAwait: !inputCode.includes('require('),
+          supportsExportNamespaceFrom: true,
+        },
       });
       if (result == null) {
         console.warn('stylex: transformAsync returned null');
@@ -107,6 +123,24 @@ export default function stylexPlugin({
         return { code: inputCode };
       }
 
+      // $FlowExpectedError[object-this-reference]
+      const self = this;
+
+      if (self.meta.watchMode) {
+        const ast = self.parse(code);
+        for (const stmt of ast.body) {
+          if (stmt.type === 'ImportDeclaration') {
+            const resolved = await self.resolve(stmt.source.value, id);
+            if (resolved && !resolved.external) {
+              const result = await self.load(resolved);
+              if (result && result.meta && 'stylex' in result.meta) {
+                stylexRules[resolved.id] = result.meta.stylex;
+              }
+            }
+          }
+        }
+      }
+
       if (
         !dev &&
         (metadata as $FlowFixMe).stylex != null &&

package/lib/index.d.ts

@@ -1,34 +0,0 @@
-/**
- * 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.
- *
- *
- */
-
-import { type PluginItem } from '@babel/core';
-import type { Options } from '@stylexjs/babel-plugin';
-import type { Plugin } from 'rollup';
-export type PluginOptions = Readonly<
-  Omit<
-    Partial<Options>,
-    keyof ({
-      fileName?: string;
-      babelConfig?: Readonly<{
-        plugins?: ReadonlyArray<PluginItem>;
-        presets?: ReadonlyArray<PluginItem>;
-      }>;
-      useCSSLayers?: boolean;
-    })
-  > & {
-    fileName?: string;
-    babelConfig?: Readonly<{
-      plugins?: ReadonlyArray<PluginItem>;
-      presets?: ReadonlyArray<PluginItem>;
-    }>;
-    useCSSLayers?: boolean;
-  }
->;
-declare function stylexPlugin($$PARAM_0$$: PluginOptions): Plugin;
-export default stylexPlugin;

package/lib/index.js

@@ -1,93 +0,0 @@
-import { transformAsync } from '@babel/core';
-import stylexBabelPlugin from '@stylexjs/babel-plugin';
-import flowSyntaxPlugin from '@babel/plugin-syntax-flow';
-import jsxSyntaxPlugin from '@babel/plugin-syntax-jsx';
-import typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript';
-import path from 'path';
-const IS_DEV_ENV = process.env.NODE_ENV === 'development' || process.env.BABEL_ENV === 'development';
-export default function stylexPlugin() {
-  let {
-    dev = IS_DEV_ENV,
-    unstable_moduleResolution = {
-      type: 'commonJS',
-      rootDir: process.cwd()
-    },
-    fileName = 'stylex.css',
-    babelConfig: {
-      plugins = [],
-      presets = []
-    } = {},
-    importSources = ['stylex', '@stylexjs/stylex'],
-    useCSSLayers = false,
-    ...options
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let stylexRules = {};
-  return {
-    name: 'rollup-plugin-stylex',
-    buildStart() {
-      stylexRules = {};
-    },
-    generateBundle() {
-      const rules = Object.values(stylexRules).flat();
-      if (rules.length > 0) {
-        const collectedCSS = stylexBabelPlugin.processStylexRules(rules, useCSSLayers);
-        this.emitFile({
-          fileName,
-          source: collectedCSS,
-          type: 'asset'
-        });
-      }
-    },
-    shouldTransformCachedModule(_ref) {
-      let {
-        code: _code,
-        id,
-        meta
-      } = _ref;
-      stylexRules[id] = meta.stylex;
-      return false;
-    },
-    async transform(inputCode, id) {
-      if (!importSources.some(importName => typeof importName === 'string' ? inputCode.includes(importName) : inputCode.includes(importName.from))) {
-        return null;
-      }
-      const result = await transformAsync(inputCode, {
-        babelrc: false,
-        filename: id,
-        presets,
-        plugins: [...plugins, /\.jsx?/.test(path.extname(id)) ? flowSyntaxPlugin : [typescriptSyntaxPlugin, {
-          isTSX: true
-        }], jsxSyntaxPlugin, stylexBabelPlugin.withOptions({
-          ...options,
-          dev,
-          unstable_moduleResolution
-        })]
-      });
-      if (result == null) {
-        console.warn('stylex: transformAsync returned null');
-        return {
-          code: inputCode
-        };
-      }
-      const {
-        code,
-        map,
-        metadata
-      } = result;
-      if (code == null) {
-        console.warn('stylex: transformAsync returned null code');
-        return {
-          code: inputCode
-        };
-      }
-      if (!dev && metadata.stylex != null && metadata.stylex.length > 0) {
-        stylexRules[id] = metadata.stylex;
-      }
-      return {
-        code,
-        map: map,
-        meta: metadata
-      };
-    }
-  };
-}

package/lib/index.js.flow

@@ -1,25 +0,0 @@
-/**
- * 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.
- *
- * @flow strict
- */
-
-import { type PluginItem } from '../flow_modules/@babel/core';
-import type { Options } from '@stylexjs/babel-plugin';
-import type { Plugin } from '../flow_modules/rollup';
-
-export type PluginOptions = $ReadOnly<{
-  ...Partial<Options>,
-  fileName?: string,
-  babelConfig?: $ReadOnly<{
-    plugins?: $ReadOnlyArray<PluginItem>,
-    presets?: $ReadOnlyArray<PluginItem>,
-  }>,
-  useCSSLayers?: boolean,
-  ...
-}>;
-
-declare export default function stylexPlugin(PluginOptions): Plugin<>;