♻️ Add and refactor animation/transition/box-shadow support #154
Conversation
alexandre-eliot
commented
Jan 1, 2021
- Add TIME and TIMING into tokenTypes
- Add NUMBER support to directionFactory
- Add valuesFactory for transition and animation properties
- Add PERCENT support to transforms
- Add animation and transition support
- Add box-shadow opacity support
- Add support for non-unit number in box-shadow
jacobp100
left a comment
There was a problem hiding this comment.
Thanks for your work on this! To summarise the review,
- Omitting units has been discussed at length - the conclusion was we will require them where CSS does
- I'm not sure opacity in a box shadow is valid CSS
- Could we double check percent support for transforms in RN? I'm pretty certain it doesn't support them
- I love the idea of supporting animations/transitions, but the API should split these off from regular RN styles
|
|
||
| it('transforms box-shadow with rgba color and opacity', () => { | ||
| expect( | ||
| transformCss([['box-shadow', '10px 20px rgba(100, 100, 100, 0.5) 0.5']]) |
There was a problem hiding this comment.
Could you point to a spec for the last number? AFAICT it's not part of CSS
|
|
||
| it('animation a single property', () => { | ||
| expect(transformCss([['animation', 'slide-in linear .3s']])).toEqual({ | ||
| animationName: ['slide-in'], |
There was a problem hiding this comment.
I think it'd be pretty great to support this stuff in this library
I have a slight issue with mixing RN styles with things RN cannot handle
Perhaps we could change the API to return { styles, animation, transition } etc. where styles is all the stuff that's compatible with RN, then all the other properties are things libraries can use to polyfill support etc.
| @@ -1,2 +1 @@ | |||
| /node_modules | |||
| /index.js | |||
There was a problem hiding this comment.
Was this just for testing purposes?
| }) | ||
| }) | ||
|
|
||
| it('allows shorthands without unit', () => { |
| const match = node.value.match(timeRe) | ||
| if (match === null) return null | ||
|
|
||
| return Number(match[1]) * (match[2]==='s' ? 1000 : 1); |
There was a problem hiding this comment.
Could you run prettier on this file?
| } | ||
| const xyNumber = xyTransformFactory(NUMBER) | ||
| const xyLength = xyTransformFactory(LENGTH) | ||
| const xyLength = xyTransformFactory(LENGTH, PERCENT) |
There was a problem hiding this comment.
I think RN doesn't support percents in transforms
|
I'm going to close this, but if you want to continue work on this, just @ me |