feat: Support custom convert px unit (#105)

* feat: Support custom convert px unit

* chore: revert format

---------

Co-authored-by: tingzhao.ytz <tingzhao.ytz@antgroup.com>

Author: yutingzhao1991

README.md

@@ -96,6 +96,7 @@ Default:
     - If value is function, you can use exclude function to return a true and the file will be ignored.
         - the callback will pass the file path as  a parameter, it should returns a Boolean result.
         - `function (file) { return file.indexOf('exclude') !== -1; }`
+- `unit` (String) Set the default unit to convert, default is `px`.
 
 ### Use with gulp-postcss and autoprefixer
 

index.js

@@ -10,7 +10,8 @@ const defaults = {
   replace: true,
   mediaQuery: false,
   minPixelValue: 0,
-  exclude: null
+  exclude: null,
+  unit: "px",
 };
 
 const legacyOptions = {
@@ -19,7 +20,7 @@ const legacyOptions = {
   selector_black_list: "selectorBlackList",
   prop_white_list: "propList",
   media_query: "mediaQuery",
-  propWhiteList: "propList"
+  propWhiteList: "propList",
 };
 
 function convertLegacyOptions(options) {
@@ -35,7 +36,7 @@ function convertLegacyOptions(options) {
     delete options["prop_white_list"];
     delete options.propWhiteList;
   }
-  Object.keys(legacyOptions).forEach(key => {
+  Object.keys(legacyOptions).forEach((key) => {
     if (Reflect.has(options, key)) {
       options[legacyOptions[key]] = options[key];
       delete options[key];
@@ -60,12 +61,12 @@ function toFixed(number, precision) {
 }
 
 function declarationExists(decls, prop, value) {
-  return decls.some(decl => decl.prop === prop && decl.value === value);
+  return decls.some((decl) => decl.prop === prop && decl.value === value);
 }
 
 function blacklistedSelector(blacklist, selector) {
   if (typeof selector !== "string") return;
-  return blacklist.some(regex => {
+  return blacklist.some((regex) => {
     if (typeof regex === "string") {
       return selector.indexOf(regex) !== -1;
     }
@@ -84,31 +85,31 @@ function createPropListMatcher(propList) {
     notExact: filterPropList.notExact(propList),
     notContain: filterPropList.notContain(propList),
     notStartWith: filterPropList.notStartWith(propList),
-    notEndWith: filterPropList.notEndWith(propList)
+    notEndWith: filterPropList.notEndWith(propList),
   };
-  return prop => {
+  return (prop) => {
     if (matchAll) return true;
     return (
       (hasWild ||
         lists.exact.indexOf(prop) > -1 ||
-        lists.contain.some(function(m) {
+        lists.contain.some(function (m) {
           return prop.indexOf(m) > -1;
         }) ||
-        lists.startWith.some(function(m) {
+        lists.startWith.some(function (m) {
           return prop.indexOf(m) === 0;
         }) ||
-        lists.endWith.some(function(m) {
+        lists.endWith.some(function (m) {
           return prop.indexOf(m) === prop.length - m.length;
         })) &&
       !(
         lists.notExact.indexOf(prop) > -1 ||
-        lists.notContain.some(function(m) {
+        lists.notContain.some(function (m) {
           return prop.indexOf(m) > -1;
         }) ||
-        lists.notStartWith.some(function(m) {
+        lists.notStartWith.some(function (m) {
           return prop.indexOf(m) === 0;
         }) ||
-        lists.notEndWith.some(function(m) {
+        lists.notEndWith.some(function (m) {
           return prop.indexOf(m) === prop.length - m.length;
         })
       )
@@ -145,20 +146,20 @@ module.exports = (options = {}) => {
       pxReplace = createPxReplace(
         rootValue,
         opts.unitPrecision,
-        opts.minPixelValue
+        opts.minPixelValue,
       );
     },
     Declaration(decl) {
       if (isExcludeFile) return;
 
       if (
-        decl.value.indexOf("px") === -1 ||
+        decl.value.indexOf(opts.unit) === -1 ||
         !satisfyPropList(decl.prop) ||
         blacklistedSelector(opts.selectorBlackList, decl.parent.selector)
       )
         return;
 
-      const value = decl.value.replace(pxRegex, pxReplace);
+      const value = decl.value.replace(pxRegex(opts.unit), pxReplace);
 
       // if rem unit already exists, do not add or replace
       if (declarationExists(decl.parent, decl.prop, value)) return;
@@ -173,10 +174,10 @@ module.exports = (options = {}) => {
       if (isExcludeFile) return;
 
       if (opts.mediaQuery && atRule.name === "media") {
-        if (atRule.params.indexOf("px") === -1) return;
-        atRule.params = atRule.params.replace(pxRegex, pxReplace);
+        if (atRule.params.indexOf(opts.unit) === -1) return;
+        atRule.params = atRule.params.replace(pxRegex(opts.unit), pxReplace);
       }
-    }
+    },
   };
 };
 module.exports.postcss = true;

lib/pixel-unit-regex.js

@@ -6,4 +6,8 @@
 // Any digit followed by px
 // !singlequotes|!doublequotes|!url()|pixelunit
 
-module.exports = /"[^"]+"|'[^']+'|url\([^)]+\)|var\([^)]+\)|(\d*\.?\d+)px/g;
+module.exports = (unit) =>
+  new RegExp(
+    `"[^"]+"|'[^']+'|url\\([^)]+\\)|var\\([^)]+\\)|(\\d*\\.?\\d+)${unit}`,
+    'g',
+  );

spec/pxtorem-spec.js

@@ -540,4 +540,18 @@ describe("exclude", function() {
     }).css;
     expect(processed).toBe(basicCSS);
   });
+
+  it("should only replace properties in the prop list with wildcard", function() {
+    var input =
+      "h1 { margin: 0 0 20rpx; font-size: 32rpx; line-height: 1.2; letter-spacing: 1rpx; width: 30px;}";
+    var output =
+      "h1 { margin: 0 0 1.25rem; font-size: 2rem; line-height: 1.2; letter-spacing: 0.0625rem; width: 30px;}";
+    var options = {
+      unit: "rpx",
+      propList: ["*"]
+    };
+    var processed = postcss(pxtorem(options)).process(input).css;
+
+    expect(processed).toBe(output);
+  });
 });