Next.js
migration
byCodemod

Next/13/Move Css In Js Styles

/icons/calendar.svg

Last update

Apr 23, 2024

This highly experimental codemod moves the CSS-in-JS styles into the CSS Modules.

Example

Before

const Head = () => {
return (
<head>
<style type="text/css">
{`
body {
margin: 0;
padding: 0;
}
`}
</style>
</head>
);
};
export default Head;

After

The file gets transformed into:

import styles from 'Head.module.css';
const Head = () => {
return <head className={styles['wrapper']}></head>;
};
export default Head;

And the codemod creates the new file Head.module.css which contains:

body {
margin: 0;
padding: 0;
}

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

background illustrationGet Started Now