safeBothPrefix does not prefix unknown CSS properties

[jimmy-guo]

We are using a polyfill for some experimental CSS properties such as animation-timeline. (The specific polyfill doesn't matter here, but just for context, this specific polyfill requires that the new experimental CSS properties be next to the other animation properties.)

Reproduction: https://elchininet.github.io/postcss-rtlcss/#661086140c525

Input

.example1 {
    transform: translate3d(-21vh, 0, 0);

    view-timeline: --row-a block;
    animation-range: cover 0% cover 100%;

    animation-timing-function: var(--timing-function);;
    animation-name: slide-in;
} 

.example2 {
    transform: translate3d(-21vh, 0, 0);

    @media (prefers-reduced-motion: no-preference) {
      view-timeline: --row-a block;

      animation-timing-function: var(--timing-function);
      animation-name: slide-in;
    }
}

Output:

.example1 {

    view-timeline: --row-a block;
    animation-range: cover 0% cover 100%;
}

[dir] .example1 {

    animation-timing-function: var(--timing-function);;
    animation-name: slide-in;
}

[dir="ltr"] .example1 {
    transform: translate3d(-21vh, 0, 0);
}

[dir="rtl"] .example1 {
    transform: translate3d(21vh, 0, 0);
}

 .example2 {
    @media (prefers-reduced-motion: no-preference) {
      view-timeline: --row-a block;

      animation-timing-function: var(--timing-function);
      animation-name: slide-in;
    }
}

 [dir="ltr"] .example2 {
    transform: translate3d(-21vh, 0, 0)
}

 [dir="rtl"] .example2 {
    transform: translate3d(21vh, 0, 0)
}

In example1, notice how view-timeline is not prefixed with safeBothPrefix because — if I'm reading the code correctly — it is not a known CSS property listed here.

For some reason, in example2, wrapping the entire block with a media query seems to keep them together.

Would it be possible to support safeBothPrefix on unknown CSS properties?

Thanks!

[elchininet]

Hi @jimmy-guo,

There are two issues in the reproduction example that you provided.

1. In example 2, safeBothPrefix is not prefixing the rules inside the media-query

2. In example 1, the aliases option, should also be taken into account for safeBothPrefix but it is not being taken into account. So, if this is fixed, you could use the aliases option to treat view-timeline as animation-name or as any other property that is taken into account for the safeBothPrefix.

I‘ll try to work in those fixes when I have some time. Letting this issue open until it is solved.

Regards

[elchininet]

@jimmy-guo,

About the example 2. I am checking that it fails to recognise the syxtax. For example, the next one is parsed without issues. What happens is that it expects to find rules inside atRules instead of declarations.

Input

@media (prefers-reduced-motion: no-preference) {
    .example2 {
        text-align: left;
        view-timeline: --row-a block;

        animation-timing-function: var(--timing-function);
        animation-name: slide-in;
    } 
}

Output

@media (prefers-reduced-motion: no-preference) {
    .example2 {
        view-timeline: --row-a block;
    }

    [dir] .example2 {

        animation-timing-function: var(--timing-function);
        animation-name: slide-in;
    }

    [dir="ltr"] .example2 {
        text-align: left;
    }

    [dir="rtl"] .example2 {
        text-align: right;
    } 
}

[elchininet]

Hi @jimmy-guo,

The issue is solved in version 5.1.1 of the library. You need to use the aliases option to achieve what you need:

// Options
{
    aliases: {
        'view-timeline': 'animation-name' // or any other property that you want to alias
    }
}

About what happens with the example 2, as explained before, that is a specific SASS syntax that the library doesn't understand. It would need to do the same as the SASS parser and this is not the intention of this postcss plugin. Even if this plugin supports basic CSS nesting, it is recommended that you compile your SASS code to CSS before running postcss-rtlcss.

Regards

[elchininet]

Hi @jimmy-guo, Just to inform you that with the version 5.5.0 of the plugin, the example 2 is fixed. Regards