postcss / autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use
https://twitter.com/autoprefixer
MIT License
21.66k stars 1.26k forks source link

Autoprefixer changes value for mask-repeat #1502

Closed Maclay74 closed 1 year ago

Maclay74 commented 1 year ago

Probably I'm doing something wrong, but for some reason for this property

mask-repeat: no-repeat;

I get

-webkit-mask-repeat:no-repeat;
mask-repeat:initial;

So Safari isn't fine with it. It ignores -webkit- property and picks up initial instead

I don't understand why no-repeat gets replaced by initial, when no-repeat is a valid according to the specification?

ai commented 1 year ago

Sorry, it is not Autoprefixer.

  1. Autoprefixer always adds prefixes above the unprefixed version.
  2. The current output for mask-repeat: no-repeat is -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;

Very likely you have another tool in build chain doing that.

Maclay74 commented 1 year ago

Autoprefixer always adds prefixes above the unprefixed version.

No it doesn't.

.test-class {
    mask-repeat: no-repeat;
}

.test-second {
    mask-image:
            linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%),
            linear-gradient(#fff 0 0);
    mask-composite: exclude;
    mask-size: calc(100% - 4px) 140px, calc(100% - 4px) 140px, auto auto;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: 2px 2px, 2px calc(100% - 2px), 0 0;
}

is transformed into

.test-class {
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

.test-second {
    -webkit-mask-image:
            linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%),
            linear-gradient(#fff 0 0);
            mask-image:
            linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%),
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    -webkit-mask-size: calc(100% - 4px) 140px, calc(100% - 4px) 140px, auto auto;
            mask-size: calc(100% - 4px) 140px, calc(100% - 4px) 140px, auto auto;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 2px 2px, 2px calc(100% - 2px), 0 0;
            mask-position: 2px 2px, 2px calc(100% - 2px), 0 0;
}

by npx postcss test.css --use autoprefixer -d ./, so there is no additional tools in the chain

ai commented 1 year ago

Yes, it is exactly what I am talking about. There is no mask-repeat:initial in your output from Autoprefixer.

Maclay74 commented 1 year ago

Yes, my bad. Sorry for the hassle.