stylis-plugin-rtl
stylis-plugin-rtl copied to clipboard
stylis-plugin-rtl causes linear-gradient problems
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
Change the value to linear-gradient(68.44deg, #066060 0%, #0DB1B1 100%) /* @noflip */