Svelte: CSS Selectors with direction rtl falsely marked as unused

[angelozehr]

https://svelte.dev/repl/7c9308930e8e4a3c817a1ba232acae31?version=3.4.4

I want to make my app right-to-left compatible. For this reason I need to add rtl-specific styling, but svelte marks my selectors as unused and removes them:

h1 {
    color: blue;
}
h1[dir="rtl"] {
    color: red;
}

becomes:

h1.svelte-r7z1mq{color:blue}

[sidbentifraouine]

Hi,
Shouldn't you add an rtl like so:

<h1 dir="rtl">Hello {name}!</h1>

To obtain this:

body{direction:rtl}
h1.svelte-r7z1mq{color:blue}
h1[dir="rtl"].svelte-r7z1mq{color:red}

[Conduitry]

Is dir="rtl" a standard attribute that could be added to any element at any time, without any action on Svelte's part? If so, scoped styles are not the right place for this, as these are intended for styles that Svelte can determine at compile time where they might be applicable. You could wrap your h1 in another element and then for example use the selector .other-element > :global(h1[dir=rtl]) and this will match all instances of h1[dir=rtl] (unscope) directly within (scoped) instances of .other-element.

Or, if the dir attribute is something that you can declaratively control from within Svelte, you can just add a dynamic attribute dir={something} and Svelte will leave in (and scope) the h1[dir=rtl] selector.

[angelozehr]

You were right, sorry for not seeing this. When I add dir="rtl" to the <h1> it works perfectly.

The following selector solved my problems:

:global(html[dir="rtl"] h1) {
    color: red;
}