refactor: rename cssProps to classProps

__tests__/tailwindcss/fill.tsx

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

src/classname-to-inline-style.ts

@@ -58,7 +58,9 @@ function getStyles(className: string) {
   if (rule) {
     for (const key of rule.style as unknown as string[]) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      stylesheet[cacheKey][className][key] = (rule.style as any)[key];
+      stylesheet[cacheKey][className][toCamelCase(key)] = (rule.style as any)[
+        key
+      ];
     }
   }
 
@@ -68,3 +70,9 @@ function getStyles(className: string) {
 function isCSSStyleRule(rule: CSSRule): rule is CSSStyleRule {
   return "selectorText" in rule;
 }
+
+function toCamelCase(value: string) {
+  return value
+    .toLowerCase()
+    .replace(/[^\dA-Za-z]+(.)/g, (_, chr) => chr.toUpperCase());
+}

src/styled.tsx

@@ -11,7 +11,8 @@ import { usePlatform } from "./context/platform";
 export interface StyledOptions<P> {
   props?: Array<keyof P & string>;
   spreadProps?: Array<keyof P & string>;
-  cssProps?: Array<keyof P & string>;
+  classProps?: Array<keyof P & string>;
+  supportsClassName?: boolean;
 }
 
 /**
@@ -26,14 +27,19 @@ export function styled<T>(
  */
 export function styled<T, K extends keyof T & string>(
   Component: Component<T>,
-  options: { props?: Array<K>; spreadProps?: Array<K>; cssProps?: Array<K> }
+  options: { props?: Array<K>; spreadProps?: Array<K>; classProps?: Array<K> }
 ): FC<StyledPropsWithKeys<T, K>>;
 /**
  * Actual implementation
  */
 export function styled<T>(
   Component: Component<T>,
-  { props: propsToTransform, spreadProps, cssProps }: StyledOptions<T> = {}
+  {
+    props: propsToTransform,
+    spreadProps,
+    classProps,
+    supportsClassName = false,
+  }: StyledOptions<T> = {}
 ) {
   function Styled({
     className,
@@ -50,7 +56,7 @@ export function styled<T>(
       componentProps,
       propsToTransform,
       spreadProps,
-      cssProps,
+      classProps,
     });
 
     const { hover, focus, active, ...handlers } = useInteraction({
@@ -74,8 +80,9 @@ export function styled<T>(
       propsToTransform,
       componentProps,
       spreadProps,
-      cssProps,
+      classProps,
       preview,
+      supportsClassName,
     });
 
     const children = childStyles

src/use-interaction.ts

@@ -34,8 +34,6 @@ export function useInteraction({
   onPressIn,
   onPressOut,
   className = "",
-  preview,
-  platform,
 }: UseInteractionOptions) {
   const [hover, setHover] = useState(false);
   const [focus, setFocus] = useState(false);
@@ -161,11 +159,6 @@ export function useInteraction({
     if (className.includes("active:")) {
       interaction.onPressIn = handlePressIn;
       interaction.onPressOut = handlePressOut;
-
-      if (platform === "web" && !preview) {
-        interaction.onMouseUp = handlePressOut;
-        interaction.onMouseDown = handlePressIn;
-      }
     }
   }
 

src/with-class-names.ts

@@ -4,7 +4,7 @@ export interface WithClassNames {
   propsToTransform?: string[];
   componentProps: Record<string, unknown>;
   spreadProps?: string[];
-  cssProps?: string[];
+  classProps?: string[];
 }
 export function withClassNames({
   className,
@@ -12,14 +12,14 @@ export function withClassNames({
   componentProps,
   propsToTransform = [],
   spreadProps = [],
-  cssProps = [],
+  classProps = [],
 }: WithClassNames) {
   const classes = twClassName ?? className ?? "";
   const isComponent = classes.split(/\s+/).includes("component");
 
   const allClasses = [];
 
-  for (const prop of [...propsToTransform, ...spreadProps, ...cssProps]) {
+  for (const prop of [...propsToTransform, ...spreadProps, ...classProps]) {
     if (typeof componentProps[prop] === "string") {
       allClasses.push(componentProps[prop]);
     }

src/with-styled-props.ts

@@ -11,8 +11,9 @@ export interface WithStyledPropsOptions<S, T extends string> {
   componentProps: Record<string, unknown>;
   tw: UseTailwindCallback<S>;
   spreadProps?: T[];
-  cssProps?: T[];
+  classProps?: T[];
   preview: boolean;
+  supportsClassName: boolean;
 }
 
 export type WithStyledProps<S, T extends string> = Record<T, unknown> & {
@@ -27,14 +28,14 @@ export function withStyledProps<S, T extends string>({
   styleProp,
   componentProps,
   spreadProps = [],
-  cssProps = [],
+  classProps = [],
   preview,
 }: WithStyledPropsOptions<S, T>): WithStyledProps<S, T> {
   const mainStyles = tw(classes, { flatten: false });
 
   const styledProps: Partial<Record<T, unknown>> = {};
 
-  for (const prop of cssProps) {
+  for (const prop of classProps) {
     const value = componentProps[prop];
 
     if (typeof value === "string") {
@@ -48,6 +49,7 @@ export function withStyledProps<S, T extends string>({
         ).tailwindClassName;
       } else {
         const entries = Object.entries(tw(value, { flatten: true }));
+
         if (entries.length > 0) {
           styledProps[prop] = undefined;
           for (const [key, value] of entries) {