Skip to content

stylis-plugin-rtl causes linear-gradient problems #36

@ardalan-nhd

Description

@ardalan-nhd

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions