Bootstrap 5.2 LTR and RTL at the same time (scss with Laravel vite)

[Ahmed-Elrayes]

Hello, i'm trying to use bootstrap with both RTL and LTR in the same scss file (as described in here LTR and RTL at the same time

/* rtl:begin:options: {
  "autoRename": true,
  "stringMap":[ {
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  } ]
} */
.ltr {
  @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

But for some reason it doesn't seem to be working, i'm not sure whether i'm using it incorrectly or smth
as in Laravel all what we need to build the css..etc is using this command npm run build but it doesn't build .rtl class
so i thought i might need to implement this in my postcss.config.js

const rtlcss = require("rtlcss");
module.exports = {
    plugins: [
        rtlcss(),
    ]
}

this one works but there is no more .ltr class working,instead it shows errors in css

so there is now only .rtl but fully incorrect
as you can see

This is how it works like in .ltr (without using rtlcss())

Actually i should post this issue in Laravel or Vite but no one seem to be able to help, hope fully you can find a solution for me.

[MohammadYounes]

Based on this image

It seems you placed this in the CSS file instead of the SCSS. As the output file should prepend .ltr / .rtl to every selector you have.

[Ahmed-Elrayes]

nah actually it's a .scss file as you can see

PS: i tried multiple cases for .ltr
used html.ltr and [dir=ltr] and .ltr
but all get the same thing.

[MohammadYounes]

Check the output CSS file. What content does it have ?

[Ahmed-Elrayes]

since the file is too big i will attach it.
https://drive.google.com/file/d/1lnjSlRAAuXOHeGdF6MHWEx0l0GNpVPvG/view?usp=sharing

[MohammadYounes]

You have a bad CSS at the beginning of the output file

[Ahmed-Elrayes]

as you see, i'm only compiling the bootstrap 5.2 from node modules.

[MohammadYounes]

disable rtlcss and check the output file.

[Ahmed-Elrayes]

when i disable it, it works properly.

[MohammadYounes]

I don't have your setup, You need to debug the source of the issue. As I doubt this has anything to do with rtlcss.

[Ahmed-Elrayes]

thought so, i don't think it will work like that, thanks at least is there a way to get rtl scss data? because i use custom variables so i wanna combine it like i can combine bootstrap normally, doesn't matter whether i will create two separate css files or not.

[Ahmed-Elrayes]

btw, rtlcss automatically work even if i don't add this string map.

/*rtl:begin:options: {
  "autoRename": true,
  "stringMap":[ {
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  } ]
} */

.ltr{
@import "file";
}
/*rtl:end:options*/

[Ahmed-Elrayes]

ok, i found a solution i will share here in case someone got the same issue.

inside postcss config file i added these

const postcssRTLCSS = require('postcss-rtlcss');
const {Mode, Source, Autorename} = require('postcss-rtlcss/options');

// inside the plugins i added postcssRTLCSS()
module.exports = {
    plugins: [
        postcssRTLCSS(),
    ]
}

and in my .scss file i removed the class .ltr

and now it works great both in the same file and the string map works great.

[abumosaab]

Thanks. Seems to be working with Laravel...

First install postcssRTLCSS using:

npm install -D postcss-rtlcss

Then modify vite.config.js file to be like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import postcssRTLCSS from 'postcss-rtlcss'; // <<< HERE

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        postcssRTLCSS() // <<< AND HERE
    ],
});

Of course you need to rebundle assets after each change using:

# Run the Vite development server...
npm run dev
 
# Build and version the assets for production...
npm run build

[Ahmed-Elrayes]

as for now it works me like that #326 (comment)