Styled API #1094
Styled API #1094
Conversation
kof
force-pushed
the
react-jss/feature/styled
branch
from
18c9a62
to
92fa857
Compare
| @@ -2,7 +2,7 @@ | |||
|
|
|||
There was a problem hiding this comment.
changes here are unrelated, but for some reason after I added tests for styled api, this tests started to fail, something weird started happening with module id, like there is a new moduleId module evaluation, I couldn't fully understand that, but I just started resetinng moduleId here.
packages/react-jss/src/styled.js
Outdated
| } | ||
|
|
||
| // $FlowFixMe flow seems to not know that `classes` will be provided by the HOC, not by element creator. | ||
| return withStyles({css: style}, {...options, injectTheme: true})(Styled) |
There was a problem hiding this comment.
This implementation is good for now, but I would like to optimize it, later on, to not render two extra react components for example.
I'm not sure if we should use the hooks implementation in here yet, as this would make the styled API only usable with react@16.8 currently, which in my opinion is a little bit early.
There was a problem hiding this comment.
I actually think performance is critical and this amount of components for each styled one is really bad, that's why I think hooks api is the only way forward with this API. For those who use older react versions they still can use the old styled implementation.
| |} | ||
| } | ||
|
|
||
| export type Classes = {[string]: string} |
There was a problem hiding this comment.
we could export this one from the core
packages/react-jss/src/types.js
Outdated
| } | ||
|
|
||
| export type DynamicRules = { | ||
| [key: string]: BaseRule | ||
| } | ||
|
|
||
| export type ThemedStyles<Theme> = (theme: Theme) => StaticStyles | ||
| type StaticStyle = {} |
There was a problem hiding this comment.
we should use this one from the core too, for the sake of a sigle source of truth
| </ThemeProvider> | ||
| </JssProvider> | ||
| ) | ||
| // TODO we should not need a static rule in such cases. |
| esproposal.export_star_as=enable | ||
| suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe | ||
| suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore |
There was a problem hiding this comment.
This can be used for things which need to be ignored but need no fixing
| @@ -96,7 +96,8 @@ const createUseStyles = <Theme: {}>(styles: Styles<Theme>, options?: HookOptions | |||
|
|
|||
| useEffectOrLayoutEffect( | |||
| () => { | |||
| if (state.sheet && state.dynamicRules) { | |||
| // We only need to update the rules on a subsequent update and not in the first mount | |||
| if (state.sheet && state.dynamicRules && !isFirstMount.current) { | |||
* wip styled * more tests, lint * add styled system tests * switch back to style-system v3, until v4 changes the format back * switch back to style-system v3, until v4 changes the format back * switch back to style-system v3, until v4 changes the format back, better types * upgrade flow and react * upgrade theming * flow types * migrate to hooks * Fix tests * Update size snapshot * more tests * accept multiple static and dynamic style declarations * implement shouldForwardProp * merge the styles arguments passed to styled * add test for empty values returned from function rules * optimize perf, better types * support label * Update changelog.md * skip the tests for now on the ci
Implements #974
Todo
styled('div')({}, () => ({}) ...)styled('div', {shouldForwardProp})(style...)label