cuth / postcss-pxtorem

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

problem in vite: isExcludeFile may not be correctly set #85

Open dora-lemon opened 1 year ago

dora-lemon commented 1 year ago

Part of my vite.config.js:

import postCssPxToRem from 'postcss-pxtorem'
{
  ...,
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 16,
          propList: ['*'],
          exclude: function (file) { return file.indexOf('Register') === -1; },
        }),
        {
          postcssPlugin: 'internal:charset-removal',
          AtRule: {
            charset: (atRule) => {
              if (atRule.name === 'charset') {
                atRule.remove();
              }
            }
          }
        },
      ]
    }
  }
}

Once and Declaration callback execution order can be like this:

filePath: Register.vue
transforming (652) node_modules\@babel\runtime\helpers\esm\defineProperty.js
filePath: List.vue
transforming (671) node_modules\ant-design-vue\es\_util\warning.js
filePath: Risk.vue
filePath: Verify.vue
filePath: Role.vue
transforming (687) node_modules\ant-design-vue\es\_util\vnode.js
filePath: Detail.vue

Register.vue declaration:
<ref *1> Declaration {
  raws: { before: '\n  ', between: ': ' },
  type: 'decl',
  parent: Rule {
    raws: { before: '\n\n', between: ' ', semicolon: true, after: '\n' },
    type: 'rule',
    nodes: [ [Circular *1], [Declaration], [Declaration], [Declaration] ],
    parent: Root {
      raws: [Object],
      type: 'root',
      nodes: [Array],
      source: [Object],
      lastEach: 2,
      indexes: [Object],
      [Symbol(isClean)]: false,
      [Symbol(my)]: true
    },
    source: { start: [Object], input: [Input], end: [Object] },
    selector: '.pife1-card',
    lastEach: 2,
    indexes: { '2': 1 },
    [Symbol(isClean)]: true,
    [Symbol(my)]: true
  },
...

In my case, i just want to include Register.vue and exclude all other files. However, if Once callback is not directly followed by corresponding Declaration callback, isExcludeFile would be true, it's not as what i expected. I have glanced at all issues, but i didn't got a similar one. I’d appreciate some help.

hemengke1997 commented 1 year ago

any reproduction?

hemengke1997 commented 1 year ago
/^(?!\.pife1-).*/.test('.pife1-card')   // false
dora-lemon commented 1 year ago

any reproduction?

I made a mistake, i have edited my description.

hemengke1997 commented 1 year ago

I tested it, it can achieve what you want

Maybe that you made a small mistake

hemengke1997 commented 1 year ago

If you are still stuck in this situation, you could try my fork repository: https://github.com/hemengke1997/postcss-pxtorem

Use it like:

// postcss.config.js
module.exports = {
  plugins: [
    require('@minko-fe/postcss-pxtorem')({
      rootValue: 16,
      propList: ['*'],
      exclude: function (file) { return !file.includes('Register'); }
    })
  ]
}
woodThunder commented 1 year ago

exclude有的时候正常有的时候不能过滤正常转为了rem,源码打印文件style里面import引入的样式,是拿不到的,请问你是咋解决的