Handling (Tailwind) CSS Reset in Bitmovin Web Player

Resources
1

TLDR: Anybody have a general purpose workaround for handling CSS resets other than turning them off?

This question is hopefully a generally meaningful one, but relates to the CSS reset included in most CSS Reset scripts, and specifically to the Tailwind CSS reset.

Their version of the css reset includes this line which makes all of the UI buttons invisible.

[type="button"], [type="reset"], [type="submit"], button {
  -webkit-appearance: button;
  background-color: initial;
  background-image: none;
}

Meaning while I work out how to deal with this, I need to add manual SVG inserts for each of the player’s button elemnts (logo, settings cog, chromecast icon, etc.)

I think as a general purpose drop-in player, the fault here lies with Bitmovin, all of the CSS rules are not namespaced sufficiently to circumvent resets like this which are pretty commonplace. Each icon SVG rule is like:

.bmpui-ui-vrtogglebutton {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2....");
  /* snip */
}

I hoped to maybe try using a drop-in NPM version of theplayer thinking it might be namespaced bitmovin-player - npm but all of the links on the package are 404’d so I’ll not go down that rabbithole.

Not all CSS reset rules are quite so complex, for example Eric Meyer’s original & best doesn’t even mention buttons or inputs, but frameworks aren’t going away any time soon, so perhaps this needs looked at.

TIA

David

2

A very Rails+Tailwind specific workaround for this:

+

Effectively:

  • turn off preflight (their normalise.css process)
  • turn on postcss pre-processing
  • add the preflight.css manually (ergo css file becomes instantly out of date) and modify the rule in question to disable global button bg-image removal
  • turn it off and on again

Thoughts on a less intensive way to deal with this would be welcome! (less is more)

David