Demo is not updated

[phoenisx]

package.json has a script for demo, but their is no webpack.config.js present, that is used by the script.

If it is intentionally done, I can raise a PR updating demos for the library.

[streamich]

I think I removed the demos. The ones that were there were not that useful. We can definitely have demos, there are some on CodeSandbox. Don't know if creating demos with Webpack is better.

[phoenisx]

Well I was working on making jsx to support functions as css properties (to have dynamic css with props), similar to styled-components, so was looking for demos, to test Component re-renders and stuff (as storybook doesn't support stateful Components). Creating demos with webpack would be great.

P.S: Anyways I figured out there's an addon component for this, already. Need to update the Docs to clearify these FAQs, I guess.

[streamich]

... (as storybook doesn't support stateful Components).

You can create stateful/class components in Storybook. Something like this:

class Lalala extends React.Component {
  render () {
    return <div>lalala</div>;
  }
}

storiesOf('Story', module)
  .add('Default', () => {
    return <Lalala />;
  })

[phoenisx]

Thanks, will look into it.

Also, is it fine (now that there's already an addon component for dynamic props in css) to make jsx support functions as css properties (to have dynamic css with props)?

[streamich]

Yes, could be useful for some use cases. But mind that there is already a way to add custom CSS:

const Comp = jsx(/*...*/);
<Comp css={{ /* ... */ }} />

[phoenisx]

Yes, there is, but sometimes it's easier to have just one styled component for dynamic behavior. With jsx, if customization is needed, a parent component is required for overrides. Following can solve this problem:

const ComponentStyled = jsx( 'div', {
  c: props => props.light ? '#333' : '#fafafa',
}, 'ComponentStyled');

Instead of

const ComponentStyled = jsx( 'div', {
  c:  '#fafafa', // Some default
}, 'ComponentStyled');

const ComponentDynamic = props => (
  <ComponentStyled css={{ c: props.light ? '#333' : '#fafafa' }} />
);

The only issue, I faced while trying this was react warnings in development, for unknown props. styled-component maintains a list of default DOM props for each HTML Element, which they use to filter out accepted props using de-structure. Don't want to maintain such a list here would make the addon very big in size. Any ideas?

[streamich]

You either need a list of props or do filtering, I wrote about the filtering here: https://github.com/streamich/nano-css/blob/master/docs/style.md#filtering-pass-through-props

[streamich]

BTW, if you add functions as CSS props, it's probably better to add them to stylded addon.

There could be a separate optional addon that maintains a list of known CSS properties, so that addons like styled could use it (if installed) to filter out properties.

[phoenisx]

Cool! Will look into these. Thanks

P.S.: Will add demos if required. Even I don't feel their requirement right now, as storybook covers testing.