Example of how to setup postcss-rtlcss with react-scripts (and possibly craco)

[andoks]

I attempted and failed to setup postcss-rtlcss for processing bootstrap SCSS files and various custom .module.scss files in a create-react-app project where craco already is being used (and for completeness sake, we use react-bootstrap). I would love to have an example or recipe for enabling use of postcss-rtlcss that integrates well with the above, perhaps as a complement to the note about using postcss-rtlcss in bootstrap

https://github.com/react-bootstrap/react-bootstrap/issues/6794

[andoks]

Found that I only needed to configure my .cracorc.js like the following source and ensuring I took the various scss gotchas into account

const postCssRtl = require("postcss-rtlcss");

module.exports = {
    style: {
        postcss: {
            loaderOptions: {
                postcssOptions: { 
                    plugins: [postCssRtl()],
                },
            },
        },
    },
};

App.module.scss

.test {
    background-color: aqua !important #{"/*!rtl:pink*/;"};
    padding-left: 10px !important;
}

[elchininet]

Hi @andoks, So, you have figured it out already, right? Regards

[andoks]

@elchininet: yes, thank you. It might be beneficial to add an example of how to configure postcss-rtlcss with craco to your docs, in which case, feel free to copy the code from above, although I specifically do not need it anymore :smile:

[elchininet]

Hi @andoks, I have not worked with craco before, if you make a minimum reproducible repo with your implmentation, I would be happy to include it in the docs. Regards