Configuration about styled-components

[mxstbr]

One big thing is that configuration should only need to be done for edge cases, not have to be done for every app. I don't think we should have config at all, I'd much rather have strict defaults like Aphrodite. If you want to use emojis, vendor it in and change those two lines of code – I'd rather we do that them have config.

I like the /native entry point thing for ease-of-use and extendability.

[geelen]

Oh no emojis are opt out 🔥😎🔥
On Mon., 3 Oct. 2016 at 5:10 pm Max Stoiber [email protected]
wrote:

One big thing is that configuration should only need to be done for edge
cases, not have to be done for every app. I don't think we should have
config at all, I'd much rather have strict defaults like Aphrodite. If you
want to use emojis, vendor it in and change those two lines of code – I'd
rather we do that them have config.

I like the /native entry point thing for ease-of-use and extendability.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#39 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABa4MkDMJq32VzH-yMB9RN4X0RLf4V7ks5qwJxRgaJpZM4KMIk3
.

[geelen]

More to the point, you were talking about supporting non-react things like glimmer/choo. Would they be separate repos or styled-components/framework endpoints? I definitely agree that the default config should work for the majority of cases but it does sorta feel like the wider you want styled-components to be applicable the more use cases you're going to have to support.

Case in point, I think import { StyleSheet, css } from 'aphrodite/no-important' is particularly bad. Maybe just because the default should not to use !important everywhere but partially because you have to specify /no-important every time you use the library. Surely there's a better way...

[geelen]

Just recording my chat in the Gitter room. Neither of us like this:

// One time setup with default plugins and settings.
jss.setup(preset())

Because you have to do it every time. So we definitely want a zero config default.

Radium has a few different methods:

Aphrodite has a zero-config approach but exports another entry point for no-important: https://github.com/Khan/aphrodite/blob/master/src/no-important.js

I still really dislike it because you have to specify it in every file, but I can't think of any other way to export a zero-config singleton by default and still allow customisation/experimentation. So, I think we should build SC so this is possible:

import Css from 'styled-components/lib/css'
import Styled from 'styled-components/lib/styled'
import Global from 'styled-components/lib/global'
import Keyframes from 'styled-components/lib/keyframes'

const css = new Css(...options)
const styled = new Styled(...options)
const global = new Global(...options)
const keyframes = new Keyframes(...options)

export { styled as default, css, global, keyframes }

This way people are effectively vendoring index.js and providing different config to the underlying pieces. We have to change our implementation to support it of course but I think it's worth it. It separates the singleton-export from the underlying functionality neatly.

Folks are left having to do import styled from '../../styled-components.js' or set up an alias or something but that's fine. It's the way JS is supposed to work anyway.

Also, we can now use this interface to provide React Native support:

/* styled-components/native.js */
import Css from './constructors/css'
import StyledNative from './constructors/styledNative'

const css = new Css({ nesting: false })
const styled = new StyledNative()

export { styled as default, css }

(assuming RN doesn't need global or keyframes). This is good. I like this.

[geelen]

Ok yeah the use of new Css in my examples doesn't quite work (since it's truly stateless and just a wrapper around the interpolation fragment) but I think I can get the others going.