const Container = styled.div``;
const Button = styled.button`
  background: var(--color-primary, blue);
`;

// Variables set on parent cascade to all DOM children
<Container style={{ '--color-primary': 'orchid' }}>
  <Button>Inherits orchid background</Button>
</Container>;

• Use build-time CSS variable generation for theming since ThemeProvider is a no-op in RSC

Technical details:

• RSC detection via typeof React.createContext === 'undefined'
• ThemeProvider and StyleSheetManager become no-ops in RSC (children pass-through)
• React hooks are conditionally accessed via runtime guards
• CSS is retrieved from the StyleSheet Tag for inline delivery in RSC mode

Patch Changes

• 418adbe: fix(types): add CSS custom properties (variables) support to style prop

  CSS custom properties (CSS variables like --primary-color) are now fully supported in TypeScript without errors:

  • .attrs({ style: { '--var': 'value' } }) - CSS variables in attrs
  • <Component style={{ '--var': 'value' }} /> - CSS variables in component props
  • Mixed usage with regular CSS properties works seamlessly

• aef2ad6: Update shared css property handling tools to latest versions.