stylis-plugin-rtl icon indicating copy to clipboard operation
stylis-plugin-rtl copied to clipboard

stylis-plugin-rtl causes linear-gradient problems

Open ardalan-nhd opened this issue 2 years ago • 1 comments

I'm not sure whether it is a problem from stylis-plugin-rtl or another library but here's the problem(if you think that another library is causing problem here, tell me please and i will open an issue for the corresponding repository). I have a MUI project which uses CacheProvider from @emotion/react and uses stylis-plugin-rtl and has the following structure at top level:

const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [prefixer, rtlPlugin],
})

/**
function App() {
  return (
    <div dir="rtl">
      <CacheProvider value={cacheRtl}>
        <ThemeProvider theme={createMyTheme()}>
          <Button color="secondary">hello</Button>
        </ThemeProvider>
      </CacheProvider>
    </div>
  );
}

I styled the button from MUI theme to have the following style:

containedSecondary: {
                    background: `linear-gradient(68.44deg, #066060 0%, #0DB1B1 100%)`,
                }

But when i go in browser and use inspect, i see the following style applied to button:
linear-gradient(68.44deg, #066060 0%, #0DB1B1 100%);
But after i remove the CacheProvider which provides the rtlPlugin, the problem is gone. What i have found so far is that whatever the value i place for the first non-negative gradient value(in my case 0%), it just subtracts it from 100. So 0% will become 100%, 20% will become 80% and so on. If i place a negative value(e.g. -2%), it is ignored and next non-negative value will get subtracted. So in other words, it will ignore all negative gradient values and subtracts the first value from 100 and then ignores the rest. Since my project needs to support both rtl and ltr, i can't just place 100% instead of 0% and be happy. I think it just shouldn't manipulate gradient values. Thanks in advance.
Update: When i remove rtlPlugin from createCache, the problem is gone again. So i'm almost sure that the problem is caused by stylis-plugin-rtl

ardalan-nhd avatar Mar 09 '22 15:03 ardalan-nhd

Change the value to linear-gradient(68.44deg, #066060 0%, #0DB1B1 100%) /* @noflip */

Tzook avatar Aug 02 '22 12:08 Tzook