Atomizer Tailwindcss Migrator

CLI tool to refactor atomizer codebases to tailwindcss

!Screen Recording 2023-12-12 at 3 15 36 PM

Features

- Transform atomizer classes to tailwindcss classes
- Works with jsx, tsx, svelte, vue, html files
- Generate report of all the changes
- Dry run mode
- Customizable mappings - you can pass json file with mappings from atomizer classes to tailwindcss classes
- Customizable plugins - you can pass js file with plugins which will be loaded by the migrator

Installation

npm

``bash
npm install @mohalla-tech/atomizer-tailwindcss-migrator -g
`

yarn

`bash
yarn add @mohalla-tech/atomizer-tailwindcss-migrator -g
`

pnpm

`bash
pnpm add @mohalla-tech/atomizer-tailwindcss-migrator -g
`

Now you can run the migrator using tw-mg command

Options

$3

Show help

$3

Path to atomizer generated css file, it contains all the generated classes

$3

Target files to transform, supports glob pattern

$3

Dry run mode, will only generate report and open it

$3

Do not open report in browser

$3

Path to json file with mappings from atomizer classes to tailwindcss classes, for example we may want to replace $fzTitle variable with title in tailwindcss variable so any class like Fz($fzTitle) will be replaced with text-title

Ex:

`json
{
"$fzTitle": "title"
}
`

$3

Path to js file with plugins which will be loaded by the migrator this can be helpful if you want to do some custom transformation
for help on writing plugins see Writing Plugins

Usage

if we want to run without any mappings or plugins

`bash
tw-mg -s ./path/to/atomizer.css -t ./path/to/target/files
`

with mappings

`bash
tw-mg -s ./path/to/atomizer.css -t ./path/to/target/files -m ./path/to/mappings.json
`

with plugins

`bash
tw-mg -s ./path/to/atomizer.css -t ./path/to/target/files -p ./path/to/plugins.js
`

with mappings and plugins

`bash
tw-mg -s ./path/to/atomizer.css -t ./path/to/target/files -m ./path/to/mappings.json -p ./path/to/plugins.js
`

dry run mode - it will only generate report and open it

`bash
tw-mg -s ./path/to/atomizer.css -t ./path/to/target/files -d
`

Example

we have a file /src/styles/main.css with atomizer classes

`css
.Fz($fzTitle) {
font-size: $fzTitle;
}

.D\(f\) {
display: flex;
}

.Bgc\(c\) {
background-color: $c;
}
`

we want to transform all the atomizer classes to tailwindcss classes within /src/components directory

`bash
tw-mg -s ./src/styles/main.css -t ./src/components/*/.jsx -d
`

this will generate a report and open it in browser, you can then review the changes and apply them by removing -d flag

`bash
tw-mg -s ./src/styles/main.css -t ./src/components/*/.jsx
`

Writing Plugins

Plugin file must export an array of plugins which will be loaded by the migrator, plugins must be an object with name and plugin keys where name is the name of the plugin and plugin is a function which will be called for each atomizer class with className and mappings as arguments, className is the atomizer class and mappings is the mappings object passed to the migrator

`js
module.exports = [
{
name: 'plugin-name',
plugin: function (className, mappings) {
// do something with atomizer
// return null in case you want to skip this plugin
return newClassName;
},
},
];
``