Updated styled component to v4+

[abotteram]

Summary

This PR can be summarized in the following changelog entry:

• Updated the styled-components package to v4+.

Relevant technical choices:

• jest-styled-components doesn't play nicely with styled-components v4 yet. That's why the snapshot css has been replaced by classnames. As soon as Bring compatibility with v4 styled-components/jest-styled-components#191 is solved we can fix this.
• See https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4 if all necessary upgrades for v4+ have been applied. A new notes regarding this:
  • I've checked whether we use at least react 16.3 and react-dom 16.3
  • Point 3 has been fixed using the described codemod.
  • Point 4 isn't applicable because we didn't use injectGlobal anywhere (altough please verify this).
  • Point 5 has been fixed manually, so please double check is I missed some innerRef props on styled components.
  • Point 6 isn't applicable because we didn't use keyframes anywhere (altough please verify this).
  • Point 7, we only use attrs in packages/search-metadata-previews/src/shared.js, and since we don't pass any attributes as a function the recommandation to switch to the new API doesn't apply.
• Removed addFontSizeStyles from yoast-components because it caused unexpected behaviour in wordpress-seo and is no longer relevant.

Test instructions

This PR can be tested by following these steps:

• Make sure you have the console open at all times.
• Walk through the examples in the stand-alone app. Make sure no errors or warnings regarding styled components occur.
• Link yoast-components to wordpress-seo and check out upgrade-styled-components-to-v4 (Updated styled component to v4+ #220)
• In wordpress-seo install all dependencies and build the project.
• Walk through all react components in the plugin.
  • Onboarding wizard
  • Dashboard widget
  • Metabox
  • Sidebar (gutenberg)
  • Search appearance pages

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Created instead of Yoast/yoast-components#825.

Fixes #

[igorschoester]

CR 👍

As a side note, we are wondering why styled.div.attrs( {} ) is used when no attribute is passed as an argument to the function?
(In javascript/packages/yoast-components/composites/Plugin/SnippetEditor/components/Shared.js, const InputContainer)

Answering own questions department

Removed addFontSizeStyles from yoast-components because it caused unexpected behaviour in wordpress-seo and is no longer relevant.

Which unexpected behaviour? Because the font-size order of application matters, and this order has been changed in 'styled components' v4. The addFontSizeStyles makes it so that the cascading is not under control.

[igorschoester]

Acceptance ✅

There are some styling issues in the snippet preview in the standalone, which are also present on the release/11.0-schema branch. Ignoring those.