Babel codemod designed to migrate from react-jss to styled-components.
Our large codebase React switched to the popular CSS-in-JS livrary styled-components
, after 1-2 years of development with react-jss
.
No hard feeling towards react-jss, as the main reason for the move was achieving consistency across the tech stack of our products, as we were the only ones using jss.
And that could have been the end of the story. The "older" code would live peacefully with Jss, and the new one would use styled-components.
But what if we could write a script that could do the migration automatically? Looking at what it would take, that seemed like an overwhelming complex task.
Enter Babel, codemods and ASTs.
- Fork/Clone this repo
- Install dependencies
From the root of this repo, run the CLI
$ node ./src/cli.js -f 'path/to/your/file.js'
If you use the composes
property in your Jss, please read the documentation for the options css
and remove-composes-only
Advanced example:
$ node ./src/cli.js -d 'path/to/your/folder' -css 'path/to/your/css/file.css'
- The
react-jss
import is present - A top-level variable called
styles
hold the JSS classes - The JSS injected prop is called
classes
- The prop
classes
is only used inclassName
attribute of a JSX element
A simple example would be:
import injectSheet from 'react-jss'
const styles = {
container: {
composes: "mx-auto my8",
paddingTop: 12,
color: "gray",
},
}
const UserCard = ({ classes }) => (
<section className={classes.container}>🏃🏻♂️</section>
)
export default injectSheet(styles)(UserCard)
which would be translated to
import styled from 'styled-components'
const Container = styled.section`
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
paddingTop: 12px;
color: gray;
`
const UserCard = () => (
<Container>🏃🏻♂️</Container>
)
Many advanced scenarios are supported: Use of composes
, Css concatenation functions, nested definitions, variables,...
Deep dive into the Snapshot files to see them.
-
-h or -help
Help -
-dry-run
The script is run, but your files aren't modified.
A good way to check if the script blows up (and where) on your codebase. -
-f path
Path of the file to run the script on -
-d path
Path of the directory to run the script on.
The script will be run recursively on all files and folders contains in this folders, except for a few exceptions (node_modules
,.git
,public
,temp
, ...) -
-remove-composes-only The script will only process the
composes
property in the Jss classes.
Must be used with thecss
option. -
-css path
Css file's path
Used to resolve the JSS'scomposes
property.
In the example below, the script doesn't know what aremx-auto
andborder-top
, as they are specific to the application.const styles = { container: { composes: "mx-auto border-top", marginTop: 8, }, }
By default, it will pass it as
className
to the generated styled-componentconst Container = styled.div.attrs({ className: "mx-auto border-top" })` margin-top: 8px; `
You have the option of resolving those css classes.
// my-custom-css.js .border-top { border-top-style: solid; border-top-width: 1px; } .mx-auto { margin-left: auto; margin-right: auto; }
The ouput will then be:
const Container = styled.div` margin-top: 8px; margin-left: auto; margin-right: auto; border-top-style: solid; border-top-width: 1px; `
- -cssConcatenationFunctions functions
Comma-separated names of the name of the functions used to do the concatenation of css classes, when using packages like
classnames
.
Default tocn
<div className={cn(classes.card, "margin-bottom-10")}>🙋🏻♂️</div>