parseStyle

The parseStyle function converts a CSS style string into a JavaScript style object with camelCase property names.

Basic Usage

import { parseStyle } from "cx/util";

parseStyle("color: red; font-size: 14px");
// { color: "red", fontSize: "14px" }

parseStyle("background-color: #fff; margin-top: 10px");
// { backgroundColor: "#fff", marginTop: "10px" }

How It Works

The function:

1. Splits the string by semicolons
2. Extracts property-value pairs
3. Converts kebab-case to camelCase (except CSS variables)
4. Returns a style object suitable for React/CxJS

Passthrough Behavior

Non-string values are returned unchanged, making it safe to use with existing style objects.

import { parseStyle } from "cx/util";

// String is parsed
parseStyle("color: red"); // { color: "red" }

// Object passes through
parseStyle({ color: "red" }); // { color: "red" }

// null/undefined pass through
parseStyle(null); // null
parseStyle(undefined); // undefined

CSS Variables

CSS custom properties (variables) are preserved without camelCase conversion.

import { parseStyle } from "cx/util";

parseStyle("--primary-color: blue; color: var(--primary-color)");
// { "--primary-color": "blue", color: "var(--primary-color)" }

Common Use Cases

Dynamic Styles

import { parseStyle } from "cx/util";

interface Config {
  style?: string | Record<string, string>;
}

function applyStyle(config: Config) {
  const style = parseStyle(config.style);
  return <div style={style}>Content</div>;
}

// Works with string
applyStyle({ style: "color: red; padding: 10px" });

// Works with object
applyStyle({ style: { color: "red", padding: "10px" } });

User-Provided Styles

import { parseStyle } from "cx/util";

function CustomComponent({ customStyle }: { customStyle?: string }) {
  const style = parseStyle(customStyle);
  return <div style={style}>Styled content</div>;
}

<CustomComponent customStyle="border: 1px solid #ccc; border-radius: 4px" />

API

function parseStyle(str: string): Record<string, string>;
function parseStyle(str: any): any;

Returns: Style object with camelCase properties, or the input unchanged if not a string.