Enable Typography.js to take precedence over Bulma framework in Gatsby

KyleAMathews / typography.js

A powerful toolkit for building websites with beautiful design

http://kyleamathews.github.io/typography.js/

MIT License

3.83k stars 181 forks source link

Enable Typography.js to take precedence over Bulma framework in Gatsby #236

Open thunderbiscuit opened 4 years ago

thunderbiscuit commented 4 years ago

When Bulma is used in Gatsby, a lot of the settings from Typography.js are overridden by it. Is there an easy way to ensure that Typography take precedence? Thank you!

advaitju commented 4 years ago

The issue is slightly more nuanced. You can achieve this right now as a work around by using react-helmet and inserting Typography.js's styles manually. However, then it's appended to the end of the <head> tag and it cascades over all generated CSS, including my styles: CSS library (Bulma, bootstrap etc.) + User styles > Typography.js

Ideally the loading order should be CSS library (Bulma, bootstrap etc.) > Typography.js > User styles.

fullofcaffeine commented 4 years ago

I'm having the same problem. Bootstrap's typography is taking precedence over the Typography.js rules. I'm using Gatsby.js and using the gatsby sass plugin to require the sass files from bootstrap (installed a npm). Any workarounds?

fullofcaffeine commented 4 years ago

Oh well, the problem was solved (in Gatsby), see: https://github.com/gatsbyjs/gatsby/issues/21079.