Stopped working since update 3.0.1 about vscode-autoprefixer

[mrmlnc]

As I understand it, the problem applies to environments that do not have settings for autoprefixer.

Looks like this is related to autoprefixer updates or something around it.

3.0.0
[email protected]
[email protected]
[email protected]

3.0.1
[email protected]
[email protected]
[email protected]

Most likely this is related to defaults settings in the browserslist.

With common settings this plugin works as expected:

// Place your settings in this file to overwrite default and user settings.
{
	"autoprefixer.options": {
		"browsers": [
			"last 4 versions",
			"ie >= 9",
			"> 5%"
		]
	}
}

So, in this case, this is the correct behavior. Just add the settings for the autoprefixer.

[ddawdler]

I can confirm this fixes the issue. Thank you for explaining! :)

[ddawdler]

I'm having the same issue with the same error. Is it possible to downgrade the extension on my machine?

Sure! To install the previous version, go to your extensions, click the little cog wheel icon on the Autoprefixer extension and choose "Install Another Version". I installed 3.0.0 and it works great on my machine.

[ddawdler]

Sure, here's an example of the CSS I most often prefix with the extension:

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    flex: 0 0 50%;
    order: 3;
    background: linear-gradient(to bottom, rgba(255, 183, 29, 0) 0%, rgba(255, 183, 29, .9) 65%, rgba(255, 183, 29, 1) 100%);
}

It doesn't make much sense but I've gathered all properties in one place. On neither of my machines I don't do any additional configuration to the extension. I use it as it is right after installation.

As for my files, they are simple CSS files. No post-processors, no webpack or anything like that.

Before updating to version 3.0.1 running autoprefixer on the CSS mentioned above gave me this result:

.test {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-flow: row wrap;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-flex: 0;
            flex: 0 0 50%;
    -webkit-box-ordinal-group: 4;
            order: 3;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 183, 29, 0)), color-stop(65%, rgba(255, 183, 29, .9)), to(rgba(255, 183, 29, 1)));
    background: linear-gradient(to bottom, rgba(255, 183, 29, 0) 0%, rgba(255, 183, 29, .9) 65%, rgba(255, 183, 29, 1) 100%);
}

On version 3.0.1 running the autoprefixer doesn't add any prefixes and does no changes to the styles. They are left as in the first example.

If this is of any help, I'm running Windows 10 with updated VS Code.

[mrmlnc]

Thanks for the issue!

Do you have a problem when the option is enabled?

[ddawdler]

Thank you for the quick reply!

I've enabled autoprefixer.findExternalAutoprefixer and the output gives me this:

[Autoprefixer]
Error: Failed to load autoprefixer library. Please install autoprefixer in your workspace folder using **npm install autoprefixer** or globally using **npm install -g autoprefixer** and then run command again.
	at c:\Users\ddawdler\.vscode\extensions\mrmlnc.vscode-autoprefixer-3.0.1\out\extension.js:2:1575513

I tried installing an autoprefixer globally using npm install -g autoprefixer but the issue persists.

[mrmlnc]

Looks like a bug. I'll try to reproduce this on my machine. Most likely related to 7b09fa2

[mrmlnc]

@ddawdler, Can you share your configuration of the plugin and file that has the problem?

[brunoaugusto]

I'm having the same issue with the same error. Is it possible to downgrade the extension on my machine?

[MarkLopresto]

I am having the same issue. The downgrade suggested above — to 3.0.0 — was able to restore the functionality before the upgrade.

macOS: 10.15.4
VS Code: Version: 1.45.0

[fac42]

Is it possible to use just "defaults" for the value in the "browsers" property? Or does the extension only work properly if you specify what browsers to target?

[bostiq]

I'm gonna sound like a total noob and say I still have no idea how to fix this:

what settings do I need to change? I don't have browserlist settings.

in VS I tried to put the settings above in autoprefixer.option of settings.json and/or in my workspace.json ...no luck

[ddawdler]

@fac42 @bostiq

I haven't had luck with not setting anything in the settings.json. I suggest checking this page for help on how to set up the extension.

Here's an example of the settings I use:

"autoprefixer.options": {
    
        "browsers": [
            "last 4 versions",
            "ie >= 9",
            "> 5%"
        ]
    }

[bostiq]

@ddawdler

hey, thank you... for whatever reason it worked this time.

if I can bother you more I have a question: I work solo so I don't have a lot of work-flow proper practices set up for me... I had to come up with my own, and they are probably wrong - I find compiling from sass and then autoprefixing, then beautifying and then minifying ... quite tedious... have you got a suggestion to streamlining/automatise these processes?

sorry if it sound like a dumb question... and I realise this is not the platform.

[StarlexDiax]

I'm having the same issue with the same error. Is it possible to downgrade the extension on my machine?

Sure! To install the previous version, go to your extensions, click the little cog wheel icon on the Autoprefixer extension and choose "Install Another Version". I installed 3.0.0 and it works great on my machine.

This actually worked, Thank you

[andyzu]

[Autoprefixer]
Error: Failed to load autoprefixer library. Please install autoprefixer in your workspace folder using npm install autoprefixer or globally using npm install -g autoprefixer and then run command again.
at /Users/andyzu/.vscode/extensions/mrmlnc.vscode-autoprefixer-3.0.1/out/extension.js:2:1575513

"autoprefixer.options": {
"browsers": [
"last 3 versions",
"> 5%",
"ie >= 8",
"firefox >= 20",
"chrome >= 35",
"Opera >= 11.5",
"safari >= 8",
"edge >= 90",
"and_uc >= 12",
"and_qq >= 10",
"iOS >= 6",
"android >= 4.4",
]
},

1、npm i -D autoprefixer
2、npm i -g autoprefixer
3、npm i -g postcss
4、npm i -g postcss-loader
5、npm i -g node-sass postcss-cli clean-css-cli browserslist

The error is still there, how can I fix it? THANKS!
I also chose to downgrade to 3.0.0, prompting me：
[object Object] is not a PostCSS plugin。