can include a CSS reset?

[lljr]

does the module contain options to include a CSS reset? I tried to include a styles reset with a reset.css file but the file affects the settings when typography.js is enabled. Can't find a way to include a reset and not affecting my typography settings. Is there a way to get around this?

[hagnerd]

By default typography includes normalize.css, in the configuration object you can pass includeNormalize: false which will not include it, and allow you to use whatever reset you'd prefer.

[lljr]

@hagnerd thanks. Although it would still be nice to have the option of a meyer's reset.css.

[hagnerd]

@avocadoras implementing a reset override on the configuration object shouldn't be too hard, but I'm guessing that won't be a priority because if you set includeNormalize to false, and import your reset.css ahead of your typography, then you can implement whatever css reset you'd like.

Here is an example repo using Gatsby and Typography. The file of interest is located here in src/utils/typography.js and looks like this:

[lljr]

@hagnerd thanks for your help. I guess another way to implement this is by adding the reset.css to index.html with a link tag and setting the typography's includeNormalize property to false? Not sure how Typography picks up the imported css file and inserts it into its css style sheet

[hagnerd]

@avocadoras I was just using Gatsbyjs as an example because from my experience that is where the typography package is used the most.

Gatsbyjs uses webpack to handle the bundling, so it knows that when you import a css file into a JavaScript file it needs to process and inject the css into the template with whatever logic is specified by the webpack loaders and config.

TL;DR : Typographyjs doesn't know how to handle the imported css reset in the example above, but Gatsbyjs implements webpack so it handles it for you.

You could absolutely do it by including the CSS reset in index.html yourself and setting includeNormalize to false.

Do you have a specific project you are using this in that you'd like help with setting up? Or is just a general need across projects that you might use typographyjs in?

[lljr]

@hagnerd yes you are correct. I'm not so familiar with this tech stack so I guess I'm still a bit confused. Anyhow, I am using them for personal projects, nothing serious but my workflow felt funky because I'm not used to Normalize.

[hagnerd]

@avocadoras no problem. Did you figure out how to get it working with the reset you'd like to use?

If so do you want to close the issue?

If you're still feeling like this isn't resolved and would like a feature to be added it might be time to ping the big man himself, or I could help you put together a PR of what this feature might look like to allow users to pass their own css reset.

[lljr]

@hagnerd yes it would be a better idea to send a PR to add this feature

[lljr]

I'm not using reset.css anymore. I will close the issue since I don't see a use and since @hagnerd 's solution is fine for cases in which I would need it.