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.
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:
I'd imagine it could work like this:
scopeSelector<body />hereI'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?