Add PostCSS-RTLCSS approach to the documentation

[elchininet]

Description

This pull request modifies the LTR and RTL at the same time section of the documentation to explain how to achieve that goal using PostCSS-RTLCSS.

Motivation & Context

Searching topics that included PostCSS-RTLCSS on the Internet, I found this StackOverflow question asking how to achieve LTR and RTL in Bootstrap at the same time, and the most voted answer mentioned PostCSS-RTLCSS as a better alternative to the instructions given in the documentation.

As I am the manintainer of the PostCSS-RTLCSS plugin, I opened this discussion explaining the benefits of achieving LTR and RTL at the same time using postcss-rtlcss instead. Then as an outcome of the discussion, it was agreed to mention the plugin in the respective section in the documentation.

Type of changes

• Documentation enhancement

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-39863--twbs-bootstrap.netlify.app/docs/5.3/getting-started/rtl/#ltr-and-rtl-at-the-same-time

Related issues

https://github.com/orgs/twbs/discussions/39726

[julien-deramond]

Thanks for the PR @elchininet!
The explanation looks good to me and has the right level of information; not too much, but enough to understand how PostCSS RTLCSS could be embedded in one's project.
I'll let a native English speaker double-check the wording and also pinging @ffoodd for feedback (does it look OK to you too?).

[ffoodd]

Seems great! Thanks for the contribution.

The third point makes me wonder: could we move rtl:remove and rtl:ignore directives to their block version, to ease the move?

This shouldn't have any impact on our side.

[elchininet]

Hi @ffoodd,

The third point makes me wonder: could we move rtl:remove and rtl:ignore directives to their block version, to ease the move?

What do you mean moving them to their block version?

I have plans of making this transparent for clients. As the intention of the RTLCSS directive is the same (do not create an RTL counterpart in the new stylesheet), what I want to achieve is that if someone uses a remove directive, this is translated to an ignore directive behind the scenes. If this is implemented in some moment, it is possible to remove the third point in the Important things to take into account callout warning.

But just let me know if you think that I should change that point or remove something from it at the moment.

Regards

[ffoodd]

My point is that moving directives as recommendend in your third point can be easily achieved un Bootstrap.

If we do it, would it ease your plugin usage?

[elchininet]

My point is that moving directives as recommendend in your third point can be easily achieved un Bootstrap.
If we do it, would it ease your plugin usage?

Ah, got it. I would not change anything in the Bootstrap source code because rtl:ignore directives also exist on RTLCSS and they have a different functionality than the rtl:remove ones. At the moment Bootstrap uses the rtl:remove directives to avoid including specific rules into the *.rtl.css bundles. If they are replaced with rtl:ignore ones, those rules will be included in the *.rtl.css bundles but without flipping and I think that is not the intention.

[ffoodd]

Ah, got it too. Thanks, that's clearer 👌