Why does SASS compiler adds [dir] at the beginning?

Question

I am trying to compile Bootstrap 5.3 along with custom SASS files.

This is what I have

@import '../../node_modules/bootstrap/scss/bootstrap';

@import 'other/file.scss';

[data-bs-theme=light] .bg-default {
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

Oddily, last section generates the following CSS

[dir] [data-bs-theme=light] .bg-default {
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

I expected see the following CSS instead

[data-bs-theme=light] .bg-default {
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

It adds [dir] at the beginning. Why does it add [dir]? How can I prevent it from adding [dir] directive?

Having the [dir] seems to be preventing me from using the custom class. For example

<div class="bg-default">Hello world!</div>

does not change the color of the divider.

UPDATED

When background-color is used the [dir] seems to be added.

[data-bs-theme=light] {
    .bg-default {
        background-color: rgba(248, 249, 250, 1);
    }

    .text-bg-default {
        color: var(--bs-body-color);
        background-color: rgba(248, 249, 250, 1);
    }
}

The generated CSS looks like this

[dir] [data-bs-theme=light] .bg-default {
  background-color: rgb(248, 249, 250);
}
[data-bs-theme=light] .text-bg-default {
  color: var(--bs-body-color);
}

[dir] [data-bs-theme=light] .text-bg-default {
  background-color: rgb(248, 249, 250);
}

Answer 1

After much more digging, I found out the cause. My gulpfile.js uses gulp-postcss which adds the [dir] directive like this postcss([rtl()]).

Removing that stopped this behavior.