This is a tool to convert css-modules to tailwind-css
- tsconfig.json alias support, like
alias/component/index.module.css
- css file circular reference
- project level support, just run this command:
npx css-modules-to-tailwind src/**/*.tsx
- pseudo-classes support
It uses jscodeshift and postcss.
If you have a component named 'User'(src/index.tsx):
import style form 'index.module.css';
const User = () => (
<div className={style.header}>
<div className={style.user}>
<img className={style.avatar} src={creator.avatar} alt="avatar" />
<span className={style.username}>{creator.username}</span>
</div>
<div className={style.channelName}>{channel.name}</div>
</div>
);
And used css-modules:
.header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.user {
display: flex;
align-items: center;
font-weight: bold;
}
.avatar {
width: 0.625rem;
height: 0.625rem;
}
.username {
font-size: 0.75rem;
line-height: 1rem;
color: #7DD3FC;
margin-left: 0.25rem;
}
To install the stable version:
npm install css-modules-to-tailwind -g
Or use directly:
npx css-modules-to-tailwind src/index.tsx
// npx css-modules-to-tailwind src/**/*.tsx
Tool will check your git directory is clean, you can use '--force' to skip the check.
When you're done, in your index.tsx:
import style form 'index.module.css';
const User = () => (
<div className={`${style.header} items-center flex justify-between w-full`}>
<div className={`${style.user} items-center flex font-bold`}>
<img className={`${style.avatar} h-2.5 w-2.5`} src={creator.avatar} alt="avatar" />
<span className={`${style.username} text-sky-300 text-xs ml-1`}>{creator.username}</span>
</div>
<div className={style.channelName}>{channel.name}</div>
</div>
);
Your css file:
// index.module.css
// no more content
why not delete index.module.css? Because it's dangerous...There may be other places that still depend on it.
You might question if I have custom style in css file, like:
.selector1 {
width: 1111px;
font-size: 0.75rem;
line-height: 1rem;
}
.selector2 :global .global-class {
font-size: 0.75rem;
line-height: 1rem;
}
.selector2 {
font-size: 0.75rem;
line-height: 1rem;
}
.fuck {
composes: selector2;
}
Of course, we won't delete it, it's going to look like this:
.selector1 {
width: 1111px;
}
.selector2 :global .global-class {
@apply text-xs;
}
.selector2 {
@apply text-xs;
}
.fuck {
composes: selector2;
}
Of course not.It can also be used for less/scss modules, but it doesn't work very well, like:
.selector1 {
selector2();
}
.selector2 {
font-size: 0.75rem;
line-height: 1rem;
}
It just becomes:
.selector1 {
selector2();
}
I think you should use composes
.
import style form 'index.module.css';
const User = () => (
<>
<div className={style.parentA}>
<div className={style.childrenA}>childrenA</div>
</div>
<div className={style.parentB}>
<div className={style.childrenA}>childrenA</div>
</div>
</>
);
.parentA {
.childrenA {
// some decl
}
}
You shouldn't use nesting as namespace.
import clsx from 'clsx';
import style form 'index.module.css';
const User = () => (
<>
<div className={clsx(style.cls1, style.cls2)}></div>
</>
);
.cls1 {
margin-left: 0.5rem;
display: none;
}
.cls2 {
margin-left: 0.375rem;
display: block
}
Always, it will become like this:
import style form 'index.module.css';
const User = () => (
<>
<div className={clsx(`${style.cls1} hidden ml-2`, `${style.cls2} block ml-1.5`)}></div>
</>
);
I mean, in tailwind, "ml-2 ml-1.5
" === "ml-2
", but in your code, is the latter declaration overriding the former.
I don't think so, I use it just because I like it.