sbardian/gatsby-plugin-breadcrumb

Add option to add classes instead of inline styles

muuvmuuv opened this issue · 3 comments

muuvmuuv commented

I'm a big fan of good old CSS (Scss) and don't like the CSS-in-JS hype. So I suggest an option to switch that, so instead of inline CSS, classes are added to each element.

This would allow me to easier style them along the rest of my layout.

<div class="breadcrumb">
  <span class="breadcrumb__root">Home</span>
  <a class="breadcrumb__link" href="/blog">Blog</a>
  <spann class="breadcrumb__divider"> / </spann>
  <a class="breadcrumb__link" href="/blog/the-awesome-post">The awesome post</a>
</div>

I have also modified the HTML structure, which IMO makes more sense.

Removing CSS-in-JS would also remove bundle size and reduce the plugin to its core functionality; providing an easy way to show a breadcrumb. I think plugins should not combine structure and styling in one file. A separate optional CSS file that a user can load into would make it more flexible.

sbardian commented

I have a release ready to go that I think is a compromise on this issue/request. CSS being a hotly debated topic, I have left the current behavior, but allowed for a new plugin option useClassNames: true to be used. This will disable any default CSS applied and disable any props used to pass CSS style objects to the Breadcrumb and SitemapCrumbs components. Allowing someone to opt-out of the default behavior, for a classes behavior instead. Please read the updated docs and feel free to reopen the ticket / open a new ticket if I missed the mark or you find any issues with the release.

  • 👍1
sbardian commented

🎉 This issue has been resolved in version 5.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀