CSS modules compatibility

[BurkovBA]

Hi, Ken!

I'm trying to create an embeddable component for RNAcentral sequence search to be plugged-in into member databases websites.

I want the component to be styled in EBI theme 1.3, but at the same time I don't want it to break the host websites.

I was trying to use CSS modules and Webpack to import styles from your CSS files of ebi-global.css and theme-light.css and it would've worked just fine, but unfortunately your css files also contain global style definitions, such as h1 etc. They would interfere with the host CSS.

So, I believe, I'll have to go with shadow DOM.

I'm wondering: did you consider making EBI Framework compatible with CSS modules? Maybe, splitting the SASS styles into global and local ones?

Thanks,
Boris

[khawkins98]

Hi Boris.

Good timing! I'll be at EBI Day (Thursday the 13th; poster 15) talking about how we're addressing this.

It's (obviously) a major change and one that is at the heart of the next version of the Visual Framework.

We should have a couple of specific demos available for Thursday too.

[BurkovBA]

Hi Ken! Great to find out! Unfortunately, I won't be able to attend your talk, as I moved to Moscow to work on ML/AI. I recently had to create an embed for RNAcentral sequence search for a friendly resource. Tried using EBI-Framework 1.3 as CSS modules, but it bleeds some global styles unfortunately. So I had to wrap my React code into a Web Component with a few lines of shadow DOM creation. Unfortunately, it has some issues with arguments passing (only strings are allowed) and I haven't managed to make Webpack correctly render and import EBI Icon Fonts. But other than that it works: https://github.com/rnacentral/rnacentral-sequence-search-embed. Good luck at the EBI day, Boris.