Incompatibility with other libraries

[WilliamSoler]

I am currently using BeerCSS in one project but I came across an issue when I wanted to use another library for rendering maps.

The labels when hovering over the maps were not showing. I end up tracking the issue to the BeerCSS CSS file. Specifically in the following block:

* {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  vertical-align: middle;
  color: inherit;
  margin: 0;
  padding: 0;
  border-radius: inherit;
  box-sizing: border-box;
}

on code

Is there any other option than to apply this styling to all elements? This makes it difficult to work with BeerCSS and other libraries because it causes incompatibilities that are difficult to override especially if the HTML is created dynamically with JS

What workaround would be the best to enable this styling for BeerCSS-styled HTML elements?

[leonardorafael]

Hi @WilliamSoler,

The project of Beer CSS doesn't delivery any guarantee that using another UI lib will work, because it styles directly HTML semantic tags. I would to suggest to use the map on different context like iframe or try to style as all: revert:

<iframe src="/map"></iframe>

<div style="all: revert">
  <div id="map"></div>
</div>

Using all: revert will revert to default styles from browser. In theory, all child element must work as expected. Maybe we can create a helper called "revert" or "revert-all" to do that.

[Hadoukanen]

It collides a bit with Monaco editor as well with the [class*=margin] thing. But i made a WebComponent with a ShadowDom for it. So that is a way to solve it as well.