`o-` and `ms-` CSS variables prefix

[julien-deramond]

I'm not really sure of the source of the issue here but I ran into something strange related to o- prefix used in CSS variables: var(--o-*).

We have this rule:

.example {
    mask-image: var(--o-close-icon);
}

that is not transformed into:

.example {
    mask-image: var(--o-close-icon);
}

and should be rather:

.example {
    -webkit-mask-image: var(--bs-close-icon);
            mask-image: var(--bs-close-icon);
}

For all other mask-image rules in our project we have the -webkit-mask-image addition.

Our .browserslistrc is a bit complicated but a simple one like the default one in https://autoprefixer.github.io/ shows the same thing.

Analysis

IMO the issue comes from our prefix used in those CSS variables. We are Orange so we use the o- prefix. It seems that Autoprefixer thinks our o- corresponds to Opera at some point. I'm saying that because I've tested a lot of prefixes that work, but another use case that doesn't work is with the ms- prefix:

.example {
    mask-image: var(--ms-close-icon);
}

How to reproduce

1. Go to https://autoprefixer.github.io/ (let the default options)
2. Copy the following code

.example {
    mask-image: none;
}

.example {
    mask-image: var(--bs-close-icon);
}

.example {
    mask-image: var(--o-close-icon);
}

.example {
    mask-image: var(--ms-close-icon);
}

Result

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.example {
    -webkit-mask-image: none;
            mask-image: none;
}

.example {
    -webkit-mask-image: var(--bs-close-icon);
            mask-image: var(--bs-close-icon);
}

.example {
    mask-image: var(--o-close-icon);
}

.example {
    mask-image: var(--ms-close-icon);
}

Expected

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.example {
    -webkit-mask-image: none;
            mask-image: none;
}

.example {
    -webkit-mask-image: var(--bs-close-icon);
            mask-image: var(--bs-close-icon);
}

.example {
    -webkit-mask-image: var(--o-close-icon);
    mask-image: var(--o-close-icon);
}

.example {
    -webkit-mask-image: var(--ms-close-icon);
    mask-image: var(--ms-close-icon);
}

[ai]

I will look today or tomorrow.

[ai]

Very interesting case. Fixed 878d82c

[ai]

The fix was released in 10.4.13.