Chore: Update website for new config options (#23)

apps/docs/docs/api/configuration/babel-plugin.mdx

@@ -12,8 +12,8 @@ sidebar_position: 1
 
 ```ts
 type StyleXOptions = {
-  // Are you in development mode?
-  // When true, stylex will inject styles at runtime.
+  // Should insert debug class names to identify the source of the styles
+  // Also, sets the default value of `runtimeInjection`
   //
   // Default: `false`
   dev: boolean,
@@ -26,15 +26,27 @@ type StyleXOptions = {
   // Default: `false`
   test: boolean,
 
-  // The name of the CSS file that will be generated.
-  // Required in production.
-  stylexSheetName?: string | void,
+  // Should StyleX generate code to inject styles at runtime?
+  // This may be useful during development but should be disabled
+  // in production.
+  //
+  // Default: the value of `dev`
+  runtimeInjection?: boolean,
 
   // Prefix to applied to every generated className
+  //
   // Default: 'x'
   classNamePrefix: string,
 
+  // Should `px` values for `fontSize` be converted to `rem`?
+  // It is a best practice to use `rem` for font sizes to allow
+  // users to scale the font size up or down.
+  //
+  // Default: `true`
+  useRemForFontSize?: boolean,
+
   // Strategy to use for merging styles
+  //
   // Default: 'application-order'
   styleResolution:
     // The last style applied wins. Consistent with how inline styles work on the web.
@@ -48,14 +60,25 @@ type StyleXOptions = {
     | 'legacy-expand-shorthands',
 
   // Override the name of the package where you can import stylex from.
+  //
   // Default: ['@stylexjs/stylex']
   importSources: Array<string>,
 
   // Enable experimental compile-time optimization to pre-compute
   // `stylex.props` and `stylex()` function calls with conditional styles
   // when all possible styles used are defined in the same file and known 
   // at compile-time.
-  genConditionalClasses: boolean,
+  //
+  // Default: `false`
+  genConditionalClasses?: boolean,
+
+  // Named imports of StyleX variables are unused after compilation.
+  // Some bundlers may remove them as dead code. Causing variables to be undefined.
+  // Enable this option to prevent that by adding an import with no specifier.
+  // (e.g. `import './my-vars.stylex.js'`)
+  //
+  // Default: `false`
+  treeshakeCompensation?: boolean,
 
   // Strategy to use for resolving variables defined with 
   // `stylex.defineVars()`

apps/docs/docs/api/configuration/dev-runtime.mdx

@@ -15,6 +15,13 @@ export type DevRuntimeOptions = {
   // Prefix to applied to every generated className
   // Default: 'x'
   classNamePrefix?: string,
+
+  // Should `px` values for `fontSize` be converted to `rem`?
+  // It is a best practice to use `rem` for font sizes to allow
+  // users to scale the font size up or down.
+  //
+  // Default: `true`
+  useRemForFontSize?: boolean,
 
   // Strategy to use for merging styles
   // Default: 'application-order'

apps/docs/docs/learn/03-installation.mdx

@@ -138,6 +138,9 @@ provides plugins for Webpack, Rollup, and Next.js.
         filename: 'styles.css',
         // get webpack mode and set value for dev
         dev: argv.mode === 'development',
+        // Use statically generated CSS files and not runtime injected CSS.
+        // Even in development.
+        runtimeInjection: false,
         // optional. default: 'x'
         classNamePrefix: 'x',
         // Required for CSS variable support
@@ -171,7 +174,7 @@ provides plugins for Webpack, Rollup, and Next.js.
         '@stylexjs/babel-plugin',
         {
           dev: process.env.NODE_ENV === 'development',
-          stylexSheetName: '<>',
+          runtimeInjection: false,
           genConditionalClasses: true,
           unstable_moduleResolution: {
             type: 'commonJS',

packages/nextjs-plugin/src/custom-webpack-plugin.js

@@ -29,6 +29,7 @@ const { RawSource, ConcatSource } = webpack.sources;
 /*::
 type PluginOptions = $ReadOnly<{
   dev?: boolean,
+  useRemForFontSize?: boolean,
   stylexImports?: $ReadOnlyArray<string>,
   babelConfig?: $ReadOnly<{
     plugins?: $ReadOnlyArray<mixed>,
@@ -50,6 +51,7 @@ class StylexPlugin {
 
   constructor({
     dev = IS_DEV_ENV,
+    useRemForFontSize,
     appendTo,
     filename = appendTo == null ? 'stylex.css' : undefined,
     stylexImports = ['stylex', '@stylexjs/stylex'],
@@ -74,8 +76,10 @@ class StylexPlugin {
       stylexBabelPlugin,
       {
         dev,
-        stylexSheetName: '<>',
+        useRemForFontSize,
+        runtimeInjection: false,
         genConditionalClasses: true,
+        treeshakeCompensation: true,
         unstable_moduleResolution: {
           type: 'commonJS',
           rootDir,