Wildcard propList not working

[dnwhte]

I cannot seem to get the wildcard propList to work

[cuth]

How are you using it? Could you provide your options and CSS?

[henrikwirth]

Same Problem here:

  minify: false,
  use: ['postcss-pxtorem', 'postcss-mixins', 'postcss-nested', 'postcss-for', 'postcss-calc'],
  stylelint: lint,
  autoprefixer: {
    browsers: ['ie >= 10', 'ie_mob >= 10', 'ff >= 30', 'chrome >= 34', 'safari >= 7', 'opera >= 23', 'ios >= 7', 'android >= 4.4', 'bb >= 10'],
    cascade: true
  },
  postcss: {
    map: true
  },
  pxtorem: {
    rootValue: 16,
    unitPrecision: 5,
    propList: ['*'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0
  }
};```

Only default options are converted.

[cuth]

@henrikwirth, what version do you have installed?

[dnwhte]

I was having the issue with the gulp version (https://github.com/cuth/gulp-pxtorem). Issue was not present when I switched to the postcss version.

[mikemak-es]

I am using version "postcss-pxtorem": "^3.3.1" and i'm having the same issue.

In fact, when i try putting just margin or padding in the array, they don't convert either.

"mediaQuery": false,
"propList": [
    "*"
],
"replace": false,
"rootValue": 18,
"selectorBlackList": [
    /^body$/,
    /^html$/
]

[henrikwirth]

@cuth "postcss-pxtorem": "^4.0.1"

[cuth]

@michaelhwinter you'll need to use propWhiteList instead of propList. Here is the README for 3.3.1.

@henrikwirth Do you need to set the settings with 'postcss-pxtorem' instead of pxtorem?

[mikemak-es]

@cuth i tried that too, but it didn't change the result, still px where rems should be

[cuth]

Here are my tests for wildcards:

  it("should only replace properties in the prop list", function() {
    var css =
      ".rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }";
    var expected =
      ".rule { font-size: 1rem; margin: 1rem; margin-left: 5px; padding: 5px; padding-right: 1rem }";
    var options = {
      propWhiteList: ["*font*", "margin*", "!margin-left", "*-right", "pad"]
    };
    var processed = postcss(pxtorem(options)).process(css).css;

    expect(processed).toBe(expected);
  });

  it("should only replace properties in the prop list with wildcard", function() {
    var css =
      ".rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }";
    var expected =
      ".rule { font-size: 16px; margin: 1rem; margin-left: 5px; padding: 5px; padding-right: 16px }";
    var options = {
      propWhiteList: ["*", "!margin-left", "!*padding*", "!font*"]
    };
    var processed = postcss(pxtorem(options)).process(css).css;

    expect(processed).toBe(expected);
  });

Can you provide a test that breaks?