mask-image generates non workable css

[accmail]

Hello, if i put this "css" code inside my scss and save

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
                    color-stop(0%,  rgba(0, 0, 0, 0))
                    color-stop(100%,  rgba(0, 0, 0, 1)));
                -o-mask-image:linear-gradient(linear, left top, left bottom, 
                    color-stop(0%,  rgba(0, 0, 0, 0)),
                    color-stop(100%,  rgba(0, 0, 0, 1)));
                mask-image: linear-gradient(linear, left top, left bottom, 
                    color-stop(0%,  rgba(0, 0, 0, 0)),
                    color-stop(100%,  rgba(0, 0, 0, 1)));

it generates this code which doesn't work

  -o-mask-image: linear-gradient(linear, left top, left bottom,
 color-stop(0%, transparent), 
color-stop(100%,rgba(0, 0, 0, 1)));
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(linear),
 color-stop(0%, transparent), 
color-stop(100%,rgba(0, 0, 0, 1)));
  -webkit-mask-image: linear-gradient(linear, left top, left bottom,
 color-stop(0%, transparent), 
color-stop(100%,rgba(0, 0, 0, 1)));
          mask-image: -webkit-gradient(linear, left top, left bottom, from(linear),
 color-stop(0%, transparent), 
color-stop(100%,rgba(0, 0, 0, 1)));
          mask-image: linear-gradient(linear, left top, left bottom, 
 color-stop(0%, transparent), 
color-stop(100%,rgba(0, 0, 0, 1)));

i tried
https://www.sassmeister.com
and there it generates normaly and it works

  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), 
color-stop(100%,rgba(0, 0, 0, 1));
  -o-mask-image: linear-gradient(linear, left top, left bottom, color-stop(0%, transparent), 
color-stop(100%,rgba(0, 0, 0, 1));
  mask-image: linear-gradient(linear, left top, left bottom,color-stop(0%, transparent), 
color-stop(100%,rgba(0, 0, 0, 1));

[boyum]

Hi!
It seems you're using the extension's autoprefixer option. Could you send your exact liveSassCompiler settings, so we could use it in our tests? Perhaps a simple example as well.

I have now tried three things: Copying your CSS, copying your CSS and compiling it with this extension, and compiling your CSS with Sassmeister. I admit, my knowledge of mask-image is very limited, but I can't seem to get any of the versions to work.

As a side note, the Sassmeister and the live-sass-compiler versions are equal (only depending on your autoprefixer settings whether or not the -o- version is rendered).

[ritwickdey]

yes! as @boyum said...!!! Autoprefixer will be added depending on browserslist

[accmail]

I think i used the beginners settings

{
    "liveSassCompile.settings.formats":[
       {
           "format": "expanded",
           "extensionName": ".css",
           "savePath": "/css"
       }
   ],
   "liveSassCompile.settings.excludeList": [
      "**/node_modules/**",
      ".vscode/**"
   ],
   "liveSassCompile.settings.generateMap": true,
   "liveSassCompile.settings.autoprefix": [
       "> 1%",
       "last 2 versions"
   ]
}

ok i made a mistake the code i posted wasn't right i have more color-stop and didn't want it to by long so i removed them and didn't try the code

this is what i have in my SCSS

         -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
                color-stop(0%,  rgba(0, 0, 0, 0)),
                color-stop(100%,  rgba(0, 0, 0, 1)));
            -o-mask-image:linear-gradient(linear, left top, left bottom, 
                color-stop(0%,  rgba(0, 0, 0, 0)),
                color-stop(100%,  rgba(0, 0, 0, 1)));
            mask-image: linear-gradient(linear, left top, left bottom, 
                color-stop(0%,  rgba(0, 0, 0, 0)),
                color-stop(100%,  rgba(0, 0, 0, 1)));

this is what it generates to my CSS file

-o-mask-image: linear-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, black));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(linear), color-stop(top, left), color-stop(bottom, left), color-stop(color-stop(0%, transparent)), to(color-stop(100%, black)));
-webkit-mask-image: linear-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, black));
        mask-image: -webkit-gradient(linear, left top, left bottom, from(linear), color-stop(top, left), color-stop(bottom, left), color-stop(color-stop(0%, transparent)), to(color-stop(100%, black)));
        mask-image: linear-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, black));

[boyum]

This seems to be a problem with autoprefixer and should be addressed there. In the meantime, I would suggest disabling autoprefixer in your project (set as null or remove "liveSassCompile.settings.autoprefix" entirely).