styled2tailwind

<div align="center"> <h1>Styled2Tailwind 🌀</h1> <p>使用这个便捷的代码转换工具，将你的Styled-Components转换为TailwindCSS。</p> <br />

</div> <div align="center"> <a href="https://www.npmjs.com/package/styled2tailwind"><img alt="npm版本徽章" src="https://img.shields.io/npm/v/styled2tailwind"></a> <img alt="npm包大小" src="https://img.shields.io/bundlephobia/min/styled2tailwind"> <img alt="许可证徽章" src="https://img.shields.io/npm/l/styled2tailwind"> <img alt="GitHub工作流状态（带事件）" src="https://img.shields.io/github/actions/workflow/status/blazity/styled2tailwind/build-and-test-runner"> </div>

🌟 动机

随着Next.js引入新的App Directory路由，它同时也引入了对服务器和客户端组件的支持。由于styled-components严重依赖JS运行时，它与服务器组件不太兼容。相比之下，Tailwind可以完美融入并表现出色！

我们也喜欢Tailwind，我们相信它能提升开发过程，使之更快速，并提供更优秀的开发者体验。

🚀 开始使用

1. 首先给这个仓库点个星！⭐
2. 输入以下命令进入CLI世界：

$ npx styled2tailwind --help

🤔 工作原理

我们的机制分为四个不同的步骤：

1. 原始输入：我们从原始React组件开始（确保它包含一些styled components）。
2. JavaScript AST：使用Babel将组件转换为JavaScript AST。
3. 从AST到CSS：从AST中提取所有TemplateLiterals数据并将其转换为CSS。
4. Tailwind转换：最后一步是将这个CSS转换为TailwindCSS格式。

flowchart LR
  RSI(原始Styled输入) --> JSAST(JavaScript AST)
  JSAST --> RCSS(原始CSS)
  RCSS --> TW(Tailwind CSS)

📋 命令概览

命令	描述
styled2tailwind --help	显示帮助命令。
styled2tailwind "src/*.jsx"	解析src目录下的所有.jsx文件（支持正则表达式）。
styled2tailwind "src/*.jsx" --no-replace	不替换styled components，而是将tailwind输出附加到文件末尾。
styled2tailwind "src/*.jsx" --no-conflicts	强制在标记中用tailwind替换styled components，不使用git冲突。

⚠️ 限制

该项目仍处于早期测试阶段，我们已经发现了一些限制，并将在不久的将来发布修复！

• 多行组件：当一个组件被包裹在多行中时，CLI可能会表现异常。
• 动态React属性：处理动态React属性（尤其是函数）仍然具有挑战性。

🤝 贡献

我们随时欢迎贡献！要贡献，请遵循以下步骤：

1. Fork这个仓库。
2. 创建一个具有描述性名称的新分支。
3. 进行更改，并使用Conventional Commits格式提交它们。
4. 将更改推送到fork的仓库。
5. 创建一个拉取请求，我们将审查您的更改。

📡 社区

如果你正在寻求帮助或只是想分享你对项目的想法，我们鼓励你加入我们的Discord社区。这是链接：https://blazity.com/discord。这是一个我们交流想法和互相帮助的空间。我们欢迎每个人的意见，期待欢迎你的加入。

<br /> <a href="https://blazity.com/discord" style="width: 100%; display: flex; justify-content: center;"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/e39712ec-25b0-4f4b-a82d-682819a5348c.png?style=banner2" alt="Blazity Discord 横幅"/> </a> <br />

📜 许可证

该项目采用MIT许可证。有关更多信息，请参阅LICENSE文件。