Next.js Move CSS in JS Styles

verified codemod icon

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

Next.js
jscodeshift
Estimated time saving
5 minutes/occurrence
Change mode
Assistive
Applicability criteria

Next.js version higher or equal to 13.4

Made by
Codemod.com
Codemod.com

Usage →

Codemod CLI:

intalling vs code extension tooltip icon
codemod next/13/move-css-in-js-styles
copy CLI command icon

Codemod VS Code extension:

intalling vs code extension tooltip icon
vs code logo
Run in VS Code

Description

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;
}

Links for more info