Transform key as array ignored about fela HOT 5 CLOSED

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

from fela.

Very confident closure! 😄

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

from fela.

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.

from fela.

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.

from fela.

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

from fela.