Transform key as array ignored

[rvanheesostk]

Type: Bug

Packages	Version
fela	12.2.1
react-fela	12.2.1

---

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 breakpoints
• translateX(-100px) is used for any greater breakpoint

Actual Behavior

All breakpoints use translateX(-100px).

[robinweser]

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

[rvanheesostk]

Very confident closure! 😄

Yeah, it works for all other responsive values, apart from the transform.

[rvanheesostk]

It looks like it might be an issue within react-fela, using the css method. There are some rules that don't work, some that do. I'm unsure what the relation is between the ones that are broken. text-transform also doesn't work, while fontSize does work.

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. <Flex> can be seen as a wrapper for fela.

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 borderRadius and bottom rules are properly transpiled. The transform one is not.

[robinweser]

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.

[rvanheesostk]

I have created a workaround for this issue. Thanks anyways!