use-stylex/lite without Tailwind syntax

Author: doong

lite.d.ts

@@ -0,0 +1 @@
+export * from './dist/lite';

lite.js

@@ -0,0 +1 @@
+module.exports = require('./dist/lite');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-stylex",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "keywords": [],
   "author": "",
@@ -11,7 +11,9 @@
   "files": [
     "dist",
     "tailwind.js",
-    "tailwind.d.ts"
+    "tailwind.d.ts",
+    "lite.js",
+    "lite.d.ts"
   ],
   "publishConfig": {
     "access": "public"

src/lite.ts

@@ -0,0 +1,56 @@
+import * as stylex from '@stylexjs/stylex';
+
+type UseStyleXParams = {
+  isWithAttrs?: boolean;
+};
+
+export type Classes<T> = {
+  [K in keyof T]: T[K] extends (...args: any[]) => any ? ((...args: Parameters<T[K]>) => {
+    [key: string]: string
+  }) : string;
+} & {
+  getClass: (...args: (keyof T | T[keyof T])[]) => string;
+};
+
+export const useStyleX = <T extends Record<string, any>>(xStyles: T, params: UseStyleXParams = {}): {
+  classes: Classes<T>
+} => {
+  const { isWithAttrs = false } = params;
+
+  const classKey = isWithAttrs ? 'class' : 'className';
+  const funcKey = isWithAttrs ? 'attrs' : 'props';
+
+  const classes = {} as Partial<Classes<T>>;
+
+  Object.keys(xStyles).forEach((key) => {
+    const value = xStyles[key];
+
+    if (typeof value === 'function') {
+      (classes as any)[key as keyof T] = (...args: any[]) => {
+        return (stylex as any)[funcKey](value(...args));
+      };
+    } else {
+      const props = (stylex as any)[funcKey](value);
+      classes[key as keyof T] = props[classKey];
+    }
+  });
+
+  classes.getClass = ((...args: (keyof T | T[keyof T])[]): string => {
+    const styles = args.map((arg) => {
+      if (typeof arg === 'string') {
+        return xStyles[arg];
+      }
+
+      return arg;
+    });
+
+    const props: any = (stylex as any)[funcKey](...styles);
+    return props[classKey];
+  }) as Classes<T>['getClass'];
+
+  return {
+    classes: classes as Classes<T>
+  }
+};
+
+export default useStyleX