search

songsiqi / px2rem-postcss

Postcss version of px2rem.
270 stars 49 forks source link

px is converted to em when using with postcss-next #8

Open crossjs opened 7 years ago

crossjs commented 7 years ago

following:

.c-checkbox {
  height: 48px; /*px*/
  &.checked {
    transform: translate3d(32px, 0, 0); /*px*/
  }
}

will be converted to:

.c-checkbox {
  height: 0.64rem ;
}

.c-checkbox.checked {
  -webkit-transform: translate3d(0.426667rem, 0, 0);
  transform: translate3d(0.426667rem, 0, 0) ;
}

and that is NOT expected

songsiqi commented 6 years ago

Please provide your postcss config.

facesea commented 6 years ago

我有相同的问题，原因是因为postcss里配置多个插件时，会多次调用px2rem,第一次调用px2rem时会删除/*no*/,后面再调用px2rem就检测不到/*no*/,暂时解决方案是注释掉px2rem.js的129行：

line128  } else if (nextDeclaration.comment.trim() === config.keepComment) { // no transform
line129     // declarations.splice(j + 1, 1); // delete corresponding comment
line130  } else {

若有更优雅的解决方案请告知，谢谢~ @songsiqi @crossjs

crossjs commented 6 years ago

@facesea 我的方案是不用这个工具，自己写了个 https://github.com/crossjs/postcss-flexible

使用 rem()，dpr() 等方法，虽然侵入性强了点，但适配更好，比如一行有多个需要转换的情况。

wanguohong commented 6 years ago

@facesea 解决了困扰半天的问题。