Is there a JS notation for a global style renderer?

[alex-wilmer]

Sorry this is just a question! I'm looking forward to working with Fela, but was wondering how to handle the addCSS situation I with React-Look (or Radium) where I have an object that looks like:

import theme from 'theme';

const background = {
  width: '100%',
  height: '100%',
  margin: 0,
  backgroundColor: theme.greyScale5,
};

const global = {
  html: {
    ...background,
    fontSize: '10px',
  },
  '#root': background,
  '#app': background,
  body: {
    ...background,
    fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
    fontSize: '14px',
  },
  '*': {
    boxSizing: 'border-box !important',
    outline: 'none !important',
  },
  a: {
    color: theme.primary,
    cursor: 'pointer',
  },
  h2: {
    textTransform: 'capitalize',
    fontWeight: 300,
    margin: '0.5rem 0',
  },
};

export default global;

And I want to render that into a global stylesheet. Is this no longer supported, or do I need to write this as a string of css (where I would like the theme values?

Thanks!

I promise to help on this project as soon as this Angular -> React migration is done!

[robinweser]

Which Angular -> React migration are you talking about? Within your project? Also, Fela supports global styles as being documented here: http://fela.js.org/docs/advanced/StaticStyle.html

Yet you need to use renderStatic for every selector, but this could be done using a wrapper as well.

[alex-wilmer]

Yes sorry, something internal that needs my attention before I can focus hard on open source stuff. It's a big project though (which is also open source) so could count towards a big real world OS project that uses Fela, if that matters to you. https://github.com/NCI-GDC/portal-ui https://gdc-portal.nci.nih.gov/

Hmm I'm not sure if the docs on renderStatic are crystal clear, but I will give it a shot and reopen this if I can't get it working in some reasonable manner.

PS, we started the react refactor with React Look! Then to Radium (which is giving me a headache). but have faith in Fela so far. Will keep you up to date about my usage if you like.

[robinweser]

Well using your example it basically is:

import theme from 'theme';

const background = {
  width: '100%',
  height: '100%',
  margin: 0,
  backgroundColor: theme.greyScale5,
};

renderer.renderStatic({
    ...background,
    fontSize: '10px'
  }, 'html')

// etc

Feel free to ping me on Gitter btw. I am curious about what you're building. I see the probs with react-look. Basically why I created Fela after all.