Add custom scoping #245
Description
It would be useful to be able to define a custom selector to scope the styles generated by Typography.js under.
A case for this:
I'm building a website in React, and make a heavy use of component-scoped styles (styled-components). But I have a blog section, that contains articles with markup generated elsewhere (markdown files, external APIs...).
I have 3 options here:
- Style it myself - a lot of work
- Use Typography.js alongside my custom components - mixing cascade with component-level scoping, dealing with conflicts
- Use Typography.js exclusively / primarily with a few custom components overriding what I need - bearable to a degree, but gets in the way once I need to customize more stuff, ending up in point 2
I'd imagine it could work like this:
- add a new key to the options object - something like
scopeSelector - if defined, prefix all selectors with it and use it as a base instead of
<body />here
I'm aware rems might result in different sizes, since they are relative to the root element, but that's desirable when using custom scoping.
What are your thoughts?