Overview

styled-jsx-migrate guides moving a component's styling from plain CSS, CSS Modules, or other CSS-in-JS to styled-jsx. It emphasizes preserving behavior, accessibility, and SSR compatibility, and provides a concrete plan, file structure, and testing considerations to minimize regressions.

How This Skill Works

The skill guides you through identifying existing selectors, states, and variants, then mapping them to styled-jsx blocks: component-scoped styles with <style jsx>, and global escapes with <style jsx global> when needed. It promotes removing dead selectors, reducing specificity, and using CSS variables or class toggling for dynamic values to keep styles predictable and SSR-friendly.

When to Use It

• Migrating a component from plain CSS to styled-jsx for scoped styling
• Replacing CSS Modules with styled-jsx while preserving encapsulation
• Implementing dynamic styling via CSS variables or class toggling in styled-jsx
• Maintaining SSR compatibility and accessibility during migration
• Cleaning up dead selectors and reducing specificity after migration

Quick Start

1. Step 1: Identify selectors, states, and variants in the target component
2. Step 2: Create a <style jsx> block and map selectors to styled-jsx rules; add <style jsx global> for safe global escapes
3. Step 3: Remove dead selectors, swap CSS references for styled-jsx, and run tests

Best Practices

• Identify selectors, states, and variants before refactor
• Use <style jsx> for component-scoped styles and <style jsx global> for safe global rules
• Leverage CSS variables for dynamic values to avoid inline style changes
• Keep accessibility in mind: preserve roles, labels, and focus styles
• Update tests, stories, and diffs to reflect the new styling approach

Example Use Cases

• Refactor a Button component from CSS Modules to styled-jsx, preserving hover/focus states
• Migrate a Card with variants (outline, shadow) to styled-jsx while preserving layout
• Convert a Navbar with global typography to scoped styles with minimal global selectors
• Theming a Form Input using CSS vars in styled-jsx
• Ensuring SSR rendering remains stable after style migration

Frequently Asked Questions