Support selector prefix for stronger scoping

[treygriffith]

In some cases where a ui-box (in my case via evergreen) lives on a page that has other CSS on it the ui-box styles can be overridden.

With glamor, you can use the plugin system to add a prefix, so a generated style rule like this:

.css-1yiw7zu{
  /* ... */
}

Ends up looking like this:

#my-widget .css-1yiw7zu {
  /* ... */
}

However, setClassNamePrefix in ui-box sets the prefix that is applied to both the stylesheet and the classname property, so if you try to prepend another selector, you end up with something like this:

<style>
#my-widget .ub-mb_auto {
  /* ... */
}
</style>
<!-- ... -->
<div id="my-widget">
  <div classname="#my-widget .ub-mb_auto"></div>
</div>

Which of course does not have the desired effect.

In order to more strongly scope the ui-box rules and avoid them being overwritten, it would be nice to be able to apply a prefix selector to the css styles. A more generic solution would be to allow a plugin to do post-processing on the css rules before insertion, a la glamor.

Is there a way to do this today that I'm not seeing? Is there another recommended approach to avoiding overwrites from aggressive CSS rules elsewhere on the page?

[mshwery]

Interesting use case! Thanks for sharing. I agree that a generic plugin system might provide the flexibility necessary, so long as it doesn't diminish the performance of Box for regular consumers who aren't using plugins. Will take a look at your PR shortly! // cc @akleiner2