Chore: Improve default options for bundlers (#25)

* Chore: Improve default options for bundlers

* Chore: Export more types from Babel plugin (#26)

.flowconfig

@@ -27,6 +27,8 @@ module.name_mapper='^@stylexjs\/shared$' -> '<PROJECT_ROOT>/packages/shared/src/
 module.name_mapper='^@stylexjs\/shared\/lib\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_ROOT>/packages/shared/src/\1'
 module.name_mapper='^@stylexjs/stylex$' -> '<PROJECT_ROOT>/packages/stylex/src/stylex.js'
 module.name_mapper='^@stylexjs/stylex\/lib\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_ROOT>/packages/stylex/src/\1'
+module.name_mapper='^@stylexjs/babel-plugin$' -> '<PROJECT_ROOT>/packages/babel-plugin/src/index.js'
+module.name_mapper='^@stylexjs/babel-plugin\/lib\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_ROOT>/packages/babel-plugin/src/\1'
 ; type-stubs
 module.system.node.resolve_dirname=flow_modules
 module.system.node.resolve_dirname=node_modules

apps/docs/docs/learn/05-theming/02-using-variables.mdx

@@ -18,7 +18,7 @@ subject to change.
 
 :::
 
-Once [variables have been defined](../defining-variables), they can be imported
+Once [variables have been defined](./01-defining-variables.mdx), they can be imported
 and used to declare styles with `stylex.create`.
 
 Assume the following variables have been defined in a file called

apps/docs/docs/learn/05-theming/03-creating-themes.mdx

@@ -6,9 +6,6 @@
 sidebar_position: 3
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 # Creating themes
 
 :::danger

apps/nextjs-example/.babelrc.js

@@ -7,8 +7,9 @@ module.exports = {
       '@stylexjs/babel-plugin',
       {
         dev: process.env.NODE_ENV === 'development',
-        stylexSheetName: '<>',
+        runtimeInjection: false,
         genConditionalClasses: true,
+        treeshakeCompensation: true,
         unstable_moduleResolution: {
           type: 'commonJS',
           rootDir: path.join(__dirname, '../..'),

apps/rollup-example/rollup.config.mjs

@@ -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.
+ *
+ *
  */
 
 import stylexPlugin from '@stylexjs/rollup-plugin';

packages/babel-plugin/src/index.js

@@ -10,6 +10,7 @@
 import * as t from '@babel/types';
 import type { NodePath } from '@babel/traverse';
 import type { PluginObj } from '@babel/core';
+import type { StyleXOptions } from './utils/state-manager';
 import StateManager from './utils/state-manager';
 import { readImportDeclarations, readRequires } from './visitors/imports';
 import transformStyleXCreate from './visitors/stylex-create';
@@ -25,6 +26,8 @@ import { skipStylexPropsChildren } from './visitors/stylex-props';
 
 const NAME = 'stylex';
 
+export type Options = StyleXOptions;
+
 /**
  * Entry point for the StyleX babel plugin.
  */
@@ -139,6 +142,12 @@ export default function styleXTransform(): PluginObj<> {
   };
 }
 
+styleXTransform.withOptions = function stylexPluginWithOptions(
+  options: StyleXOptions,
+): [typeof styleXTransform, StyleXOptions] {
+  return [styleXTransform, options];
+};
+
 function isExported(path: null | NodePath<t.Node>): boolean {
   if (path == null || pathUtils.isProgram(path)) {
     return false;
@@ -167,7 +176,7 @@ function isExported(path: null | NodePath<t.Node>): boolean {
  *
  * End-users can choose to not use this function and use their own logic instead.
  */
-type Rule = [string, { ltr: string, rtl?: null | string }, number];
+export type Rule = [string, { ltr: string, rtl?: null | string }, number];
 function processStylexRules(
   rules: Array<Rule>,
   useLayers: boolean = false,

packages/babel-plugin/src/utils/state-manager.js

@@ -36,7 +36,7 @@ type ModuleResolution =
       themeFileExtension?: string,
     };
 
-type StyleXOptions = {
+export type StyleXOptions = {
   ...RuntimeOptions,
   importSources: Array<string>,
   treeshakeCompensation?: boolean,

packages/rollup-plugin/src/index.js

@@ -20,13 +20,12 @@ const IS_DEV_ENV =
 
 module.exports = function stylexPlugin({
   dev = IS_DEV_ENV,
-  runtimeInjection,
+  unstable_moduleResolution = { type: 'commonJS', rootDir: process.cwd() },
   fileName = 'stylex.css',
   babelConfig: { plugins = [], presets = [] } = {},
   ...options
 } = {}) {
   let stylexRules = {};
-
   return {
     name: 'rollup-plugin-stylex',
     buildStart() {
@@ -36,7 +35,6 @@ module.exports = function stylexPlugin({
       const rules = Object.values(stylexRules).flat();
       if (rules.length > 0) {
         const collectedCSS = stylexBabelPlugin.processStylexRules(rules, true);
-
         this.emitFile({
           fileName,
           source: collectedCSS,
@@ -59,14 +57,13 @@ module.exports = function stylexPlugin({
             ? flowSyntaxPlugin
             : typescriptSyntaxPlugin,
           jsxSyntaxPlugin,
-          [stylexBabelPlugin, { dev, runtimeInjection, ...options }],
+          [stylexBabelPlugin, { dev, unstable_moduleResolution, ...options }],
         ],
       });
 
       if (!dev && metadata.stylex != null && metadata.stylex.length > 0) {
         stylexRules[id] = metadata.stylex;
       }
-
       return { code, map, meta: metadata };
     },
   };

packages/scripts/gen-types.js

@@ -78,26 +78,30 @@ async function generateTypes(inputDir, outputDir, rootDir) {
               .join('\n');
           }
 
-          outputFlowContents = patchFlowModulePaths(
-            outputFullPath,
-            outputFlowContents,
-            flowModules,
-          );
+          const tsOutputName = dirent.name
+            .replace(/\.js$/, '.d.ts')
+            .replace(/\.js\.flow$/, '.d.ts');
 
           await fsPromises.writeFile(
             `${outputFullPath}.flow`,
-            outputFlowContents,
+            patchFlowModulePaths(
+              outputFullPath,
+              outputFlowContents,
+              flowModules,
+            ),
           );
-          const tsOutputName = dirent.name
-            .replace(/\.js$/, '.d.ts')
-            .replace(/\.js\.flow$/, '.d.ts');
+
           if (dTsFiles.includes(tsOutputName)) {
             continue;
           }
+
           const outputTSContents = await translate.translateFlowDefToTSDef(
-            outputFlowContents.replace(/\$ReadOnlyMap/g, 'ReadonlyMap'),
+            outputFlowContents
+              .replace(/\$ReadOnlyMap/g, 'ReadonlyMap')
+              .replace(/\$ReadOnlySet/g, 'ReadonlySet'),
             monorepoPackage.prettier,
           );
+
           await fsPromises.writeFile(
             outputFullPath.replace(/\.js$/, '.d.ts'),
             // Typescript Prefers `NodePath` unlike `NodePath<>` in Flow
@@ -130,10 +134,7 @@ function preprocessFileContents(inputCode) {
 }
 
 function postProcessTSOutput(outputCode) {
-  const result = outputCode
-    .replace(/<>/g, '')
-    .replace(/\$ReadOnlyMap/g, 'ReadonlyMap')
-    .replace(/\$ReadOnlySet/g, 'ReadonlySet');
+  const result = outputCode.replace(/<>/g, '');
 
   return result;
 }

packages/webpack-plugin/src/index.js

@@ -46,10 +46,10 @@ class StylexPlugin {
 
   constructor({
     dev = IS_DEV_ENV,
-    runtimeInjection,
     appendTo,
     filename = appendTo == null ? 'stylex.css' : undefined,
-    stylexImports = ['stylex', '@stylexjs/stylex'],
+    stylexImports = ['stylex', '@stylex/css'],
+    unstable_moduleResolution = { type: 'commonJS', rootDir: process.cwd() },
     babelConfig: { plugins = [], presets = [], babelrc = false } = {},
     ...options
   } /*: PluginOptions */ = {}) {
@@ -60,7 +60,7 @@ class StylexPlugin {
     this.stylexImports = stylexImports;
     this.babelPlugin = [
       stylexBabelPlugin,
-      { dev, runtimeInjection, ...options },
+      { dev, unstable_moduleResolution, stylexImports, ...options },
     ];
   }