Make styled-components a devDependency

[dferber90]

We are currently only using the keyframes feature of styled-components, and only for a single component. It doesn't make much sense to bundle all of styled-components for this.

We should make styled-components a devDependency and restrict its usage to stories of storybook!

[montezume]

I'll take this if nobody else is hankering for it

[dferber90]

Short update: I also spent some time trying to get rid of keyframes (and styled-components with it) for pro, but it's a rabbit hole.

[tdeekens]

Yeah I think @montezume took a dive into it once too.

[montezume]

Yeah, I spent about an afternoon and it felt wasted. Didn't really come up with a good solution 😢

[emmenko]

Can we somehow extract the behavior of keyframes into a util or something? Or is it too much baked into SC?

[tdeekens]

Shouldn't it be tree shaken? Seems to be glued together with the rest ref.

[montezume]

We could at least update to styled-comp v4 for a small bundle size improvement in the mean time.

[dferber90]

I tried upgrading to v4 but failed with

It seems you are interpolating a keyframe declaration (gjGPWL) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\`\` helper (see https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly.
    Error: It seems you are interpolating a keyframe declaration (gjGPWL) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\`\` helper (see https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly.
    at new StyledComponentsError (http://localhost:9002/static/iframe.bundle.js:184035:58)
    at Keyframes.toString (http://localhost:9002/static/iframe.bundle.js:185048:13)
    at Array.toString (native)
    at RegExp.test (<anonymous>)
    at warnValidStyle (http://localhost:9002/static/iframe.bundle.js:133059:50)
    at setValueForStyles (http://localhost:9002/static/iframe.bundle.js:133122:9)
    at setInitialDOMProperties (http://localhost:9002/static/iframe.bundle.js:134185:7)
    at setInitialProperties (http://localhost:9002/static/iframe.bundle.js:134386:3)
    at finalizeInitialChildren (http://localhost:9002/static/iframe.bundle.js:135362:3)
    at completeWork (http://localhost:9002/static/iframe.bundle.js:141151:17)

The upgrade guide says to use the css helper which I did. I assume this is because we're not applying the class to a styled div, but just to any regular element.

I also moved the version requirements up to at least react 16.3 and react-dom 16.3. This got me past the first error (not mentioned in this comment), but not past the one mentioned above.

At this point, I would just accept any workaround to keep the animation or drop the component which does the animation.

[dferber90]

More on replacing the animation in https://css-tricks.com/using-css-transitions-auto-dimensions/.

[dferber90]

I opened #179 now which gets rid of styled-components as a peer dependencies. This means the bundle size will stay small and consumers won't need to use styled-components at all 🔥

However, we still use styled-components internally for our stories, which is fine.