Material-components-web: Getting Started docs are missing autoprefixer, which leads to bugs in e.g. MDC Select

[cubetastic33]

Bugs

What MDC Web Version are you using?

0.35.2

What browser(s) is this bug affecting?

I tested it on Chrome Version 66.0.3359.170 (Official Build) (64-bit), and Firefox Quantum 60.0.1 (64-bit).

Update: Issue remains on Brave, Tor, Epiphany, KHTML engine, Opera

What OS are you using?

Ubuntu 18.04 LTS

What are the steps to reproduce the bug?

I'm using Python Flask, not Node JS, so it's not the same process. I am compiling the sass using koala, and using the unpkg CDN for JavaScript. Here is a codepen: https://codepen.io/cubetastic/pen/ZoPNKK. Maddeningly, it works here, but it doesn't in my code. I've included a screenshot of what happens for me below.

Update:

I also tried this in an EXTREMELY minimal proper Node JS server, with webpack configured. There was just a basic html structure, with just the select menu, and only those 2 lines of JavaScript, and the only CSS was the imports. This is seriously maddenning, there is NOTHING else in here!

Update 2:

After lots of experimenting, I found out why it works in codepen: The unpkg is working, but the budle.css which I get after all the imports is not.

What is the expected behavior?

It should be showing a proper select menu like in the code pen

What is the actual behavior?

I'm getting this:

[Agheb]

+1
It's not overriding default arrows properly. The NPM package is missing some CSS properties, that somehow still exist in the dist/ folder.

So I extended the class:

.mdc-select__native-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Now it works for me in Chrome (vers. 66).

Update

Missing webkit-appearance #2503

It would be nice to mention the use of autoprefixer in the documentation.

[cubetastic33]

@Agheb wow, thank you so much! I thought that the issue was caused because I didn't import some other mdc package which removed the arrow, and imported upto 22 packages, and of course the issue was still there. And, as you said, it would be nice if they mentioned the use of autoprefixer in the documentation... So, are you going to do a Pull Request for adding appearance: none property?

[Agheb]

Actually appearance:none was a mistake, but any vendor-prefixes are missing. This is the reason why you add an autoprefixer in the build chain. I wonder why this step is not mentioned in the getting-started doc.

[cubetastic33]

@Agheb Yes, so, the mdc-select.scss file doesn't have the appearance: none standard property itself, right? So, if that file is edited, then the vendor prefixes will be added automatically, and we'll have no issue with the select component, at least

[Agheb]

Make sure you have the most recent version. It should be there.

[kfranqueiro]

Thanks @cubetastic33 for flagging this and @Agheb for pointing out the issue with our docs. This has come up a few times recently, and it's long overdue for us to track this and address it in the Getting Started docs. I'm going to re-title this to better describe the root issue.

[Agheb]

Thanks @kfranqueiro! I'd like to add instructions for integrating autoprefixer through postcss. Do you accept a PR?

[kfranqueiro]

@Agheb sure! I think that'd be helpful and I'd be happy to review a PR for it.