[pigment-css][react] RTL Support

[brijeshb42]

• Re-export RtlProvider from @mui/system
• Also implements built-in RTL support. See the added test files.

Note: There is one optimization that we can pick-up later is to only add properties that actually changed in the output from ltr to rtl, ie, for:

.class {
  display: block;
  margin-left: 20px;
}

The output should not include the display property since it's common in both.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-41570--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 188300c

[mnajdova]

Note: There is one optimization that we can pick-up later is to only add properties that actually changed in the output from ltr to rtl

Agree, we should add it as an item for the stable milestone.

[mnajdova]

Tests looks good to me 👍

[siriwatknp]

👍 Great to see this coming!

For API, I think it can be refined a bit. Here is what I can think of RTL usage start with the simplest need:

1. The website is only RTL (maybe for Arabic users only), the config should look like:

{
  theme: …,
  direction: {
    defaultDirection: 'rtl',
  },
}

the output CSS should switch to RTL

2. The website supports both directions with ltr or rtl as a default:

{
  theme: …,
  direction: {
    output: ['ltr', 'rtl'],
    defaultDirection: 'rtl',
  },
}

The output CSS contains rtl as default and ltr selector.

3. Need to configure the selector:

{
  theme: …,
  direction: {
    output: ['ltr', 'rtl'],
    defaultDirection: 'rtl',
    getDirSelector(dir: string) {
      // return your own selector that you'd like to use.
      return `:dir(${dir})`;
    }
  },
}

4. This is an edge case but it could happen. Don't need default output CSS, styles should be targeted with dir selector:

{
  theme: …,
  direction: {
    output: ['ltr', 'rtl'], // since `defaultDirection` is not specified, there is no default CSS output
  },
}

The CSS output will be:

[dir="ltr"] .hashed { … };
[dir="rtl"] .hashed { … };

[brijeshb42]

@siriwatknp One point to note here is that if your app only supports one direction (either ltr or rtl), then you'd also write your CSS that way, eg, for ltr, you may write:

css`
  margin-left: 10px;
  margin-right: 20px;
`

and same for rtl would be

css`
  margin-left: 20px;
  margin-right: 10px;
`

I don't think there would be a case where you are only supporting rtl but authoring CSS as ltr. That's why the options are defaultDirection to let the plugin know your default css authoring direction so that when you pass generateForBothDir as true, it can generate css for the other direction.

Also, if you are only supporting one direction, then there is nothing extra in the plugin configuration that you need to do.
The dir selector in the output css in only for wrapping the non-default direction. No need to do both [dir=ltr] and [dir=rtl].

[samuelsycamore]

@brijeshb42 please tag me for a copyediting review when adding documentation. 🙏 I'll open a new PR to iterate on these changes. Edit: @danilo-leal beat me to it 😁 #41576