Atomizer Tailwindcss Migrator

CLI tool to refactor atomizer codebases to tailwindcss

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

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

yarn

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

pnpm

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

Usage

for help

tw-mg -h

Lets say we have our atomizer css class at path src/styles/main.css and we want to transform all components under src/components/atoms/

tw-mg -s src/styles/main.css -t "src/components/atoms/*.js"

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

tw-mg -s src/styles/main.css -t "src/components/atoms/*.js" --dry-run

If you want to replace atomizer variables name with other names in tailwind you can pass json file with mapping from atomic var to tailwind var

Eg: mappings.json

{
  "fzTitle": "title",
  "$someLongCamelCase": "short-snake-case"
}

it will replace var fzTitle with title and so on.

tw-mg -s src/styles/main.css -t "src/components/atoms/*.js" -m 'mappings.json' -d

If you do not want to open the report by default

tw-mg -s src/styles/main.css -t "src/components/atoms/*.js" -d -no

after running these a transform-report.html will be generated and opened in browser which will contain all the details.

Loading Plugins

You can load plugins by passing -p or --plugins flag

tw-mg -s src/styles/main.css -t "src/components/atoms/*.js" -p "plugin.js"

Writing Plugins

Plugin file must export an array of plugins which will be loaded by the migrator.

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