search

ebiwd / EBI-Framework

The EMBL-EBI Visual Framework for websites and services.
https://www.ebi.ac.uk/style-lab/websites/
19 stars 16 forks source link

CSS modules compatibility #147

Open BurkovBA opened 5 years ago

BurkovBA commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.