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.

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

Document how to import custom Primer CSS #124

Closed
shawnbot opened this issue Jul 12, 2018 · 5 comments
Closed

Document how to import custom Primer CSS #124

shawnbot opened this issue Jul 12, 2018 · 5 comments

Comments

@shawnbot
Copy link
Contributor

shawnbot commented Jul 12, 2018

We need some "official" way to import Primer CSS. Here's how we've done it in our docs site:

  1. At first, we just linked out to a bunch of unpkg.com URLs. This is okay for demos and sandboxes, but not good for production.
  2. In Make static assets available on path alias #238, I set up the Next sass plugin to output a static CSS file as part of the webpack build. This is okay too, but we need to address other use cases.
@shawnbot
Copy link
Contributor Author

Maybe the <StyleProvider> introduced in #158 should be responsible for outputting the <link> tags as well? And maybe it could take a baseURL just in case folks aren't comfortable with linking to unpkg.com?

@shawnbot shawnbot moved this from Backlog to Sprint [09/14] To Do in Primer Components release tracking 📋 Sep 10, 2018
@shawnbot
Copy link
Contributor Author

Okay, after hacking on this in #238 so that we can use Next's sass loader, I have some better-formed opinions on how this should be done. Here's a proposed plan:

  1. Introduce a <BaseCSS /> component that includes primer-base and whichever other styles we need to support existing components.
  2. As we factor out Primer CSS from components, we remove the imports and npm dependencies. (For instance, primer-labels goes away when we
  3. When we're done refactoring components, all that should remain is primer-base.
  4. Figure out how to implement style encapsulation correctly.
  5. Once styles are properly encapsulated and <BaseCSS /> is no longer needed, we make that component render null.
  6. Remove the <BaseCSS /> component in the next major release.

What do you think, @broccolini @emplums @jonrohan?

@emplums
Copy link

emplums commented Sep 11, 2018

Curious what you were thinking for Figure out how to implement style encapsulation correctly. ? Does "styles are properly encapsulated" === using all CSS in JS or are you thinking about something else?

@shawnbot
Copy link
Contributor Author

@emplums I honestly don't know. Like, should all our components have the default font-family and line-height? I don't know how total style encapsulation is really possible without doing that. Or do we add a component that inlines the base styles with <style scoped>? /cc @broccolini

@emplums emplums moved this from Sprint [09/21] To Do to 🙇‍♀️ WIP in Primer Components release tracking 📋 Sep 17, 2018
@shawnbot shawnbot changed the title Component(s) to import Primer CSS Document how to import custom Primer CSS Sep 20, 2018
@shawnbot shawnbot moved this from 🙇‍♀️ WIP to Sprint [09/21] Completed in Primer Components release tracking 📋 Sep 20, 2018
@shawnbot
Copy link
Contributor Author

Done in #260

@emplums emplums moved this from Sprint [09/21] Completed to 🚢Published in Primer Components release tracking 📋 Sep 24, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Development

No branches or pull requests

2 participants