css-auto-prefix
For use with Visual Studio Code
0.3.0
Adds vendor prefixes (-webkit-, -moz-, -ms-, -o-) to CSS, SCSS and LESS properties, either as you type or on demand for code that already exists.
Functionality
Finish a declaration — type the ;, press Enter, or close the block — and the prefixed copies appear above it, so the standard W3C property always comes last:
#my-element {
-webkit-user-select: none;
user-select: none;
}
- Works for indented and single-line blocks, and for nested SCSS/LESS blocks (
&:hover { ... } is left alone when you type above it).
- Values are copied exactly, with one space after the colon and none before the semicolon.
- Strings, comments and
url(...) are opaque: content: ':' or a data: URI before your property will not be split.
- If a prefixed line already exists with a stale value, it is updated in place instead of duplicated.
- Each insertion is one edit, so a single
Ctrl+Z takes the prefixes back — and they stay gone until you change the value.
Commands
Open the command palette (Ctrl+Shift+P / Cmd+Shift+P) and type "CSS Auto Prefix":
- CSS Auto Prefix: Prefix File — prefixes every property in the current file.
- CSS Auto Prefix: Prefix Selection — prefixes the properties inside the selection(s); with no selection, the declaration under the cursor.
Both work even when css-auto-prefix.enabled is off, and both are a single undo step.
Settings
| Setting |
Default |
What it does |
css-auto-prefix.enabled |
true |
Prefix automatically as you type. |
css-auto-prefix.prefixPosition |
"before" |
"before" puts the prefixed lines above the standard property (W3C last); "after" restores the 0.2.0 layout. |
css-auto-prefix.prefixes |
modern set |
Which properties get which prefixes. The default only lists properties that still need a prefix somewhere: appearance, backdrop-filter, background-clip, box-decoration-break, clip-path, hyphens, initial-letter, line-clamp, mask / mask-*, print-color-adjust, text-size-adjust, user-select. |
css-auto-prefix.includeLegacy |
false |
Also prefix the long-unprefixed properties (transform, transition, border-radius, animation, filter, ...) from the 0.2.0 table. |
css-auto-prefix.legacyPrefixes |
0.2.0 table |
The legacy table used when includeLegacy is on. |
Setting css-auto-prefix.prefixes yourself replaces the default table (as in 0.2.0), so add anything you want to keep.
Requirements
VS Code 1.75 or newer. No other requirements.
Development
The prefixing logic is a pure module, lib/prefixer.js, that takes document text plus an offset or range and returns offset edits; extension.js is only the VS Code adapter. npm test runs the node test suite (no VS Code needed).
Known Issues
- Properties are matched by name only, so
background-clip gets -webkit-background-clip for every value, not just text.
- The indented Sass syntax (
.sass) is not supported, only .scss.
Release Notes
See CHANGELOG.md.
