rx

The rx() function—short for React Expand—is a React-specific feature that allows you to inject dynamic inline variables into your components. It enables variable-based styling without breaking static CSS extraction.

Why rx is Needed

Normally, React's inline style attributes are not compatible with static CSS extraction because their values are dynamic. This can lead to a mix of static classes and inline styles, which is hard to manage.

rx() solves this by injecting CSS variables into the inline style prop while keeping all your static styles in pre-compiled classes. This gives you the best of both worlds: dynamic styling capabilities and zero-runtime, atomic CSS.

rx vs. Inline style

Using rx instead of React's style prop directly has clear advantages for both performance and maintainability.

Browser Rendering Efficiency

When you write inline styles directly, like style={{ width: '100px', background: 'aqua' }}, React creates a new style object on every re-render. The browser must then parse and apply this new object each time. If you have many elements or frequent updates, this can become a performance bottleneck.

With rx, the static parts of your style (e.g., background: 'aqua') are moved into a pre-compiled, reusable CSS class. Only the dynamic value—the CSS Custom Property (--width)—is applied inline. Browsers are highly optimized to handle static CSS classes, and only need to recalculate the value of the CSS variable when it changes, which is much more efficient than re-evaluating an entire object of style properties.

Architecture and Maintainability

rx provides a formal pattern for integrating dynamic values into Plumeria's static extraction model. This helps separate styling concerns from component logic and maintains a consistent design approach across your codebase. This clear separation—static rules at build time, dynamic variables at runtime—improves long-term maintainability.

Usage

To use rx, pass your static css.props() result as the first argument, and an object of CSS variables as the second.

On the left side, register the style with the registered variable. On the right side, register the value to be dynamically assigned to the style as an object.

'use client';
 
import { useState } from 'react';
import { css, rx } from '@plumeria/core';
 
const styles = css.create({
  bar: {
    width: 'var(--width)',
    background: 'aqua',
  },
});
 
export const Component = () => {
  const [state, setState] = useState(0);
  return (
    <div {...rx(css.props(styles.bar), { '--width': state + 'px' })} />
  )
}

Advanced Examples

Applying Multiple Variables

You can apply as many CSS variables as you need. You can also use expressions directly inside the variables object.

const [isActive, setIsActive] = useState(false);
 
<div
  {...rx(css.props(styles.bar), {
    '--width': isActive ? '100px' : '50px',
    '--height': isActive ? '200px' : '100px',
  })}
/>

Extracting Logic

For cleaner code, you can extract the dynamic variables into a separate object. This is useful when applying the same dynamic styles to multiple elements.

const dynamicVars = {
  '--width': state + 'px',
  '--height': state + 'px',
};
 
<div {...rx(css.props(styles.bar), dynamicVars)} />
<div {...rx(css.props(styles.other), dynamicVars)} />

API Reference

Return Value

rx() returns an object containing className and style properties, ready to be spread onto a React element.

• className: Your static, pre-compiled class name.
• style: An object mapping your dynamic CSS variables.

const props = rx(css.props(styles.bar), { '--width': '100px' });
 
/* props is equal to:
{
  className: 'zxxxxxxx',
  style: {
    '--width': '100px'
  }
}
*/