Openlibrary: Move all vendor prefix usages into mixins

[jdlrobson]

Description

What problem are we solving? What does the experience look like today? What are the symptoms?

In preparation for auto-prefixing/removing vendor prefixes and making our rules consistent we should move all vendor prefixes into mixins defined inside static/css/less/mixins.less

Expectation

We know it's done when a search for the following yields one result (+ any lib usages):

ag "\-webkit-" static/css/
ag "\-moz-" static/css/
ag "\-ms-" static/css/

DO NOT touch the files inside the lib folder. These are from vendors and we shouldn't tamper with them.

Here is an example:

div.siteSearch {
    -ms-flex-order: 3;
    order: 3;

}

becomes:

div.siteSearch {
  .flex-order();
}

Stakeholders
@jdlrobson

[ShreyashApp]

Hi,
I would like to work on this, if no on else is doing something similar to it.

[ShreyashApp]

Hi,
Which all files should I make changes too. Or is to all of them? Is there any documentation that I could read to get a better understanding of the files and the changes to be made.

[jdlrobson]

All files! I recommend doing this over several patches doing one mixin at a
time.

On Thu, Mar 21, 2019, 9:42 AM ShreyashApp [e-mail] wrote:

Hi,
Which all files should I make changes too. Or is to all of them?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/internetarchive/openlibrary/issues/1995#issuecomment-475308977,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAJFEEgZ-wqUglSxJsIBv_PjzBJ0qLmEks5vY7ZygaJpZM4b9qQK
.

[ShreyashApp]

Hey, I am the working on this. I have made the necessary changes but there is no way to find out if the are being call on to all the implementations. As many of the css isn't even being used by templates. If you have any suggestions please let me know.

[cdrini]

Are there plugins we can use to make Less or webpack do this automatically?

[xayhewalo]

@shreyansh23 Where is the code you were working on? A search for mixin in the PRs didn't find anything. Is it on your local fork?

[tabshaikh]

@jdlrobson Cant, we use autoprefix plugin to prefix the properties in Less v2 https://github.com/less/less-plugin-autoprefix

[jdlrobson]

Yes we can, but we should review the existing css rules we havea and get them using mixins as an intermediate step. code will look a little messy and confusing if we have vendor prefixes in source code too, right?