Ignored `-webkit-`, `-ms-` prefix on `@-moz-document` rules for userstyles

[denis-g]

NodeJs v10.15.2 NPM v6.13.1

I'm testing postcss with autoprefixer, and also gulp-autoprefixer. browserslist setting is default.

Source scss:

body {
    appearance: none;
    user-select: none;
}

@-moz-document domain('example.com') {
    body {
        appearance: none;
        user-select: none;
    }
}

Output css:

body {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

@-moz-document domain('example.com') {
    body {
        -moz-appearance: none;
             appearance: none;
        -moz-user-select: none;
             user-select: none;
    }
}

Same result on http://autoprefixer.github.io/

[ai]

Good idea. Do you want to send PR?

[ai]

@denis-g seems like you need to fix this method https://github.com/postcss/autoprefixer/blob/master/lib/prefixer.js#L79-L107

[ai]

@denis-g what is a problem here?

Current output seems like OK to me:

body {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

@-moz-document domain('example.com') {
    body {
        -moz-appearance: none;
             appearance: none;
        -moz-user-select: none;
             user-select: none;
    }
}

[silverwind]

This is actually a bad idea, at least with stylus which parsers those @-moz-document into site-specific blocks and applies the contained styles on all browsers, not just Firefox.

[ai]

@silverwind so stylus uses @-moz-document at-rule, but then require -webkit- prefixes inside? Why they do it? Do we need to report them an issue?

[silverwind]

@-moz-document is stripped entirely from the resulting style. What remains can and should be prefixed for all browsers.

[ai]

Did stylus strip the inner content of @-moz-document too or just unwrap the content?

[silverwind]

Just unwrap to my understanding. Every body of a @-moz-document is put into its own "section" which finally results in a <style> tag being added to the document for each "section" if the @-moz-document conditions match the current URL.

The old and now defunct Stylish extension for Firefox did it differently, it did not unwrap as the browser supported @-moz-document natively. But to my knowledge this mechanism is no longer in use anywhere.

[silverwind]

Anyways, my point is autoprefixer should not do any special processing for @-moz-document as cutting out non-moz prefixes would be detrimental to other browsers.

[ai]

Just unwrap to my understanding

I think we should report an issue to Stylish. It should not be just unwrapped because of the problem like this.

If Stylish developers will say that there is not any other way I can change Autoprefixer behavior for this specific case.

Anyways, my point is autoprefixer should not do any special processing for @-moz-document as cutting out non-moz prefixes would be detrimental to other browsers.

Right now Autoprefixer does not put -moz- prefixes to @-webkit-keyframes and any cases like this. To have different behavior in this case we need a good reason.