Primer SX to CSS Module Converter

Primer SX to CSS Converter

This is a small utility to help with migrating React code using Primer from CSS-in-JS to CSS Modules. It's available in two forms: a web UI, and a VSCode extension.

VSCode extension

The VSCode extension integrations conversion directly into your editor. To use the extension after install:

1. Select an sx object in the editor. You can either select the entire object including surrounding braces, or you can select a few lines from within the object
2. Use the context menu or command palette to execute one of the two commands:
   • Convert object to CSS and copy to clipboard will convert the object and write the result to your clipboard
   • Convert object to CSS and copy to module file will convert the object, then append it to a corresponding module.css file. If the file doesn't exist, it will be created. The text is inserted as a snippet, so you can press Tab once to highlight and quickly edit the class name

Web UI

See https://iansan5653.github.io/primer-sx-to-css-converter/