Scoping themes in Typography.js to a particular div?

[Nantris]

This question might be off since I've only used this library in Gatsby, but I'd like to use typography.js only in one section of my site. Is there a good way to scope the theme so it will only affect the section I want?

I see the script in this issue is one option, which I can then scope myself after the fact: https://github.com/KyleAMathews/typography.js/issues/140

Is that script different than this solution? https://github.com/KyleAMathews/typography.js/issues/113#issuecomment-305903957

And is there a better option than either that I've identified?

Thanks very much. You're very right that hand crafted typography themes don't scale.

[Nantris]

Seems to me the best way (in React) is to use something like this

<div className="some-container">
    <style>{ typography.toString() }</style>
    <p className="some-paragraph"></p>
</div>

[Nantris]

My previous answer was a lie. This doesn't work. I should have taken more than a glance at my outcome before posting.

[Nantris]

All my previous solutions have been lies. I'm using this regex to capture all the CSS except for the media queries, so I can map over the matches and wrap them. (It also produces invalid CSS, but functional enough until a better solution.)

const typographyCss = typography.toString();
typographyCss.match(/(.+?{[^{}]+})?/g);

If anyone knows how to complete this Regex to handle @media queries, or a library that already does this, (or if this library already supports it and I'm blind) then this solution will be complete.

[TylerBarnes]

Hey @Slapbox , I believe the reason it's not working is because typographyjs sets the body font size and all the other font sizes are using REM's. How are media queries related to your problem?

[Nantris]

Actually I think I figured it out. I shouldn't code late. I need to remove html and body from the global rules and flat out replace it with the wrapper's selector.

The media queries just break my regex for selecting entire CSS rules. I (shockingly) didn't find a library or stackoverflow answer that addressed this exact need.

I'll post a better solution probably tomorrow.

[TylerBarnes]

"Actually I think I figured it out. I shouldn't code late. I need to remove html and body from the global rules and flat out replace it with the wrapper's selector." Yes exactly. You might also need to switch from REM's to EM's unless I'm mistaken and typographyjs is already using EM's. If I was you I'd make a fork and add an option for something like "rootElement".

typographyjs is pretty simple inside if you take a look. It will probably end up cleaner than doing a find and replace.

[Nantris]

The only real issue here was scoping. This plugin is your friend if you're having my issue: https://github.com/dy/scope-css

It handles media queries cleanly, which was what I was stuck on.