search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.21k stars 10.33k forks source link

Include inlined CSS for gatsby-announcer as a CSS module #26831

Closed nrvnrvn closed 4 years ago

nrvnrvn commented 4 years ago

gatsby-announcer inlines its own styles as an attribute which is generally recommended to avoid except for critical path styles. https://github.com/gatsbyjs/gatsby/blob/b026aab9e231afdac3975c8bb49704c55b286707/packages/gatsby/cache-dir/route-announcer-props.js#L5-L15

If this component's style were a CSS module it would be a much cleaner way and much easier to deal with in different cases, for instance where strict hash-based CSP is needed.

LekoArts commented 4 years ago

Thank you for opening this!

As you already mentioned inlining styles is mostly done for critical path styles which is true in this case as the announcer should not be visible at all. We also don't want to use a specific styling solution (e.g. CSS modules). I think you can also look at https://github.com/gatsbyjs/gatsby/issues/24707 for a solution to your specific problem.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!