mrmlnc / vscode-autoprefixer

:electric_plug: Parse CSS and add vendor prefixes automatically.

VS Code Plugin for Autoprefixer

This plugin for VS Code provides an interface to autoprefixer.

Donate

If you want to thank me, or promote your issue.

❤️ I will be glad to see your support and PR's.

Install

Plugin installation is performed in several stages:

1. Press F1 and select Extensions: Install Extensions.
2. Search and choose vscode-autoprefixer.

See the extension installation guide for details.

Usage

Press F1 and run the command named Autoprefixer: Run.

Supported languages

• CSS
• Less
• SCSS

Supported settings

autoprefixer.findExternalAutoprefixer

• Type: Boolean
• Default: false

Use an external Autoprefixer package instead of built-in version.

You must install Autoprefixer using:

• npm i -D autoprefixer
• npm i -g autoprefixer

About first run with this option

When you first start the plugin is looking for an installed Autoprefixer. Therefore, the first run may take a long time. Subsequent runs are much faster.

autoprefixer.options

• Type: Object
• Default: {}

Any options supported by autoprefixer — documentation.

autoprefixer.formatOnSave

• Type: Boolean
• Default: false

Add vendor prefixes to CSS when you save a file.

autoprefixer.ignoreFiles

• Type: Array
• Default: []
• Example: ["variables.less", "mixins/**/*"]

An optional array of glob-patterns to ignore files.

Keyboard shortcuts

For changes keyboard shortcuts, create a new rule in File -> Preferences -> Keyboard Shortcuts:

{
  "key": "ctrl+shift+c",
  "command": "autoprefixer.execute"
}

Changelog

See the Releases section of our GitHub project for changelogs for each release version.

License

This software is released under the terms of the MIT license.

vscode-autoprefixer's Issues

Not working in VS Code

Environment

• VS Code version: 1.56.0 insider
• Autoprefixer plugin version: v3.0.1
• Operating System: Windows 10

Actual behavior

When try to run prefix on css file it displays this message.

Expected behavior

…

Steps to reproduce

Autoprefixer config

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

Code sample

// Paste your CSS code that has problems with formatting.

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-autoprefixer
• Extension Version: 3.0.0
• OS Version: Windows_NT x64 10.0.18363
• VSCode version: 1.42.1

⚠️ Make sure to attach this file from your home-directory:
⚠️C:\Users\effit\mrmlnc.vscode-autoprefixer-unresponsive.cpuprofile.txt

Find more details here: https://github.com/microsoft/vscode/wiki/Explain-extension-causes-high-cpu-load

VS Code autoprefix extension - unknown browser query

Is it in plans to update to the latest commands from Browserslist?

The valid command below is not supported by VS Code extension:

{
"autoprefixer.browsers": [
        "cover 99.5%"
    ]
}

Returns:

[Autoprefixer]

BrowserslistError: Unknown browser query `cover 99.5%`

Feedback from Autoprefix contributors - postcss/autoprefixer#1154

stylus

can this plugin support stylus ?

LitElement support

Love this tool what would make it even better is if we could support LitElement which has a styles() getter in a js.

https://lit-element.polymer-project.org/guide/styles

Update built-in Autoprefixer

Not Working

The Plugin is completely not working 🤔 it does nothing with CSS or SCSS files, I think it was since the last update 🤔

Infinite CSS prefixing when using a formatter

Environment

• VS Code version: 1.53.2
• Autoprefixer plugin version: v3.0.1
• Operating System: Windows 10

Actual behavior

See here

Expected behavior

In order to prevent adding duplicates on every save, CSS AutoPrefixer should not consider the newline character when checking if a rule already exists.

Steps to reproduce

When using Format On Save for Prettier and CSS AutoPrefixer...

1. Enter a line of CSS that would cause Prettier to add indentation to CSS-AutoPrefixer's code
2. Click save

Autoprefixer config

Default config, no modifications

Code sample

.viewport .poster {
	width: var(--poster-width);
	height: var(--poster-height);
	display: block;
	transition: filter 0.3s ease, transform 0.3s ease, opacity 2.5s;
	z-index: 6;
	position: relative;
}

[feature request] Autoprefix selection

Would be great to be add a command to apply Autoprefixer to the currently highlighted range, rather than the whole document (ie: have both Autoprefix file and Autoprefix selection available in the command palette). Seems to be a fairly common pattern in extensions, and would allow you to use vscode-autoprefixer on style blocks in unsupported files (HTML, JS, etc).

Example use-case that I have for this: wanting to use vscode-autoprefixer on the style blocks in components (written in JS files). I actually see this as the primary benefit of having Autoprefixer as an extension - I can pass regular CSS files through my PostCSS buildstep of choice, but that gets really tricky when writing single file components in HTML/JS.

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-autoprefixer
• Extension Version: 2.2.0
• OS Version: Darwin x64 18.2.0
• VSCode version: 1.32.3

⚠️ Make sure to attach this file from your home-directory:

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

Grid: true

Hello,

I didn't find the settings to activate Grid Layout in vscode-autoprefixer (should be grid: true)

Is it possible ?

Don't prefix SCSS only CSS

I use your awesome tool with visual code. I want not i autoprefix my scss files, but only my miified css file.. Is there a way?
I'm not using gulp or grunt, just the extension in VC.

Thanks, Keviin :)

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-autoprefixer
• Extension Version: 2.2.0
• OS Version: Windows_NT x64 10.0.18363
• VSCode version: 1.41.1

⚠️ Make sure to attach this file from your home-directory:
⚠️C:\Users\mario\mrmlnc.vscode-autoprefixer-unresponsive.cpuprofile.txt

Find more details here: https://github.com/microsoft/vscode/wiki/Explain-extension-causes-high-cpu-load

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-autoprefixer
• Extension Version: 2.2.0
• OS Version: Darwin x64 18.5.0
• VSCode version: 1.33.0

⚠️ Make sure to attach this file from your home-directory:
⚠️/Users/vdrathavi/mrmlnc.vscode-autoprefixer-unresponsive.cpuprofile.txt

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

how can i use it in html file

how can i use it in html file

autoprefixer.browsers setting seems ignored

Hi. First, thanks for this extension.

I'm trying to autoprefix a file using this settings:
"autoprefixer.browsers": [ "last 4 versions", "ie >= 9", "> 5%" ]

But looks like the plugin is ignoring them.

For example I have this line:
transform: translate(0,0);

By the options above, the end result should be something like this:

-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);

But I get this result:

-webkit-transform: translate(0, 0);
transform: translate(0, 0);

Code version 1.3.1 Windows 7 64bits
Autoprefixer version 6.3.7

on visual studio the prefix is stripped out

hi, on visual studio when i insert a css with prefix the plugin remove them... why ?

Enable support for .browserslistrc

I don't think this extension is picking up on my .browserslistrc file. Is there any way to implement custom browser list?

Feedback from the marketplace

At the of writing, this extension behaves unexpectedly when Visual Studio Code's auto-save feature is enabled, specifically when focus is lost ( setting.json > "files.autoSave": "onFocusChange" ). When making a change to a .less file, and then switching tabs, often results in the .less file's content replacing the other tab's contents. When this happens, undoing (Ctrl-Z) works, though.

How to set auto prefixer to work only when saving the document?

I would like auto prefixer to work ONLY when I save the document and I didn't find that option yet.

I am asking because what happens in VSCode is that every time I type ,all the prefixes jumps and it is very difficult to ctrl+z them because they are regenerated on keyup or keydown.

window 10 autoprefixer It doesn't work

Environment

• VS Code version:
  Version: 1.48.2 (system setup)
  Commit: a0479759d6e9ea56afa657e454193f72aef85bd0
  Date: 2020-08-25T10:13:11.295Z
  Electron: 7.3.2
  Chrome: 78.0.3904.130
  Node.js: 12.8.1
  V8: 7.8.279.23-electron.0
  OS: Windows_NT x64 10.0.18363
• Autoprefixer plugin version:
  2.2.0
• Operating System:

Actual behavior

[Autoprefixer]

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.

Installed according to the prompt

Expected behavior

…

Steps to reproduce

Autoprefixer config

"autoprefixer.browsers": [
"ie >= 6", //ie6以上
"firefox >= 8",
"chrome >= 24",
"Opera>=10"
],
"autoprefixer.findExternalAutoprefixer": true

// Paste your autoprefixer configuration here.

Code sample

// Paste your CSS code that has problems with formatting.

Used this plugin for CSS files in one project and it seems it can not open it in Firefox Mozilla

Looks like it is not able to open in Mozilla browser, it opens up but witouth any .css files. The file is on an external disk. Is there a way to fix it?

Thank you in advance.

Kind regards,

Klara Z.

Comments still being converted from double-slash to star-slash

Re-opening issue originally discussed in #91.

Unfortunately, this does not appear to be resolved.

• I have disabled all VSCode extensions except for Autoprefixer
• I have upgraded the Autoprefixer extension to 2.1.1
• I have tried using an external version of autoprefixer by installing it via NPM and setting autoprefixer.findExternalAutoprefixer to true in VSCode
• I have verified that the issue is not related to autoprefixer by comparing the output of the extension and postcss-cli + autoprefixer

SCSS:

// Comment
body {
    display: flex;
    // color: #000;
}

Processed using postcss-cli and autoprefixer:

// Comment
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    // color: #000;
}

VSCode with Autoprefixer plugin (2.0.0 & 2.1.1):

/* Comment*/

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* color: #000;*/
}

This also breaks SASSDoc "triple-slash" comments (again, no issue using postcss-cli + autoprefixer).

Before:

/// Comment
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /// color: #000;
}

After

/*/ Comment*/
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /*/ color: #000;*/
}

My hunch is that the postcss-safe-parser plugin used by your extension is the issue, fixing what it sees as invalid CSS comments ("//" and "///") and converting them to valid CSS comments. That makes sense when compiling to CSS, but not when autoprefixing LESS, Stylus, or SASS/SCSS code in an editor.

Thanks again for taking a look at this!

Stopped working since update 3.0.1

Since the last update (3.0.1) the extension doesn't work. I've tested on two different computers, and running the Autoprefix command doesn't seem to do anything. The file registers a change and can be saved, but nothing happens to the code. I can confirm that reverting to the previous version fixes the issue.

Please tell me if I can provide any more useful information. The Developer Tools console doesn't register anything.

[feature request] Support more of autoprefixer's options in configuration

Some of the options in autoprefixer are currently unsupported in this VSCode extension. I would like to submit a feature request for those to be supported. Especially cascade since we don't want that in our style guide. :)

https://github.com/postcss/autoprefixer#options

Run with YARN globally installed autoprefixer

How do I add an option to look for the external autoprefixer in the yarn global modules? Thanks

no longer works?

Hi, As far as I can tell this will no longer work as autoprefixer uses postcss-cli globally. I receive command 'autoprefixer.execute' not found

Comments being converted from double-slash to star-slash

Just installed v2.0.0 and noticed that double-slash comments are being converted to star-slash comments in sass/scss files by this extension.

Before:

// My comment

After:

/* My comment*/

This doesn't happen when using the Autoprefixer demo here: https://autoprefixer.github.io/. Perhaps updating the version of autoprefixer used by this extension from 6.5.0 (according the the package.json file) to the latest (7.1.2) will address the issue? If not, is there a setting that can be added to prevent this from happening?

Thanks!

ignore prefix on sass files but work on css compiled files

hello,
it's a wonderful plugin that help a lot. Is it possible for me to disable the prefixer on my sass files but still have it prefix my css compiled files.

Hello, TypeScript

Failed to load autoprefixer library

It is not showing any error or doing anything when Autoprefixer: Find External Autoprefixer is false. When it is true, it show error
[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 /home/hasinoor/.vscode/extensions/mrmlnc.vscode-autoprefixer-3.0.1/out/extension.js:2:1575513

My VSCode details is:

Version: 1.44.2
Commit: ff915844119ce9485abfe8aa9076ec76b5300ddd
Date: 2020-04-16T17:50:03.709Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Linux x64 5.4.0-28-generic snap

Node version: v12.16.3
OS: Ubuntu 20.04 LTS

Note: sublime-autoprefixer is also not working. It may be problem of any dependency.

Autoprefixer attempting to run on all files

• Issue type: bug
• Extension Name: vscode-autoprefixer
• Extension Version: 3.0.0
• OS Version: MacOS Catalina 10.15.3
• VSCode Version: 1.43.2

I'm finding that the autoprefixer is attempting to run on all files, instead of just CSS/SCSS. It's started doing this only in the last couple of months (not sure when exactly sorry).

I can still run the prefixer with ctrl+shift+C but cannot use Format On Save at the moment, as it throws up this error every time I'm saving a file that isn't CSS/SCSS (screenshot below):

[Autoprefixer]
Cannot execute Autoprefixer because there is not supported languages. Supported: LESS, SCSS, PostCSS and CSS.

Any help would be appreciated, cheers.

border-radius not render

Hello,

When i'm run Autoprefixer: Run
css: border-radius not working

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-autoprefixer
• Extension Version: 2.2.0
• OS Version: Darwin x64 18.5.0
• VSCode version: 1.33.1

⚠️ Make sure to attach this file from your home-directory:
⚠️/Users/richard/mrmlnc.vscode-autoprefixer-unresponsive.cpuprofile.txt

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-autoprefixer
• Extension Version: 2.2.0
• OS Version: Darwin x64 18.2.0
• VSCode version: 1.32.3

⚠️ Make sure to attach this file from your home-directory: /Users/vhollo/mrmlnc.vscode-autoprefixer-unresponsive.cpuprofile.txt [mrmlnc.vscode-autoprefixer-unresponsive.cpuprofile.txt](https://github.com/mrmlnc/vscode-autoprefixer/files/3000518/mrmlnc.vscode-autoprefixer-unresponsive.cpuprofile.txt) ⚠️

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

performance exaustion

• Issue Type: Bug
• Extension Name: vscode-autoprefixer
• Extension Version: 3.0.0
• OS Version: Windows_NT x64 10.0.18363
• VSCode version: 1.41.1

⚠️ We have written the needed data into your clipboard. Please paste! ⚠️

CSS Grid Layout !

and the prefixes for CSS Grid Layout?

Stop autoprefixing grid

I wrote "autoprefixer.grid": "autoplace" on settings.json, but grid autoprefixing doesn't work.
If I changed this code "grid": "autoplace", grid autoprefixing started working.
Is it a bug ? If it's a bug, could you check it, please?

thanks

Environment

• VS Code version: 1.45.1
• Autoprefixer plugin version: 3.0.1
• Operating System: windows10

Autoprefixer config

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

Extension doesn't work as expected and also removes random lines from the code

Environment

• VS Code version: 1.69.2
• Autoprefixer plugin version: v3.0.1
• Operating System: Windows 11 Home 21H22

Actual behavior

The extension doesn't seem to work the same way online version does.

E.g. online version from this line:

.wp-block-gallery.has-nested-images figure.wp-block-image {
    flex-grow: initial;
}

Results in:

.wp-block-gallery.has-nested-images figure.wp-block-image {
    -webkit-box-flex: initial;
        -ms-flex-positive: initial;
            flex-grow: initial;
}

After running extension in VS result is:

.wp-block-gallery.has-nested-images figure.wp-block-image {
    flex-grow: initial;
}

Also noticed an issue that extension has messed up the code:

From code:

/* Overwrite styles with Astra */
:root {
  --tec-color-background-events-bar-submit-button: var(--ast-global-color-0);
	--tec-color-accent-primary: var(--ast-global-color-0);
	--tec-color-text-events-title: var(--ast-global-color-0);
	--tec-color-background-events-bar-submit-button-hover: var(--ast-global-color-1);
	--tec-color-button-primary-active: var(--ast-global-color-1);
		--tec-color-text-primary: var(--ast-global-color-2);
	--tec-font-family-sans-serif:     font-family: 'Quicksand',sans-serif;
}

The extension removed completely
'Quicksand',sans-serif

Resulting in:

/* Overwrite styles with Astra */
:root {
    --tec-color-background-events-bar-submit-button: var(--ast-global-color-0);
      --tec-color-accent-primary: var(--ast-global-color-0);
      --tec-color-text-events-title: var(--ast-global-color-0);
      --tec-color-background-events-bar-submit-button-hover: var(--ast-global-color-1);
      --tec-color-button-primary-active: var(--ast-global-color-1);
          --tec-color-text-primary: var(--ast-global-color-2);
      --tec-font-family-sans-serif:     font-family;
  }

Expected behavior

See above

Steps to reproduce

1. Copy text above
2. Run extension

Autoprefixer config

{
    "files.autoSave": "afterDelay",
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "explorer.confirmDelete": false,
    "security.workspace.trust.untrustedFiles": "open",
    "security.workspace.trust.banner": "never",
    "autoprefixer.ignoreFiles": [
    
    
    ]
}

Code sample

// Paste your CSS code that has problems with formatting.

ignore .scss and .sass files

Hi, I was thinking if there is a way to stop the autoprefixer from prefixing certain (types of) files. If not can you add such a feature? @mrmlnc

LESS mixins: Autoprefixer inserts curly braces {} after mixin with braces

As the title says, the problem is with LESS files, that if you use mixis with braces like mentioned on the official page, then autoprefixer replaces the last part "();" with "{}". Note that the trailing semicolon is removed as well.
LESS - Mixin feature

Before autoprefixer:

.slick-btns{
    .absolute();
    .p-top-right();
}

After autoprefixer:

.slick-btns{
    .absolute(){}
    .p-top-right(){}
}

LESS will not insert the mixins and therefore produces an empty .slick-btns class in my example.

Thanks for your work.

Best regards
Peter

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-autoprefixer
• Extension Version: 2.2.0
• OS Version: Darwin x64 18.2.0
• VSCode version: 1.31.0

⚠️ Make sure to attach this file from your home-directory: /Users/nabarajsaha/mrmlnc.vscode-autopref [mrmlnc.vscode-autoprefixer-unresponsive.cpuprofile.txt](https://github.com/mrmlnc/vscode-autoprefixer/files/2873029/mrmlnc.vscode-autoprefixer-unresponsive.cpuprofile.txt) ixer-unresponsive.cpuprofile.txt ⚠️

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

display: -webkit-flex;

Required for mac safari.

display: -webkit-flex;
-webkit-justify-content: center;
-webkit-flex-wrap: wrap;
etc..

Support for inline `style` blocks?

Hey,

Is there support for inline style blocks?

The prefix order should be changed

'animation' should be listed after '-webkit-animation'.

-webkit-animation: menuOpacity 0.3s;
animation: menuOpacity 0.3s;

'border-radius' should be listed after '-o-border-radius'.

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;

'transition' should be listed after '-o-transition'

-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
transition: background-color 0.3s;

There is an error when I use it in VS Code

I installed the extension in my VS Code,
But when I use it the console shows the error

How to fix this?

Feature request External file && minify

Hi, my idear would be that you could have the option to prefix in a separate file :

styles.css > prefixed.style.css

and maybe you can minify too

styles.css > prefixed.style.min.css ( could just be .min)

This way your "style.css" is PURE css. and the prefixed or .min file is your production file.

with auto minify/prefix on external file when you save the main file if a .min or .prefixed file already exists.

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-autoprefixer
• Extension Version: 2.2.0
• OS Version: Darwin x64 17.7.0
• VSCode version: 1.33.1

⚠️ Make sure to attach this file from your home-directory:
⚠️/Users/alexis/mrmlnc.vscode-autoprefixer-unresponsive.cpuprofile.txt

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load