Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add custom scoping #245

Open
selrond opened this issue Feb 5, 2020 · 0 comments
Open

Add custom scoping #245

selrond opened this issue Feb 5, 2020 · 0 comments

Comments

@selrond
Copy link

selrond commented Feb 5, 2020

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:

  1. Style it myself - a lot of work
  2. Use Typography.js alongside my custom components - mixing cascade with component-level scoping, dealing with conflicts
  3. 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:

  1. add a new key to the options object - something like scopeSelector
  2. 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?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@selrond