cuth / postcss-pxtorem

Convert pixel units to rem (root em) units using PostCSS
MIT License
2.02k stars 174 forks source link

some errors when px converts to rem #87

Open spring011 opened 1 year ago

spring011 commented 1 year ago

Configure rootValue by function, There are some errors that px converts to rem. I use development environment:postcss-pxtotem v6.0.0, vite2.0+, vue3. At the same time,I use vue3 component library vant3.0+。to match the Vant style,I do as follow in file postcss.config.js:

const path = require('path');
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('node_modules' + path.sep + 'vant') !== -1 ? 37.5 : 75;
      },
      // rootValue: 75,
      propList: ['*'],
      selectBlackList: ['.norem'],
    },
  },
};

Access the page in the browser,that is no problem. As shown in the figure below,browser got a index.6f88061b.css file that dose not refer to Vant component library。index.6f88061b.css file is about page logic and when make px converts to rem in this file the calculator uses rootValue 75. example, height of .top_tileclass is 2.8rem.Everything is all right. ok

however, somtimes there are some errors when I access page browser.The page content becomes larger resulting in out-of-browser size.and browser got another css file named index.82969300.css not index.6f88061b.css. height of .top_tile class becomes twice the height.now the height is 5.6rem. error

yuningjiang123 commented 1 year ago

Maybe you could add 'console.log(file)' inside the rootValue function to see the file path when error occurs ~

spring011 commented 1 year ago

Maybe you could add 'console.log(file)' inside the rootValue function to see the file path when error occurs ~

when use console.log, the print is no problem.

hemengke1997 commented 1 year ago

try https://github.com/hemengke1997/postcss-pxtorem

1007875327 commented 1 year ago

I have the same problem. Have you solved it now?

hemengke1997 commented 1 year ago

I have the same problem. Have you solved it now?

I did

1007875327 commented 1 year ago

I solved this problem by reducing the version to 5.1.1

jiadesen commented 1 year ago

@hemengke1997 具体是什么原因导致的这个问题呢?

hemengke1997 commented 1 year ago

@hemengke1997 具体是什么原因导致的这个问题呢?

这个库的hook调用有点儿问题,你可以试试我fork的库:https://github.com/hemengke1997/postcss-pxtorem

mayuxian commented 1 year ago

You can just downgrade to v5.1.1 and it'll be fine

chenxch commented 10 months ago

My scenario is converting px to rem, and sometimes it will be converted to rem under v6.0.0, and sometimes px will not be converted. Currently, the conversion output of v5.1.1 is very stable.