TypeSafe stylesheets

[sudhirvkumar]

right now we are using Strings and I would like to avoid that and use PureScript TypeSystem to avoid errors

styleSheet :: StyleSheet
styleSheet  =
  createStyleSheet
  [ Style "scrollContainer"
    [ backgroundColor Transparent
    ]
  ]

and using this code to get that style

Styles.style $ getStyleId styleSheet "scrollContainer"

I am sure we can make this code easier... I just wanted to get it working and then refine / refactor. As the editor (Spacemacs) helps... I didn't worry about getting these things perfect from the beginning. would like to make things simpler before releasing it to the public though.

In one instance, one of our developer working on the client project missed a character in the string and the styles were not applying and it was confusing and wasted time trying to figure it out. I would like to avoid using strings

@doolse @pkamenarsky your ideas and comments please!

[pkamenarsky]

@sudhirvkumar Might this be of help?

I normally use pure CSS when programming for the web, because I don't want to have to recompile every time I move something a pixel to the right, but for React Native this makes sense, since stylesheets have to be inlined anyway, afaik.

[sudhirvkumar]

@pkamenarsky

Specifically I want to avoid using string in this code Style "scrollContainer" as we need to refer to that string and there is a chance that people will make a typo and waste time. I believe there has to be some way our Type System will help us!

purescript-css yes its useful... I might use some of those things to refactor our code, still that doesn't solve my problem.

[sudhirvkumar]

I was thinking of something like this

data StyleNames
  = ScrollContainer
  | ScrollInnerContainer
  | Container

stylesheet :: StyleNames -> StyleSheet
stylesheet ScrollContainer = ...

and call that with stylesheet ScrollContainer

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

the above code is good for performance so I would like to use StyleSheet.create

I was also thinking about using a record the issue is... I need to call StyleSheet.create and then access the fields... I am still thinking about making it type safe and avoiding strings

[pkamenarsky]

Sure, but isn't this what purescript-css is essentially doing?

It has type wrappers over every property, so it's pretty typesafe, unless I'm missing something.

[sudhirvkumar]

I want to see if there is any other way it can be done easily

[sudhirvkumar]

@doolse has a nice way of handling Styles... so I am planning to borrow that from there..

https://github.com/doolse/purescript-reactnative

sheet :: { searchBar :: Styles
, searchBarInput :: Styles
, spinner :: Styles
, icon :: Styles
}
sheet = {
  searchBar: staticStyles [
    flexDirection row,
    alignItems center,
    backgroundColor $ rgbi 0xa9a9a9,
    height 56
  ],
  searchBarInput: staticStyles [
    flex 1,
    fontSize 20,
    fontWeight bold,
    color white,
    height 50,
    padding 0,
    backgroundColor transparent
  ],
  spinner: staticStyles [
    width 30,
    height 30,
    marginRight 16
  ],
  icon: staticStyles [
    width 24,
    height 24,
    marginHorizontal 8
  ]
}

This way we can avoid using strings and also its type safe and uses StyleSheet.create