fix: rename valueProps to spreadProps. Add cssProps

__tests__/styled/props.tsx

@@ -35,7 +35,7 @@ describe("Styled - Props", () => {
 
 describe("Styled - Values Props", () => {
   const StyledActivityIndicator = styled(ActivityIndicator, {
-    valueProps: ["color"],
+    spreadProps: ["color"],
   });
 
   test("can style custom props", () => {

__tests__/tailwindcss/fill.tsx

@@ -31,7 +31,7 @@ const cases: Array<[string, string]> = [
   ["rose-50", "#fff1f2"],
 ];
 
-const StyledCircle = styled(Circle, { valueProps: ["fill", "stroke"] });
+const StyledCircle = styled(Circle, { cssProps: ["fill", "stroke"] });
 
 describe("Svg - Fill", () => {
   test.each(cases)("fill-%s", (unit) => {

__tests__/tailwindcss/stroke-width.tsx

@@ -9,7 +9,7 @@ const cases: Array<[string, string]> = [
   ["2", "2"],
 ];
 
-const StyledCircle = styled(Circle, { valueProps: ["fill", "stroke"] });
+const StyledCircle = styled(Circle, { cssProps: ["fill", "stroke"] });
 
 describe("Svg - Stroke Width", () => {
   test.each(cases)("stroke-%s", (unit) => {

__tests__/tailwindcss/stroke.tsx

@@ -31,7 +31,7 @@ const cases: Array<[string, string]> = [
   ["rose-50", "#fff1f2"],
 ];
 
-const StyledCircle = styled(Circle, { valueProps: ["fill", "stroke"] });
+const StyledCircle = styled(Circle, { cssProps: ["fill", "stroke"] });
 
 describe("Svg - Stroke", () => {
   test.each(cases)("stroke-%s", (unit) => {

src/styled.tsx

@@ -9,40 +9,30 @@ import { useTailwind } from "./use-tailwind";
 
 export interface StyledOptions<P> {
   props?: Array<keyof P & string>;
-  valueProps?: Array<keyof P & string>;
+  spreadProps?: Array<keyof P & string>;
+  cssProps?: Array<keyof P & string>;
 }
 
 /*
  * Normal usage
  */
 export function styled<T>(
   Component: Component<T>,
-  options?: { props?: undefined; valueProps?: undefined }
+  options?: { props?: undefined; spreadProps?: undefined }
 ): FC<StyledProps<T>>;
 /**
  * With either props or valueProps
  */
 export function styled<T, K extends keyof T & string>(
   Component: Component<T>,
-  options: { props: Array<K> } | { valueProps: Array<K> }
-): FC<StyledPropsWithKeys<T, K>>;
-/**
- * With both props and valueProps
- */
-export function styled<
-  T,
-  K extends keyof T & string,
-  J extends keyof T & string
->(
-  Component: Component<T>,
-  options: { props: Array<K>; valueProps: Array<J> }
+  options: { props?: Array<K>; spreadProps?: Array<K>; cssProps?: Array<K> }
 ): FC<StyledPropsWithKeys<T, K>>;
 /**
  * Actual implementation
  */
 export function styled<T>(
   Component: Component<T>,
-  { props: propsToTransform, valueProps }: StyledOptions<T> = {}
+  { props: propsToTransform, spreadProps, cssProps }: StyledOptions<T> = {}
 ) {
   function Styled({
     className,
@@ -70,7 +60,8 @@ export function styled<T>(
       styleProp,
       propsToTransform,
       componentProps,
-      valueProps,
+      spreadProps,
+      cssProps,
     });
 
     const children = childStyles

src/use-tailwind.native.ts

@@ -23,6 +23,7 @@ export function useTailwind<
   active = false,
 }: UseTailwindOptions = {}): UseTailwindCallback<P> {
   const { platform } = usePlatform();
+
   const { colorScheme } = useColorScheme();
   const stylesheetContext = useStyleSheet();
   const deviceMediaContext = useDeviceMedia();

src/use-tailwind.web.ts

@@ -14,13 +14,17 @@ export function useTailwind<
   const { platform, preview } = usePlatform();
 
   if (platform === "web" && preview) {
-    return (className = "") => {
-      return {
-        $$css: true,
-        tailwindClassName: className,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } as any;
-    };
+    if (!options?.flatten) {
+      return (className = "") => {
+        return {
+          $$css: true,
+          tailwindClassName: className,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as any;
+      };
+    } else {
+      // TODO
+    }
   }
 
   return useNativeTailwind<P>(options);

src/with-styled-props.ts

@@ -1,6 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { StyleProp } from "react-native";
-// import { usePlatform } from "./context/platform";
+import { usePlatform } from "./context/platform";
 import { AtRuleRecord } from "./types/common";
 import { UseTailwindCallback } from "./use-tailwind";
 
@@ -12,7 +11,8 @@ export interface WithStyledPropsOptions<S, T extends string> {
   propsToTransform?: T[];
   componentProps: Record<string, unknown>;
   tw: UseTailwindCallback<S>;
-  valueProps?: T[];
+  spreadProps?: T[];
+  cssProps?: T[];
 }
 
 export type WithStyledProps<S, T extends string> = Record<T, unknown> & {
@@ -26,23 +26,29 @@ export function withStyledProps<S, T extends string>({
   propsToTransform,
   styleProp,
   componentProps,
-  valueProps,
+  spreadProps = [],
+  cssProps = [],
 }: WithStyledPropsOptions<S, T>): WithStyledProps<S, T> {
-  // const { preview } = usePlatform();
+  const { preview } = usePlatform();
   const mainStyles = tw(classes, { flatten: false });
 
   const styledProps: Partial<Record<T, unknown>> = {};
 
-  if (valueProps) {
-    for (const prop of valueProps) {
+  if (spreadProps.length > 0 || cssProps.length > 0) {
+    for (const prop of [...spreadProps, ...cssProps]) {
       const value = componentProps[prop];
 
       if (typeof value === "string") {
-        const entries = Object.entries(tw(value, { flatten: true }));
-        if (entries.length > 0) {
+        if (preview) {
           styledProps[prop] = undefined;
-          for (const [key, value] of entries) {
-            styledProps[key as T] = value;
+          mainStyles.push(...tw(value, { flatten: false }));
+        } else {
+          const entries = Object.entries(tw(value, { flatten: true }));
+          if (entries.length > 0) {
+            styledProps[prop] = undefined;
+            for (const [key, value] of entries) {
+              styledProps[key as T] = value;
+            }
           }
         }
       }