stylex-webpack 0.4.10 → 0.4.12

package/README.md

@@ -19,15 +19,24 @@ Unlike StyleX's official webpack plugin, `stylex-webpack` requires you have setu
 
 ```sh
 # npm
-npm i stylex-webpack @stylexjs/babel-plugin
+npm i stylex-webpack
 # Yarn
-yarn add stylex-webpack @stylexjs/babel-plugin
+yarn add stylex-webpack
 # pnpm
-pnpm add stylex-webpack @stylexjs/babel-plugin
+pnpm add stylex-webpack
 ```
 
 `@stylexjs/babel-plugin` is declared as a mandatory peer dependency. But we still recommend you install it directly in your project to specify the version you want to use.
 
+```sh
+# npm
+npm i @stylexjs/babel-plugin -D
+# Yarn
+yarn add @stylexjs/babel-plugin -D
+# pnpm
+pnpm add @stylexjs/babel-plugin -D
+```
+
 Also you will most likely need to install `@stylexjs/stylex` as well if you haven't already:
 
 ```sh
@@ -97,6 +106,81 @@ Then import `stylex-webpack/stylex.css` inside the entry point of your Next.js A
 import 'stylex-webpack/stylex.css';
 ```
 
+### Utilities
+
+`stylex-webpack` also exports a few utilities for better StyleX development experience under `stylex-webpack/utils`:
+
+#### `stylexPropsWithClassName`
+
+This allows you to easily combine `stylex.props` with other CSS class names, which is useful when you want to use stylex together with other CSS solutions when stylex is not enough, notoriously, Radix UI uses data attributes for uncontrolled components' styling.
+
+```tsx
+import * as stylex from '@stylexjs/stylex';
+import { stylexPropsWithClassName } from 'stylex-webpack/utils';
+
+const styles = stylex.create({
+  myStyle: {
+    color: 'red'
+  }
+});
+
+import cssModules from './MyComponent.module.css';
+
+<div
+  {...stylexPropsWithClassName(
+    stylex.props(styles.myStyle),
+    // You can now easily combine stylex.props with other CSS class names
+    // This is useful when you want to use stylex together with other CSS solutions when stylex is not enough
+    cssModules.someClassName,
+    cssModules.anotherClassName,
+    condition && cssModules.conditionalClassName
+  )}
+>
+```
+
+#### `stylexPropsWithStyleObject`
+
+Similar to `stylexPropsWithClassName`, this allows you to easily combine `stylex.props` with inline style objects, this is useful if you have custom inline style object, e.g. from dynamically generated styles based on user input.
+
+```tsx
+import * as stylex from '@stylexjs/stylex';
+import { stylexPropsWithStyleObject } from 'stylex-webpack/utils';
+
+const styles = stylex.create({
+  myStyle: {
+    color: 'var(--user-input-color)'
+  }
+});
+
+<div {...stylexPropsWithStyleObject(
+  stylex.props(styles.myStyle),
+  {
+    // You can now easily combine stylex.props with inline style objects
+    // This is useful if you have custom inline style object, e.g. from dynamically generated styles based on user input
+    '--user-input-color': userInputColor
+  }
+)}>
+```
+
+#### `type WithXStyleProps`
+
+When you are making a reusable component that accepts external styles, `WithXStyleProps` allows you to easily type your component's props to accept external stylex styles via the `xstyle` prop.
+
+```tsx
+const buttonStyles = stylex.create({
+  base: {}
+});
+
+// Now ButtonProps no longer accepts `className` and `style` but accepts `xstyle`.
+export interface ButtonProps extends WithXStyleProps<React.ComponentProps<'button'>> {
+  // Your other props goes here
+}
+
+export default function Button({ xstyle, ...props }: ButtonProps) {
+  return <button {...stylexPropsWithClassName(styles.base, xstyle)} {...props} />;
+}
+```
+
 ## Options
 
 ### webpack

package/dist/index.js

@@ -5,7 +5,7 @@ var path = require('node:path');
 var process = require('node:process');
 var identity = require('foxts/identity');
 
-var version = "0.4.10";
+var version = "0.4.12";
 
 const PLUGIN_NAME = 'stylex';
 const VIRTUAL_ENTRYPOINT_CSS_PATH = require.resolve('./stylex.css');

package/dist/next.js

@@ -141,7 +141,6 @@ function withStyleX(pluginOptions) {
                 config.plugins.push(new index.StyleXPlugin({
                     nextjsMode: true,
                     nextjsAppRouterMode: true,
-                    ...pluginOptions,
                     stylexOption: {
                         ...pluginOptions?.stylexOption,
                         dev: ctx.dev
@@ -156,7 +155,8 @@ function withStyleX(pluginOptions) {
                             return pluginOptions.transformCss(result.css);
                         }
                         return result.css;
-                    }
+                    },
+                    ...pluginOptions
                 }));
                 return config;
             }

package/dist/utils/index.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var clsx = require('clsx');
+
+function stylexPropsWithClassName(stylexProps, ...inputs) {
+    return {
+        ...stylexProps,
+        className: clsx.clsx(stylexProps.className, ...inputs)
+    };
+}
+function stylexPropsWithStyleObject(stylexProps, style) {
+    return {
+        ...stylexProps,
+        style: {
+            ...stylexProps.style,
+            ...style
+        }
+    };
+}
+const DEFAULT_XSTYLE = [];
+
+exports.DEFAULT_XSTYLE = DEFAULT_XSTYLE;
+exports.stylexPropsWithClassName = stylexPropsWithClassName;
+exports.stylexPropsWithStyleObject = stylexPropsWithStyleObject;

package/dist/utils/index.d.ts

@@ -0,0 +1,38 @@
+import { ClassValue } from 'clsx';
+import { StaticStyles } from '@stylexjs/stylex';
+
+declare function stylexPropsWithClassName(stylexProps: Readonly<{
+    className?: string;
+    'data-style-src'?: string;
+    style?: Readonly<{
+        [$$Key$$: string]: string | number;
+    }>;
+}>, ...inputs: ClassValue[]): {
+    className: string;
+    'data-style-src'?: string;
+    style?: Readonly<{
+        [$$Key$$: string]: string | number;
+    }>;
+};
+declare function stylexPropsWithStyleObject(stylexProps: Readonly<{
+    className?: string;
+    'data-style-src'?: string;
+    style?: Readonly<{
+        [$$Key$$: string]: string | number;
+    }>;
+}>, style: Readonly<{
+    [$$Key$$: string]: string | number;
+}>): {
+    style: {
+        [x: string]: string | number;
+    };
+    className?: string;
+    'data-style-src'?: string;
+};
+type WithXStyleProps<T = object, X extends StaticStyles = StaticStyles> = Omit<T, 'className' | 'style'> & {
+    xstyle?: X;
+};
+declare const DEFAULT_XSTYLE: StaticStyles;
+
+export { DEFAULT_XSTYLE, stylexPropsWithClassName, stylexPropsWithStyleObject };
+export type { WithXStyleProps };

package/dist/utils/index.mjs

@@ -0,0 +1,20 @@
+import { clsx } from 'clsx';
+
+function stylexPropsWithClassName(stylexProps, ...inputs) {
+    return {
+        ...stylexProps,
+        className: clsx(stylexProps.className, ...inputs)
+    };
+}
+function stylexPropsWithStyleObject(stylexProps, style) {
+    return {
+        ...stylexProps,
+        style: {
+            ...stylexProps.style,
+            ...style
+        }
+    };
+}
+const DEFAULT_XSTYLE = [];
+
+export { DEFAULT_XSTYLE, stylexPropsWithClassName, stylexPropsWithStyleObject };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylex-webpack",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "description": "The another Webpack Plugin for Facebook's StyleX",
   "homepage": "https://github.com/SukkaW/style9-webpack#readme",
   "repository": {
@@ -26,7 +26,13 @@
       "types": "./dist/next.d.ts",
       "default": "./dist/next.js"
     },
-    "./stylex.css": "./dist/stylex.css"
+    "./stylex.css": "./dist/stylex.css",
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.mjs",
+      "require": "./dist/utils/index.cjs",
+      "default": "./dist/utils/index.cjs"
+    }
   },
   "scripts": {
     "prebuild": "premove dist",
@@ -53,31 +59,32 @@
     "@babel/plugin-syntax-jsx": "^7.28.6",
     "@babel/plugin-syntax-typescript": "^7.28.6",
     "@types/webpack": "^5.28.5",
+    "clsx": "^2.1.1",
     "foxts": "^5.3.0",
     "loader-utils": "^3.3.1"
   },
   "devDependencies": {
-    "@eslint-sukka/node": "^8.7.0",
+    "@eslint-sukka/node": "^8.7.1",
     "@rollup/plugin-json": "^6.1.0",
+    "@stylexjs/stylex": "^0.18.1",
     "@swc-node/register": "^1.11.1",
-    "@swc/core": "^1.15.17",
+    "@swc/core": "^1.15.18",
     "@types/babel__core": "^7.20.5",
     "@types/loader-utils": "^3.0.0",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^22.19.13",
+    "@types/node": "^22.19.15",
     "browserslist": "^4.28.1",
     "bumpp": "^10.4.1",
     "css-loader": "^7.1.4",
     "earl": "^2.0.0",
-    "eslint": "^9.39.3",
-    "eslint-config-sukka": "^8.7.0",
-    "eslint-formatter-sukka": "^8.7.0",
-    "expect": "^30.2.0",
-    "memfs": "^4.56.10",
+    "eslint": "^9.39.4",
+    "eslint-config-sukka": "^8.7.1",
+    "eslint-formatter-sukka": "^8.7.1",
+    "memfs": "^4.56.11",
     "mini-css-extract-plugin": "^2.10.0",
     "mocha": "^11.7.5",
     "next": "^15.5.12",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "premove": "^4.0.0",
     "rollup": "^4.59.0",
     "rollup-plugin-copy": "^3.5.0",
@@ -85,10 +92,11 @@
     "rollup-plugin-swc3": "^0.12.1",
     "swc-loader": "^0.2.7",
     "typescript": "^5.9.3",
-    "webpack": "^5.105.3"
+    "webpack": "^5.105.4"
   },
   "peerDependencies": {
-    "@stylexjs/babel-plugin": "*"
+    "@stylexjs/babel-plugin": "*",
+    "@stylexjs/stylex": "*"
   },
   "packageManager": "pnpm@10.30.3",
   "pnpm": {