Add custom scoping
selrond opened this issue · 0 comments
selrond commented
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 rem
s 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?