Support specific platform or theme?

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

Suppose I have a below button style.

const styles = cssInJS({
  button: {
    width: 57,
    height: 57,
  },
})

I wanna make some css properties changes on the specific platform ios.

// case1)
const styles = cssInJS({
  button: {
    width: __IOS__ ? 40 : 57,
    height: 57,
  },
})

or wanna make changes in some classes,

// case2)
const styles = cssInJS({
  button: __IOS__ ? {
    width: 40,
    height: 57,
  } : {
    width: 57,
    height: 57,
  }
})

In the above examples, __IOS__ will be defined by webpack definePlugin, or It will be just normal variable.

Now, I have to add another class, like button_ios. but that way make a bundle with all classes even useless.

Do you have any plan about that feature supporting specific platform or theme style using condition statement? If you are not available now, It wouldn't be easy to do, but I cound make a PR.

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

I did read your answer on #9 , but the dynamic code is in the context option, I think it would get the high complexity. I think It's time to resolve dynamic style definition issue by other solution. how about use cssInJs( function ) instead of cssInJs( object ) ? Of course, that function ensure to have no closure variables.

[martinandert]

If you are not available now, It wouldn't be easy to do, but I cound make a PR.

Hi Alfred! Indeed I'm pretty consumed by my day job currently, so pull requests are always welcome! I'm also interested to hear more about your cssInJs(function) proposal.

[avesus]

+1

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

I started to work on it ! I'm thinking of adding function expression handler; but of course, in keeping with backward compatibility, using original expression method.

My plan is to add transformFunctionExpressionIntoStyleSheetObject function which has the same interface as transformObjectExpressionIntoStyleSheetObject.

When this feature is added, it will be used as follows.

const styles = cssInJS( ( context )=>{

  const imageUrl = context.env === 'production' ?
    'https://cdn.mycompany.com/image.png' :
    '../img/image.png';

  const bgColor = context.platform === 'ios' ?  context.winset.ios.bgColor : 
    context.platform === 'android' ? context.winset.andorid.bgColor :
    context.winset.basic.bgColor;

  return {
    box: {
      width: 100,
      height: 50,
      fontSize: context.basicFontSize,
      backgroundImage: 'url( ' + imageUrl + ' )',
      backgroundColor: bgColor,
    };
  };
});

When babel is begun, that function receives context object, and here, you can access to not only css value, etc, but also current build environment information. The code you are getting after having performed babel is as follows:

const styles = {
  box: 'example_js_styles_box'
};

and generated css will look like this:

.example_js_styles_box {
  width: 100px;
  height: 50px;
  font-size: 15px;
  background-image: url( https://cdn.mycompany.com/image.png );
  background-color: pink;
}

For you to refer, the context object that is used above is as follows

{
  basicFontSize: 15,
  env: 'production',
  platform: 'ios',
  winset: {
    basic: { bgColor: 'white' },
    android: { bgColor: 'green' },
    ios: { bgColor: 'pink' },
  }
}

Depending on your build process like a webpack or gulp, env, platform properties can be set dynamically.

Feel free to propose any opinions. I will then reflect it on the project.

[martinandert]

@b6pzeusbc54tvhw5jgpyw8pwz2x6gs This looks very promising! Can't wait to see the final implementation!

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

Hi @martinandert ! First, as mentioned above the code was done and can be found at my forked repo. I want to try out the beta version on the npm, could you give me the npm publish permission? If possible, also be nice if the contributor authority of the github repository.

[martinandert]

First, as mentioned above the code was done and can be found at my forked repo.

Could you please add some tests which exercise the new functionality? And also add a few sentences to the README how to use this and why this is cool / how this improves things / which problem this solves?

If possible, also be nice if the contributor authority of the github repository.

I'm afraid this doesn't work this way. I'd rather have a proper pull request first (see the Contributing section in the README).

I want to try out the beta version on the npm, could you give me the npm publish permission?

To try out your changes, you could publish your work to npm under a different package name.

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

okay, I'm working on as direct test version URL instead of npm package. My works will include README and some test case, then I will PR.