fornac.css is too generic and messes up other d3 or svg on your site

[BurkovBA]

Hi, Peter, thanks for your forna library, we're trying to use it in the new http://RNAcentral.org release.

We're having an issue with your css though. Unfortunately, fornac.css file uses too generic selectors, such as svg or .d3-tip: https://github.com/pkerpedjiev/fornac/blob/master/app/styles/fornac.css.

They are messing with other d3-generated content on our pages, in particular making links un-clickable due to pointer-events: None;.

This css is being bundled by webpack+babel into your https://github.com/pkerpedjiev/fornac/blob/master/dist/scripts/fornac.js as inline code, which is very unfortunate.

What would you suggest to overcome this issue? I believe, those styles should be applied only to FornaContainer(element) dom element.

Should I re-write those declarative css statements into imperative javascript, adding css properties dynamically during FornaContainer initialization, and submit you a pull request? That's the most reproducible solution, I came up with so far. Would you suggest anything better?

Thank you, Boris Burkov.

[pkerpedjiev]

Hi Boris, I'm very happy to hear that you're looking to use the forna library in RNAcentral!

Styling is still one of the things that annoys me most in writing javascript code. I don't have any definitive solution. You could add the styles dynamically in the javascript. Another option is to use something like css-modules (https://github.com/css-modules/css-modules). In any case, whatever you do will probably be better than what we have at the moment so I'll happily accept a pull request.

On 11/2/17 4:56 AM, Boris Burkov wrote:

Hi, Peter, thanks for your forna library, we're trying to use it in the new http://RNAcentral.org release.

We're having an issue with your css though. Unfortunately, |fornac.css| file uses too generic selectors, such as |svg| or |.d3-tip|: https://github.com/pkerpedjiev/fornac/blob/master/app/styles/fornac.css.

They are messing with other d3-generated content on our pages, in particular making links un-clickable due to |pointer-events: None;|.

This css is being bundled by webpack+babel into your https://github.com/pkerpedjiev/fornac/blob/master/dist/scripts/fornac.js as inline code, which is very unfortunate.

What would you suggest to overcome this issue? I believe, those styles should be applied only to |FornaContainer(element)| dom |element|.

Should I re-write those declarative css statements into imperative javascript, adding css properties dynamically during FornaContainer initialization, and submit you a pull request? That's the most reproducible solution, I came up with so far. Would you suggest anything better?

Thank you, Boris Burkov.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/pkerpedjiev/fornac/issues/11, or mute the thread https://github.com/notifications/unsubscribe-auth/ACC1jQiqLH3lqlaYmTUWtQkzjHnw4euNks5syZ_2gaJpZM4QPgGW.

[j-4]

Hi, i would love to keep the fornac style as webpack import, it makes development much easier. However, I will use a local scope (https://github.com/css-modules/css-modules) which is easily possible in (https://github.com/webpack-contrib/css-loader). I think, this will solve your problems, right?

[BurkovBA]

@j-4 Bundling css with css-modules import mode with webpack is a good idea to me and I'm planning to use this approach for building RNAcentral search plugin (work in progress yet: https://github.com/rnacentral/rnacentral-sequence-search-embed).

It is SVG CSS, though, it's a bit different from normal HTML CSS, so we might need svg-css-modules-loader.

[j-4]

Thanks for the hint with svg-css-modules-loader! will look into that :-)

[j-4]

There was no need to use svg-css-modules-loader on my side. fornac css classes are now prefixed with forna-, many classes are removed or merged and thus no global css except for the d3-context-menu styles are in forna.css any more. I will continue to remove more and more styling from the javascript code and move it to the css.

Hope this fixes your issues! Feel free to report any newly occurring things in a new bugreport!