-
-
Notifications
You must be signed in to change notification settings - Fork 181
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Transform key as array ignored #911
Comments
Did you configure fela-plugin-responsive-value correctly? Here's an example of how it works: https://codesandbox.io/s/dawn-fire-462sj7?file=/src/index.js |
Very confident closure! 😄 Yeah, it works for all other responsive values, apart from the transform. |
It looks like it might be an issue within Any chance this can be reopened? Because it's definitely not resolved. This is (part of) my React component: <Flex
sx={{
left: '50%',
position: 'absolute',
zIndex: 11,
border: '1px solid #DADCDF',
width: 'auto',
height: 'auto',
borderRadius: ['3px', , '5px'],
bottom: ['50%', , '0px'],
transform: ['translate(-50%, 50%)', , 'translateX(-50%)'],
}}
/> And this (part of) the Flex component used above. const HTMLElement: string = asProp as keyof JSX.IntrinsicElements;
const { css } = useFela();
return (
<HTMLElement
value={value}
{...(autoComplete && { autoComplete: autoComplete })}
{...props}
className={`${css(sx as any)} ${className}`}
ref={ref}
>
{children}
</HTMLElement>
); The |
What's your Fela configuration in this case? I'm sure it's a configuration issue, because the plugin doesn't care which property you use; either it works or not. That said, I can reopen of course. |
I have created a workaround for this issue. Thanks anyways! |
Type: Bug
Description
When using an array value for the
transform
key, the last key in the array is used for all breakpoints.Steps to reproduce
Use the following:
transform: ['translateX(-50%)', , 'translateX(-100px)']
Expected Behavior
translateX(-50%)
is used for the first two breakpointstranslateX(-100px)
is used for any greater breakpointActual Behavior
All breakpoints use
translateX(-100px)
.The text was updated successfully, but these errors were encountered: