Initial work to add createGlobalStyle functionality #1416

JamieDixon · 2018-01-09T11:03:22Z

Implements #1333

This is very much a WIP and open for discussion

mxstbr-bot · 2018-01-09T11:07:05Z

	Warnings
⚠️	There are library changes, but not tests. That's OK as long as you're refactoring existing code

Generated by 🚫 dangerJS

mxstbr · 2018-01-09T11:16:01Z

Awesome!

In terms of removing styles, we need to add a new method to StyleSheet.js which removes tags based on component IDs. That should call tag.removeComponent(id), which we'd need to implement to essentially reverse the work done in tag.addComponent(id). Should be doable maybe?

JamieDixon · 2018-01-09T12:11:33Z

I'll be looking into removeComponent today.

kitten · 2018-01-09T15:43:06Z

@mxstbr in a future (!) PR we should probably add interpolation support as well 😄

Edit: This could also use the BaseStyledComponent class (we could extract it) to save some space and to get the prop/interpolation/theme support immediately: https://github.com/styled-components/styled-components/blob/master/src/models/StyledComponent.js#L55

kitten

Some minor problems that we'll need to fix first 😉 Thanks for picking this up! 🙌

kitten · 2018-01-09T15:44:55Z

src/constructors/createGlobalStyle.js

+    return class extends React.Component {
+      componentId = ''
+
+      componentDidMount() {


Here the component should use componentWillMount instead 😉 otherwise this wouldn't work correctly for SSR. It's also important as we'll want the global styles to apply immediately before all DOM nodes mount (that might be referred to in or affected by these global styles).

Thanks! Adjusted in df87dd7

kitten · 2018-01-09T15:45:54Z

src/constructors/createGlobalStyle.js

+        const rules = css(strings, ...interpolations)
+        const hash = hashStr(JSON.stringify(rules))
+        this.componentId = `sc-global-${hash}`
+        if (StyleSheet.instance.hasInjectedComponent(this.componentId)) return


This needs to possible grab the stylesheet from the context (for SSR as well, and/or future tag support)

See here: https://github.com/styled-components/styled-components/blob/master/src/models/StyledComponent.js#L94

and here: https://github.com/styled-components/styled-components/blob/master/src/models/StyledComponent.js#L274-L277

Sweet. Thanks for the tips. Adjusted in c6155ec

mxstbr · 2018-01-09T16:20:53Z

Damnnn df87dd7 🔥 🔥 🔥

Do you reckon we'll be able to use that for all styled components in the future? That'd be extremely rad.

kitten · 2018-01-09T16:29:00Z

@mxstbr I don't think we should remove any rules for styled components as that'd be unnecessary work. We don't care whether rules remain around or not since we control their classnames 😁

JamieDixon · 2018-01-09T16:35:45Z

Is there a printWidth prop missing from .prettierrc? I think my Atom is mucking up your nice formatting.

kitten · 2018-01-09T23:02:43Z

@JamieDixon that's definitely possible (I haven't had a look) but normally the default should be used. Maybe the Atom plugin falls back to its setting instead? That'd be horrible 😆 Feel free to add it to the .prettierrc if you don't mind

Edit: Also, can you remove the Ran yarn format commit please? The formatting should only be done by lint-staged and just pushing another commit that fixes formatting will also then show your commit as the last edit... not the end of the world of course, just a nit 😉

JamieDixon · 2018-01-09T23:36:41Z

Thanks @philpl. I've dropped the Ran yarn format commit and added a new one updating the .prettierrc file. 👍

JamieDixon · 2018-01-15T10:26:33Z

Is there more you'd like me to do on this one guys? I took a quick look into BaseStyledComponent but couldn't get it working. I'm happy to take another look if it's stopping this PR being approved?

mxstbr

Looks good to me code wise, can we undo the changelog.md reformatting? That breaks git blame, which can be vital sometimes.

I'd also like some unit tests, but I can look at that if you don't want to write those 😉 We'll also need to add documentation to the website and deprecate injectGlobal for the next major.

…s unmounted

JamieDixon · 2018-01-15T11:37:55Z

@mxstbr I've dropped the CHANGELOG commit and sent a new one with just the change we want. I need to figure out why prettier changed all the things.

mxstbr · 2018-01-15T11:54:06Z

Hold on, why is that changelog entry under 2.4.1 and not under unreleased? Pretty sure that won't be going out in 2.4.1?

JamieDixon · 2018-01-15T12:00:31Z

Good point. Lemme fix that up.

JamieDixon · 2018-01-15T12:03:46Z

Fixed

kitten · 2018-02-11T20:19:59Z

@JamieDixon work was picked up in #1493; Please take a look to make sure that it's still on track 🙌

JamieDixon · 2018-02-16T15:52:58Z

@kitten Cool. I hope what I did here was still useful 😬

kitten · 2018-02-16T16:05:27Z

@JamieDixon Definitely! Thanks for kicking this work off 👍

jarodtaylor · 2018-02-24T20:05:10Z

This is sexy.

quantizor · 2018-06-02T16:43:22Z

Closing in favor of #1493 since it's a continuation and evolution of this one 😸

JamieDixon added the WIP label Jan 9, 2018

kitten requested changes Jan 9, 2018

View reviewed changes

JamieDixon force-pushed the create-global-style branch 2 times, most recently from 34bb1f4 to 40ef36e Compare January 9, 2018 18:16

JamieDixon force-pushed the create-global-style branch from 40ef36e to 769e3ba Compare January 9, 2018 23:35

mxstbr mentioned this pull request Jan 10, 2018

Unable to change page background via ThemeProvider and injectGlobal #793

Closed

JamieDixon force-pushed the create-global-style branch 2 times, most recently from 08935a6 to 5f40aa9 Compare January 11, 2018 14:05

mxstbr reviewed Jan 15, 2018

View reviewed changes

JamieDixon added 3 commits January 15, 2018 11:33

Initial work to add createGlobalStyle functionality

dff03ab

Delete global styles when component returned from createGlobalStyle i…

659d3f2

…s unmounted

Check context for stylesheet instance

a49dc81

JamieDixon force-pushed the create-global-style branch from 5f40aa9 to 8bff338 Compare January 15, 2018 11:33

JamieDixon added 4 commits January 15, 2018 11:34

Adjust the size of the browser style sheet after removing a textNode

7ee797f

Add initial implementation of removeComponent to ServerStyleSheet

b361529

Tidy up code as part of createGlobalStyle addition

f581425

Added printWidth to .prettierrc

0985a8a

JamieDixon force-pushed the create-global-style branch from 8bff338 to 0985a8a Compare January 15, 2018 11:34

Add createGlobalStyle information to CHANGELOG

a79cc26

JamieDixon force-pushed the create-global-style branch from 63bca43 to a79cc26 Compare January 15, 2018 12:03

mxstbr mentioned this pull request Feb 5, 2018

Component-based API for global styling #1333

Closed

marionebl mentioned this pull request Feb 5, 2018

Add component-based global styling API #1493

Closed

5 tasks

mxstbr mentioned this pull request Feb 13, 2018

Feature Request: Replacing styles that are injected by injectGlobal #277

Closed

quantizor closed this Jun 2, 2018

jimmycann mentioned this pull request Jun 14, 2018

Add component-based global styling API #1807

Closed

imbhargav5 mentioned this pull request Jul 26, 2018

Add component-based global styling API #1867

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial work to add createGlobalStyle functionality #1416

Initial work to add createGlobalStyle functionality #1416

JamieDixon commented Jan 9, 2018

mxstbr-bot commented Jan 9, 2018 •

edited

mxstbr commented Jan 9, 2018

JamieDixon commented Jan 9, 2018

kitten commented Jan 9, 2018 •

edited

kitten left a comment

kitten Jan 9, 2018

JamieDixon Jan 9, 2018

kitten Jan 9, 2018

JamieDixon Jan 9, 2018

mxstbr commented Jan 9, 2018

kitten commented Jan 9, 2018 •

edited

JamieDixon commented Jan 9, 2018

kitten commented Jan 9, 2018 •

edited

JamieDixon commented Jan 9, 2018

JamieDixon commented Jan 15, 2018

mxstbr left a comment

JamieDixon commented Jan 15, 2018

mxstbr commented Jan 15, 2018

JamieDixon commented Jan 15, 2018

JamieDixon commented Jan 15, 2018

kitten commented Feb 11, 2018 •

edited

JamieDixon commented Feb 16, 2018

kitten commented Feb 16, 2018

jarodtaylor commented Feb 24, 2018

quantizor commented Jun 2, 2018

Initial work to add createGlobalStyle functionality #1416

Initial work to add createGlobalStyle functionality #1416

Conversation

JamieDixon commented Jan 9, 2018

mxstbr-bot commented Jan 9, 2018 • edited

mxstbr commented Jan 9, 2018

JamieDixon commented Jan 9, 2018

kitten commented Jan 9, 2018 • edited

kitten left a comment

Choose a reason for hiding this comment

kitten Jan 9, 2018

Choose a reason for hiding this comment

JamieDixon Jan 9, 2018

Choose a reason for hiding this comment

kitten Jan 9, 2018

Choose a reason for hiding this comment

JamieDixon Jan 9, 2018

Choose a reason for hiding this comment

mxstbr commented Jan 9, 2018

kitten commented Jan 9, 2018 • edited

JamieDixon commented Jan 9, 2018

kitten commented Jan 9, 2018 • edited

JamieDixon commented Jan 9, 2018

JamieDixon commented Jan 15, 2018

mxstbr left a comment

Choose a reason for hiding this comment

JamieDixon commented Jan 15, 2018

mxstbr commented Jan 15, 2018

JamieDixon commented Jan 15, 2018

JamieDixon commented Jan 15, 2018

kitten commented Feb 11, 2018 • edited

JamieDixon commented Feb 16, 2018

kitten commented Feb 16, 2018

jarodtaylor commented Feb 24, 2018

quantizor commented Jun 2, 2018

mxstbr-bot commented Jan 9, 2018 •

edited

kitten commented Jan 9, 2018 •

edited

kitten commented Jan 9, 2018 •

edited

kitten commented Jan 9, 2018 •

edited

kitten commented Feb 11, 2018 •

edited