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

package/lib/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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

@@ -0,0 +1,91 @@
+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, 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

@@ -0,0 +1,25 @@
+/**
+ * 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<>;

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@stylexjs/rollup-plugin",
-  "version": "0.2.0-beta.9",
-  "description": "Rollup plugin for stylex",
-  "main": "src/index.js",
-  "repository": "https://www.github.com/facebookexternal/stylex",
+  "version": "0.4.0",
+  "description": "Rollup plugin for StyleX",
+  "main": "lib/index.js",
+  "type": "module",
+  "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",
     "test": "jest"
   },
   "jest": {
@@ -17,15 +20,10 @@
     "testEnvironment": "node"
   },
   "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@stylexjs/babel-plugin": "0.2.0-beta.9"
-  },
-  "devDependencies": {
-    "@babel/preset-env": "^7.16.8",
-    "@rollup/plugin-babel": "^6.0.0",
-    "@rollup/plugin-commonjs": "^23.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.0",
-    "rollup": "^3.2.3",
-    "@stylexjs/stylex": "0.2.0-beta.9"
+    "@babel/core": "^7.23.6",
+    "@stylexjs/babel-plugin": "0.4.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

@@ -3,36 +3,59 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
  */
 
-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');
+import { transformAsync, type PluginItem } 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';
+import type { Options, Rule } from '@stylexjs/babel-plugin';
+import type { Plugin, PluginContext, TransformResult } from 'rollup';
 
 const IS_DEV_ENV =
   process.env.NODE_ENV === 'development' ||
   process.env.BABEL_ENV === 'development';
 
-module.exports = function stylexPlugin({
+export type PluginOptions = $ReadOnly<{
+  ...Partial<Options>,
+  fileName?: string,
+  babelConfig?: $ReadOnly<{
+    plugins?: $ReadOnlyArray<PluginItem>,
+    presets?: $ReadOnlyArray<PluginItem>,
+  }>,
+  useCSSLayers?: boolean,
+  ...
+}>;
+
+export default function stylexPlugin({
   dev = IS_DEV_ENV,
+  unstable_moduleResolution = { type: 'commonJS', rootDir: process.cwd() },
   fileName = 'stylex.css',
-  babelConig: { plugins = [], presets = [] } = {},
-} = {}) {
-  let stylexRules = {};
-
+  babelConfig: { plugins = [], presets = [] } = {},
+  importSources = ['stylex', '@stylexjs/stylex'],
+  useCSSLayers = false,
+  ...options
+}: PluginOptions = {}): Plugin<> {
+  let stylexRules: { [string]: $ReadOnlyArray<Rule> } = {};
   return {
     name: 'rollup-plugin-stylex',
     buildStart() {
       stylexRules = {};
     },
-    generateBundle() {
-      const rules = Object.values(stylexRules).flat();
+    generateBundle(this: PluginContext) {
+      const rules: Array<Rule> = Object.values(stylexRules).flat();
       if (rules.length > 0) {
-        const collectedCSS = stylexBabelPlugin.processStylexRules(rules);
+        const collectedCSS = stylexBabelPlugin.processStylexRules(
+          rules,
+          useCSSLayers,
+        );
 
+        // This is the intended API, but Flow doesn't support this pattern.
+        // $FlowExpectedError[object-this-reference]
         this.emitFile({
           fileName,
           source: collectedCSS,
@@ -40,12 +63,24 @@ module.exports = function stylexPlugin({
         });
       }
     },
-    shouldTransformCachedModule({ code, id, cache, meta }) {
+    shouldTransformCachedModule({ code: _code, id, meta }) {
       stylexRules[id] = meta.stylex;
       return false;
     },
-    async transform(inputCode, id) {
-      const { code, map, metadata } = await babel.transformAsync(inputCode, {
+    async transform(inputCode, id): Promise<null | TransformResult> {
+      if (
+        !importSources.some((importName) =>
+          typeof importName === 'string'
+            ? inputCode.includes(importName)
+            : inputCode.includes(importName.from),
+        )
+      ) {
+        // In rollup, returning null from any plugin phase means
+        // "no changes made".
+        return null;
+      }
+
+      const result = await transformAsync(inputCode, {
         babelrc: false,
         filename: id,
         presets,
@@ -55,15 +90,32 @@ module.exports = function stylexPlugin({
             ? flowSyntaxPlugin
             : typescriptSyntaxPlugin,
           jsxSyntaxPlugin,
-          [stylexBabelPlugin, { dev, stylexSheetName: fileName }],
+          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;
+      if (
+        !dev &&
+        (metadata: $FlowFixMe).stylex != null &&
+        (metadata: $FlowFixMe).stylex.length > 0
+      ) {
+        stylexRules[id] = (metadata: $FlowFixMe).stylex;
       }
 
-      return { code, map, meta: metadata };
+      return { code, map: (map: $FlowFixMe), meta: (metadata: $FlowFixMe) };
     },
   };
-};
+}