djsun-postcss-px2rem-plugin 1.0.3

package/__tests__/index.js

@@ -0,0 +1,27 @@
+// test.js
+const postcss = require('postcss')
+const myPlugin = require('./index.js') // 引入自己的插件
+
+// 待测试的CSS代码
+const testCss = `
+body {
+  color: red;
+  font-size: 16px;
+  margin: 20px 0;
+}
+.box {
+  color: blue;
+  width: 320px;
+}
+`
+
+// 执行插件处理
+postcss([myPlugin({ rootValue: 16 })]) // 传入插件配置
+  .process(testCss, { from: undefined })
+  .then(result => {
+    console.log('处理后的CSS：\n', result.css)
+    // 打印错误信息（如有）
+    if (result.warnings().length) {
+      result.warnings().forEach(warn => console.warn(warn.toString()))
+    }
+  })

package/index.js

@@ -0,0 +1,19 @@
+// index.js 完整插件示例：可配置的 px 转 rem 插件
+module.exports = (options = {}) => {
+  // 配置项默认值
+  const defaultOptions = { rootValue: 16, unitPrecision: 2 }
+  const opts = { ...defaultOptions, ...options }
+
+  return {
+    postcssPlugin: 'djsun-postcss-px2rem-plugin',
+    Declaration(decl) {
+      // 业务逻辑：匹配 px 单位，转换为 rem
+      if (decl.value.includes('px') && !decl.value.includes('rem')) {
+        decl.value = decl.value.replace(/(\d+)px/g, (_, num) => {
+          return (num / opts.rootValue).toFixed(opts.unitPrecision) + 'rem'
+        })
+      }
+    }
+  }
+}
+module.exports.postcss = true

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "djsun-postcss-px2rem-plugin",
+  "version": "1.0.3",
+  "description": "这是我的第一个PostCSS自定义插件，用于单位转换功能",
+  "main": "index.js",
+  "keywords": [
+    "postcss",
+    "postcss-plugin",
+    "css",
+    "px2rem"
+  ],
+  "author": "djsun",
+  "license": "MIT",
+  "peerDependencies": {
+    "postcss": "^8.0.0"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

package/readme.md

@@ -0,0 +1,25 @@
+# postcss自定义插件
+
+
+
+# djsun-postcss-px2rem-plugin
+一个自定义的PostCSS插件
+## 功能
+  单位转化功能 px=>rem
+## 安装
+
+```bash
+npm install djsun-postcss-px2rem-plugin --save-dev
+
+## 使用
+在 postcss.config.js 中配置：
+
+```javascript
+module.exports = {
+  plugins: [
+    require('djsun-postcss-px2rem-plugin')({
+      rootValue: 16, // 配置项1
+      unitPrecision: 2 // 配置项2
+    })
+  ]
+}