@rauchg and I discussed about possible ways to support dynamic styles i.e. allow props and other dynamic values which #80 doesn't.
From slack:
@g and I are contemplating a "dynamic" mode for styled-jsx where you pay a small penalty in performance but you can write stuff like
<style jsx dynamic>{`
p {
width: 100%;
color: ${someProp ? 'red' : 'blue'}
}
`}</style>Basically this mean separate static css from dynamic one, render static css with the current system and inline the dynamic one i.e. each instance will get its own styles.
In order to do so we would need a CSS parser to split things up so that the example above becomes:
[
{
dynamic: false,
css: 'p { width: 100% }'
},
{
dynamic: true,
css: 'p { color: ___styled-jsx-expression_placeholder_n_1___ }'
}
]which eventually compiles down to
<_JSXStyle styleId={woot} css={"p[data-jsx=\"woot\"] {width: 100%;}"} />
<_JSXStyle dynamic styleId={woot2} css={`p[data-jsx=\"woot2\"] {color: ${someProp ? 'red' : 'blue'}}`} />When dynamic is set our component renders a regular style tag instead of returning null.
To parse the CSS we could write a tiny parser or use something like CSSTree since it seems to be fairly fast https://csstree.github.io/docs/validator.html (we could reuse this for the css transformation as well).
@rauchg and I discussed about possible ways to support dynamic styles i.e. allow
propsand other dynamic values which #80 doesn't.From slack:
Basically this mean separate static css from dynamic one, render static css with the current system and inline the dynamic one i.e. each instance will get its own styles.
In order to do so we would need a CSS parser to split things up so that the example above becomes:
which eventually compiles down to
When
dynamicis set our component renders a regular style tag instead of returningnull.To parse the CSS we could write a tiny parser or use something like CSSTree since it seems to be fairly fast https://csstree.github.io/docs/validator.html (we could reuse this for the css transformation as well).