Created
March 19, 2024 10:57
-
-
Save arsenipachkovski/44ec1b62ee94a31266cb0186996dc520 to your computer and use it in GitHub Desktop.
Simple script to add prefix to existing tailwind classes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const fs = require("fs"); | |
| const path = require("path"); | |
| const glob = require("glob"); | |
| const PREFIX = "tw-"; | |
| const rootDir = "./src"; | |
| function replaceClassNames(classNamesString) { | |
| const classNames = classNamesString.split(" "); | |
| return classNames | |
| .map((className) => { | |
| const values = className.split(":"); | |
| const modifiers = values.length > 1 ? values.slice(0, values.length - 1) : []; | |
| const value = values[values.length - 1]; | |
| const isNegative = value.startsWith("-"); | |
| if (value.includes(PREFIX)) { | |
| return className; | |
| } | |
| return [ | |
| modifiers.length ? modifiers.join(":") + ":" : null, | |
| isNegative ? "-" : "", | |
| PREFIX, | |
| isNegative ? value.slice(1) : value, | |
| ] | |
| .filter((value) => !!value) | |
| .join(""); | |
| }) | |
| .join(" "); | |
| } | |
| glob("**/*.{js,jsx,ts,tsx,vue,css}", { cwd: rootDir }, (er, files) => { | |
| files.forEach((file) => { | |
| const filePath = path.join(rootDir, file); | |
| fs.readFile(filePath, "utf-8", (err, data) => { | |
| if (err) { | |
| console.error(err); | |
| return; | |
| } | |
| const result = data | |
| // Classes | |
| .replace(/class=["']([."'\w\s\/:\[\]-]+)["']/g, (match, p1) => { | |
| return `class="${replaceClassNames(p1)}"`; | |
| }) | |
| // @apply directives | |
| .replace(/@apply ([."'\w\s\/:\[\]-]+)/g, (match, p1) => { | |
| return `@apply ${replaceClassNames(p1)}`; | |
| }) | |
| // Conditionals | |
| // TODO: Handle multi-line conditionals | |
| .replace(/:class="(.*\?\s)["'](.*)["'](.*:\s)["'](.*)["']"/g, (match, p1, p2, p3, p4) => { | |
| return `:class="${p1}'${replaceClassNames(p2)}'${p3}'${replaceClassNames(p4)}'"`; | |
| }) | |
| .replace(/:class="(.*&&\s)["'](.*)["']"/g, (match, p1, p2) => { | |
| return `:class="${p1}'${replaceClassNames(p2)}'"`; | |
| }); | |
| fs.writeFile(filePath, result, "utf-8", (err) => { | |
| if (err) console.error(err); | |
| }); | |
| }); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment