Autoprefixer does not seem to work

[bitmensch]

Environment

vue-design-system v3.5.5

How to reproduce

In a style block of a vue file add the following CSS rule:

.autoprefixertest {
  user-select: none;
}

Run dev mode via e.g. yarn run start.

Actual output

The generated CSS that can be inspected in the browser is the same as provided.

Expected output

The generated CSS should look like:

.autoprefixertest {
    -ms-user-select: none;
        user-select: none;
}

when using the browserslist that comes by default with vue-design-system as in package.json:

...
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not Explorer > 0",
    "IE 11",
    "not ExplorerMobile > 0",
    "not BlackBerry > 0",
    "not OperaMini all",
    "not OperaMobile > 0"
  ]

I double checked that the expected output is correct by using https://autoprefixer.github.io/, using filter "IE 11" there (which is also present in the default provided browserslist).

[bitmensch]

Just tried to use #127 (branch feat-cli-plugin). When I include the following in the package.json file there, autoprefixer seems to work fine:

...
  "postcss": {
    "plugins": {
      "autoprefixer": true
    }
  },
...

[bitmensch]

I haven't been able to try out if the solution from the previous comment also works with vue-design-system v3.5.5, as I currently cannot do a fresh working install due to some broken third-party dependency.

[arielsalminen]

@benjixx Thanks for reporting. I will test if it fails for me too and provide a fix if so :)

[bitmensch]

@viljamis This would be awesome and much appreciated. It is currently blocking me from producing CSS that works on IE11. Unfortunately, I'm not too deep into the whole build pipeline, so I haven't figured out yet out to make this work with the master branch.

[bitmensch]

Looks like I found the root cause of the problem. postcss-loader is currently not used in the context of the Design System Docs, for the App context it's working. Going to provide a PR soon.

[arielsalminen]

@benjixx Good catch. I’ve merged your PR in now and will do a new release soon.

[bitmensch]

@viljamis Awesome! Keep up the great work. This project is really amazing and a great helper.