Feature: styled-components/primitives

[benjamingeorge]

Is it possible to use system-components to create Text and View components from the styled-components/primitives package? I'm trying to make a styleguide that renders to both web and react-sketchapp.

[jxnblk]

It should work but I've never tested it. I assume the breakpoints would not work, since that's not something that exists in react-native

Sorry, I misread that initially. system-components uses the regular styled-components package, so as of now, I don't think it'd work. See https://github.com/jxnblk/styled-system/blob/master/system-components/src/index.js#L1

[okonet]

I’m wondering if we could have a separate entry point for that. I’d like to experiment with universal rendering as well.

[johno]

I def think we should implement a way to support primitives as a separate entrypoint. I'm going to reopen this issue @benjamingeorge since it's something we'd like to put on the roadmap (whether as a separate entypoint or package in the monorepo).

[johno]

Do you want to spike out a proof of concept @okonet?

[okonet]

I could actually. No ETA but let me try soonish

[johno]

Cheers! Yeah, no rush. Let us know when you have something. And feel free to open up an early WIP PR 💟 .

[jxnblk]

FWIW system-components uses a createComponent argument that passes styled-components to the main class. This should be written in a way to support other libraries like styled-components/primitives, glamorous, emotion, etc.

see https://github.com/jxnblk/styled-system/blob/master/system-components/src/index.js#L5

[okonet]

Yep, that makes sense. Also I was thinking about simple aliasing it. Passing the factory function is definitely cleaner but I’m wondering how this will look like in the user land. Ideally, users shouldn’t change any of the components code to do that.

[allforabit]

I have started experimenting with using styled system with React Native and React Native Web. In general it seems to work quite well. One of the issues that has cropped up so far is that a lot of the styles add px which won't work with react native and requires unitless values. To make it work I've made the following tweak to the px function in utils.js:

export const isReactNative = () => typeof navigator != 'undefined' && navigator.product == 'ReactNative'
// ...
export const px = n => isReactNative() ? n : (num(n) ? n + 'px' : n)

It just checks to see if it is running in React Native and if so doesn't add the 'px'.

As React Native doesn't use css, you don't really need a css-in-js library and I've been using a higher order component that uses the new React context system to add the styles and theme:

const Context = createContext();

export const ThemeProvider = Context.Provider;

export const styled = (...styles) => Comp => {
  // Render function
  return ({ style = {}, ...props }) => {
    return (
      <Context.Consumer>
        {theme => {
          const propsWithTheme = { ...props, ...{ theme } };
          const styledStyle = styles.reduce((acc, f) => {
            return { ...acc, ...f(propsWithTheme) };
          }, style);
          return (
            <Comp {...props} style={styledStyle}>
              {props.children}
            </Comp>
          );
        }}
      </Context.Consumer>
    );
  };
};

[kevinwolfcr]

I've isolated the fix from @allforabit and introduced it on PR #279. Hope it gets merged soon to avoid headaches to React Native developers :).

[jxnblk]

I've moved system-components to https://github.com/rebassjs/components – I think support for RN/primitives can probably be handled with a babel configuration if anyone wants to look into that