postcss-px-conversion: 为什么我重写了postcss-px-to-viewport

直接体验新插件

迫不及待想要尝试新插件？跳过阅读，直接前往 kirklin/postcss-px-conversion 获取 postcss-px-conversion 并开始使用！让你的开发工作更加高效。

背景：一个被遗弃的项目

postcss-px-to-viewport 是一个广受欢迎的 PostCSS 插件，用于将 px 单位转换为 vw 单位，在响应式设计中发挥着重要作用。然而，随着时间的推移，这个项目逐渐陷入了停滞状态：

1. 大量的 issues 没有得到解决
2. 众多的 Pull Requests 无人审核
3. 最新版本的 PostCSS 已不再兼容

作为该插件的频繁使用者，我们深切地感受到了这些问题带来的困扰。每次在项目中使用时，都需要自己修复一些 bug，或者忍受某些功能的缺失。这种情况不仅影响了我们的开发效率，也让许多其他开发者感到沮丧。

决定：重写而非fork

面对这样的情况，我开始犹豫要不要重新造轮子：是继续使用并修补这个日渐老化的插件，还是另辟蹊径？经过深思熟虑，我决定重写这个插件，主要基于以下考虑：

1. 技术栈更新：使用 TypeScript 重写可以带来更好的类型安全性和开发体验。
2. 现代化：重写允许我们在架构上做出改进，使其更符合现代 JavaScript 的实践。
3. 社区需求：重写给了我们一个机会，可以一次性解决积压已久的问题和功能请求。
4. 维护性：全新的代码库更容易维护和扩展，为未来的发展奠定基础。

重写过程：挑战与收获

重写的过程并非一帆风顺。我们面临了诸多挑战，但这个过程也带来了意想不到的收获。通过重写，我们不仅深入理解了 PostCSS 的工作原理，还重新认识了开源项目维护的重要性。

新生：postcss-px-conversion

经过数周的努力，我们终于完成了重写工作，新插件命名为 postcss-px-conversion。这个新版本不仅解决了原插件的诸多问题，还带来了一些令人兴奋的新特性：

1. 兼容性更新

首先，我们解决了与最新版PostCSS的兼容性问题。这确保了插件可以在现代构建流程中无缝运行。

2.使用 TypeScript 重写，提供了更好的类型支持

3. Vite支持

随着Vite 变成日益流行的构建工具，我们增加了对Vite的原生支持。现在，Vite用户可以轻松地将这个插件集成到他们的项目中。

4. 动画关键帧支持

我们修复了一个长期存在的问题：在keyframes中的px值现在可以正确转换了。这对于创建流畅的响应式动画至关重要。

@keyframes move {
  0% { transform: translateX(0px); }
  100% { transform: translateX(100px); }
}

现在，上面的代码将会被正确转换，保证了动画在不同设备上的一致性。

5. Per-File配置

这是一个激动人心的新特性。现在，你可以在多个css文件中指定不同的viewport width：

/* viewport-width: 1920 */
.hero-section {
  width: 1600px; /* 将被转换为 83.33333vw */
}

如何使用

1. 首先，安装插件：

npm install postcss-px-conversion --save-dev

1. 在你的PostCSS配置文件中添加插件：

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-conversion': {
      viewportWidth: 375,
      enablePerFileConfig: true,
      // 其他配置...
    }
  }
}

1. 开始使用！你的px单位将自动转换为vw单位。

结论

postcss-px-conversion 不仅是对原有插件的一次升级，更是一次全新的开始。我们解决了原插件的痛点，引入了现代化的特性和改进，使得响应式设计变得更加轻松和高效。

立即体验

为什么还在犹豫？立即前往 GitHub 项目页面 下载并安装 postcss-px-conversion，亲自体验这些令人激动的新特性。你的开发工作将变得更加高效，响应式设计从未如此简单。

我们热切期待你的反馈和建议。通过你的参与和支持，我们可以一起让这个工具变得更好，共同推动 Web 开发社区的进步。

行动起来，体验 postcss-px-conversion 带来的便利和创新，让你的项目焕发新生！