A Visual Studio Code and Cursor extension for up-to-date CSS vendor prefixes via Autoprefixer and Browserslist, optional stripping of prefixes, and small opacity / visibility helpers inside @keyframes.
Features
- Prefix CSS for your target browsers (Browserslist string in settings).
- CSS, SCSS, Less, PostCSS, and Tailwind CSS language modes.
- Inside
@keyframesonly:opacity: 1/opacity: 0paired withvisibility: visible/hiddenwhen applicable. - Commands to strip vendor prefixes from property names and normalize
@-*-keyframesto@keyframes.
Commands
Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and search for Nat20.
| Command title |
|---|
| Nat20: Add vendor prefixes (file) |
| Nat20: Add vendor prefixes (selection) |
| Nat20: Strip vendor prefixes (file) |
| Nat20: Strip vendor prefixes (selection) |
Settings
| Key | Default | Description |
|---|---|---|
nat20Prefixer.browserslist |
> 0.5%, last 2 versions, Firefox ESR, not dead |
Browserslist query for Autoprefixer |
nat20Prefixer.prefixOnSave |
false |
Run prefixing on file save |
Development
npm install
npm run compile
Press F5 to launch the Extension Development Host (see .vscode/launch.json).
Build a .vsix installable package:
npm run package
This produces nat20-prefixer-<version>.vsix in the project root (version from package.json).
vsce may warn about a large file count (mostly caniuse-lite data pulled in by Autoprefixer). The extension still runs normally; you can shrink the package later with a single-file bundle (e.g. esbuild or @vercel/ncc).
License
MIT — see the LICENSE file in the repository root.