SX to CSS Converter

Instructions

Paste TypeScript objects from Primer sx props and get plain CSS, ready for use in CSS modules. The result will get you most of the way there, but some manual work may still be required for complex cases.

• Supported features
  • Converts camelCase rule names to kebab-case
  • Removes quotation marks around strings
  • Replaces shorthand property names with full CSS property names
  • Replaces theme keywords with Primer CSS variables
  • Converts nested objects to CSS Nesting
  • Converts responsive value arrays to nested @media queries
• Unsupported features
  • Complex syntax, including: object spreads, ternary expressions, and template literals
  • Comments