Prefix CSS and SCSS with Autoprefixer
Home Page: https://atom.io/packages/autoprefixer
License: MIT License
i love code 
and unicorns 
check out my latest app: Doodle Draw 
and my latest blog post
Great job with the package. I am wondering whether you have plans to support SASS?
Thanks again.
Before I ran into this package, which is great, I was using https://autoprefixer.github.io to get my prefixes. Will the Grid prefix that's being used here something we can look forward to in this package?
I have my 'Run on save' option activated. Every time when I'm saving my stylesheet files (SCSS) the scroll (not the cursor) jumps three lines up.
Atom version: 1.21.1 x64
OS: Mac OS High Sierra
...also running SASS-autocompile 0.13.3
jdiogopeixoto has been rewarded.
issuehunt ($40.00)IssueHunt has been backed by the following sponsors. Become a sponsor
Would be nice if you could make i compatible with the SASS syntax not only SCSS.
I tried to use the autoprefixer but it won't add the -moz prefixes to the css code.. For example for box -sizing this is what I get if I run the autoprefixer:
.item {
position: absolute;
margin-top: 120px;
float: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
right: 5%;
}
i've tried many times with CSS and HTML files and doesn't work
it either returns
``Cannot read property '0' of undefined
`or do nothing .
using ATOM 1.4.3
Would be really appreciated.
I saw in other issues that SCSS isn't supported by autoprefixer. However, when opening both a CSS and a SCSS file in Atom, the Autoprefix command appears in the command palette because of the CSS file, but I can use it on the SCSS file too. And it seems to work perfectly from what I saw.
Currently your plugin supports css and scss fine and overall works really well but it would be great if you could add support for sass as well, since it would be really convenient for those who use the sass format.
Use activationCommands instead of activationEvents in your package.json
Commands should be grouped by selector as follows:
"activationCommands": {
"atom-workspace": ["foo:bar", "foo:baz"],
"atom-text-editor": ["foo:quux"]
}Package.getActivationCommands (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:828:9)
Package.hasActivationCommands (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:748:20)
Package.activationShouldBeDeferred (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:738:19)
<unknown> (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:189:55)
Package.measure (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:167:15)
Package.load (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:181:12)
Is there a way to make it handle SCSS / SASS?
When autoprefixer applied to the less file, it destroys the structure of the less-related first-line comment used as a command line for less compiler. It places semicolons after commas and as a result line like this:
// out: ../../css/styles.min.css, sourcemap: false, compress: true
is changed to
// out: ../../css/styles.min.css,; sourcemap: false,; compress: true
making it incorrectly processed by the less compiler as no sourcemap nor compress works anymore.
In CSS, the file is updated and the cursor is on the last line.
Solution:
Get current line: var cursorPosition = editor.getCursorBufferPosition();
Set current line: editor.setCursorBufferPosition({ row: cursorPosition.row });
When enabled, runs autoprefix on save.
Help welcome :)
I installed autoprefixer, however no autoprefixer option shows up in my command palette I've reinstalled a bunch of times and tried everthing I can think of, but other than it being in my installed packages list there is no sign of it?
windows 8.1
atom 0.205.0
Is it possible to stop this package from converting my SCSS // comments to regular CSS /* */ comments? It's not necessarily a huge deal, but I would like to keep my SCSS comments from appearing in my output CSS.
Thanks!
[Enter steps to reproduce below:]
Atom Version: 1.10.2
Electron Version: 0.37.8
System: Ubuntu 16.04.1
Thrown From: autoprefixer package, v3.2.1
Failed to activate the autoprefixer package
At Cannot find module 'postcss'
Error: Cannot find module 'postcss'
at Module._resolveFilename (module.js:339:15)
at Function.Module._resolveFilename (/opt/atom/resources/app.asar/src/module-cache.js:383:52)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
at require (/opt/atom/resources/app.asar/src/native-compile-cache.js:50:27)
at Object.<anonymous> (/home/itadmin/.atom/packages/atom-autoprefixer-master/index.js:9:16)
at Module._compile (/opt/atom/resources/app.asar/src/native-compile-cache.js:103:30)
at Object.defineProperty.value [as .js] (/opt/atom/resources/app.asar/src/compile-cache.js:208:21)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (/opt/atom/resources/app.asar/src/native-compile-cache.js:50:27)
at Package.module.exports.Package.requireMainModule (/opt/atom/resources/app.asar/src/package.js:718:27)
at Package.module.exports.Package.activateNow (/opt/atom/resources/app.asar/src/package.js:173:16)
at /opt/atom/resources/app.asar/src/package.js:798:25
at Function.module.exports.Emitter.simpleDispatch (/opt/atom/resources/app.asar/node_modules/event-kit/lib/emitter.js:25:14)
at Emitter.module.exports.Emitter.emit (/opt/atom/resources/app.asar/node_modules/event-kit/lib/emitter.js:125:28)
at CommandRegistry.module.exports.CommandRegistry.handleCommandEvent (/opt/atom/resources/app.asar/src/command-registry.js:241:20)
at /opt/atom/resources/app.asar/src/command-registry.js:3:61
at CommandPaletteView.module.exports.CommandPaletteView.confirmed (/opt/atom/resources/app.asar/node_modules/command-palette/lib/command-palette-view.js:183:32)
at CommandPaletteView.module.exports.SelectListView.confirmSelection (/opt/atom/resources/app.asar/node_modules/atom-space-pen-views/lib/select-list-view.js:338:21)
at space-pen-div.atom.commands.add.core:confirm (/opt/atom/resources/app.asar/node_modules/atom-space-pen-views/lib/select-list-view.js:109:19)
at CommandRegistry.module.exports.CommandRegistry.handleCommandEvent (/opt/atom/resources/app.asar/src/command-registry.js:260:29)
at /opt/atom/resources/app.asar/src/command-registry.js:3:61
at KeymapManager.module.exports.KeymapManager.dispatchCommandEvent (/opt/atom/resources/app.asar/node_modules/atom-keymap/lib/keymap-manager.js:580:16)
at KeymapManager.module.exports.KeymapManager.handleKeyboardEvent (/opt/atom/resources/app.asar/node_modules/atom-keymap/lib/keymap-manager.js:388:22)
at WindowEventHandler.module.exports.WindowEventHandler.handleDocumentKeyEvent (/opt/atom/resources/app.asar/src/window-event-handler.js:98:36)
at HTMLDocument.<anonymous> (/opt/atom/resources/app.asar/src/window-event-handler.js:3:61)
-1:21.4.0 fuzzy-finder:toggle-file-finder (ol.tree-view.full-menu.list-tree.has-collapsable-children.focusable-panel)
-0:04.2.0 command-palette:toggle (atom-text-editor.editor.is-focused)
-0:00.3.0 core:confirm (atom-text-editor.editor.mini.is-focused)
-0:00.1.0 autoprefixer (atom-text-editor.editor)
{
"core": {
"themes": [
"one-light-ui",
"one-light-syntax"
]
}
}# User
autoprefixer, v3.2.1 (inactive)
color-picker, v2.2.2 (active)
open-in-browser, v0.4.7 (inactive)
atom-dark-syntax, v0.27.0 (inactive)
atom-dark-ui, v0.52.0 (inactive)
atom-light-syntax, v0.28.0 (inactive)
atom-light-ui, v0.44.0 (inactive)
base16-tomorrow-dark-theme, v1.1.0 (inactive)
base16-tomorrow-light-theme, v1.1.1 (inactive)
one-dark-ui, v1.5.0 (inactive)
one-light-ui, v1.5.0 (active)
one-dark-syntax, v1.3.0 (inactive)
one-light-syntax, v1.3.0 (active)
solarized-dark-syntax, v1.0.2 (inactive)
solarized-light-syntax, v1.0.2 (inactive)
about, v1.5.3 (active)
archive-view, v0.61.1 (active)
autocomplete-atom-api, v0.10.0 (active)
autocomplete-css, v0.11.2 (active)
autocomplete-html, v0.7.2 (active)
autocomplete-plus, v2.31.1 (active)
autocomplete-snippets, v1.11.0 (active)
autoflow, v0.27.0 (inactive)
autosave, v0.23.1 (active)
background-tips, v0.26.1 (active)
bookmarks, v0.41.0 (active)
bracket-matcher, v0.82.1 (active)
command-palette, v0.38.0 (active)
deprecation-cop, v0.54.1 (active)
dev-live-reload, v0.47.0 (active)
encoding-selector, v0.22.0 (active)
find-and-replace, v0.201.0 (inactive)
fuzzy-finder, v1.3.0 (active)
git-diff, v1.1.0 (active)
go-to-line, v0.31.0 (inactive)
grammar-selector, v0.48.1 (active)
image-view, v0.58.2 (active)
incompatible-packages, v0.26.1 (active)
keybinding-resolver, v0.35.0 (active)
line-ending-selector, v0.5.0 (active)
link, v0.31.1 (inactive)
markdown-preview, v0.158.0 (active)
notifications, v0.65.0 (active)
open-on-github, v1.2.0 (inactive)
package-generator, v1.0.0 (inactive)
settings-view, v0.242.2 (active)
snippets, v1.0.2 (active)
spell-check, v0.67.1 (active)
status-bar, v1.4.1 (active)
styleguide, v0.47.0 (active)
symbols-view, v0.113.0 (inactive)
tabs, v0.100.2 (active)
timecop, v0.33.2 (active)
tree-view, v0.208.2 (active)
update-package-dependencies, v0.10.0 (active)
welcome, v0.34.0 (active)
whitespace, v0.33.0 (active)
wrap-guide, v0.38.1 (active)
language-c, v0.52.1 (active)
language-clojure, v0.21.0 (active)
language-coffee-script, v0.47.2 (active)
language-csharp, v0.12.1 (active)
language-css, v0.37.1 (active)
language-gfm, v0.88.0 (active)
language-git, v0.15.0 (active)
language-go, v0.42.1 (active)
language-html, v0.45.1 (active)
language-hyperlink, v0.16.0 (active)
language-java, v0.23.0 (active)
language-javascript, v0.119.0 (active)
language-json, v0.18.2 (active)
language-less, v0.29.5 (active)
language-make, v0.22.2 (active)
language-mustache, v0.13.0 (active)
language-objective-c, v0.15.1 (active)
language-perl, v0.35.0 (active)
language-php, v0.37.2 (active)
language-property-list, v0.8.0 (active)
language-python, v0.45.0 (active)
language-ruby, v0.69.0 (active)
language-ruby-on-rails, v0.25.0 (active)
language-sass, v0.56.0 (active)
language-shellscript, v0.22.4 (active)
language-source, v0.9.0 (active)
language-sql, v0.23.0 (active)
language-text, v0.7.1 (active)
language-todo, v0.28.0 (active)
language-toml, v0.18.0 (active)
language-xml, v0.34.9 (active)
language-yaml, v0.26.0 (active)
# Dev
No dev packagesWould be nice to have a checkbox for enabling cascade: true option.
Hy,
I just installed this plugin, created the same test.css as in the example and called the autoprefixer command in the command palette, but absolutely nothing happens.
I have atom v 1.7.1 running on opensuse tumbleweed
Thanks if anybody can help and if any further information is needed please let me know.
[Enter steps to reproduce below:]
Atom Version: 1.12.9
Electron Version: 1.3.13
System: Microsoft Windows 10 Home Single Language
Thrown From: autoprefixer package, v6.6.1
Failed to load the autoprefixer package
At Cannot find module 'coffee-script'
Error: Cannot find module 'coffee-script'
at Module._resolveFilename (module.js:455:15)
at Module._resolveFilename (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\electron.asar\common\reset-search-paths.js:35:12)
at Function.Module._resolveFilename (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\module-cache.js:383:52)
at Function.Module._load (module.js:403:25)
at Module.require (module.js:483:17)
at require (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\native-compile-cache.js:50:27)
at Object.<anonymous> (C:\Users\Akash\.atom\packages\autoprefixer-master\index.js:1:80)
at Module._compile (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\native-compile-cache.js:103:30)
at Object.value [as .js] (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\compile-cache.js:201:21)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\native-compile-cache.js:50:27)
at Package.module.exports.Package.requireMainModule (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\package.js:747:27)
at C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\package.js:118:28
at Package.module.exports.Package.measure (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\package.js:92:15)
at Package.module.exports.Package.load (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\package.js:106:12)
at PackageManager.module.exports.PackageManager.loadPackage (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\package-manager.js:468:14)
at C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\package-manager.js:412:19
at Config.module.exports.Config.transact (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\config.js:312:16)
at PackageManager.module.exports.PackageManager.loadPackages (C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\package-manager.js:407:19)
at C:\Users\Akash\AppData\Local\atom\app-1.12.9\resources\app.asar\src\atom-environment.js:772:28
{
"core": {
"automaticallyUpdate": true,
"disabledPackages": [
"atom-bootstrap3"
],
"telemetryConsent": "limited"
}
}# User
atom-bootstrap3, v1.2.12 (active)
atom-bootstrap4, v1.4.0 (active)
autocomplete-paths, v1.0.5 (active)
autoprefixer, v6.6.1 (active)
emmet, v2.4.3 (active)
minimap, v4.25.7 (active)
pigments, v0.37.0 (active)
w3c-validation, v0.4.0 (active)
atom-dark-syntax, v0.27.0 (inactive)
atom-dark-ui, v0.52.0 (inactive)
atom-light-syntax, v0.28.0 (inactive)
atom-light-ui, v0.45.0 (inactive)
base16-tomorrow-dark-theme, v1.3.0 (inactive)
base16-tomorrow-light-theme, v1.3.0 (inactive)
one-dark-ui, v1.6.2 (active)
one-light-ui, v1.6.2 (inactive)
one-dark-syntax, v1.5.0 (active)
one-light-syntax, v1.5.0 (inactive)
solarized-dark-syntax, v1.0.5 (inactive)
solarized-light-syntax, v1.0.5 (inactive)
about, v1.7.0 (active)
archive-view, v0.62.0 (active)
autocomplete-atom-api, v0.10.0 (active)
autocomplete-css, v0.13.1 (active)
autocomplete-html, v0.7.2 (active)
autocomplete-plus, v2.31.4 (active)
autocomplete-snippets, v1.11.0 (active)
autoflow, v0.27.0 (inactive)
autosave, v0.23.1 (active)
background-tips, v0.26.1 (active)
bookmarks, v0.42.0 (active)
bracket-matcher, v0.82.2 (active)
command-palette, v0.39.0 (inactive)
deprecation-cop, v0.54.1 (active)
dev-live-reload, v0.47.0 (active)
encoding-selector, v0.22.0 (active)
exception-reporting, v0.40.0 (active)
find-and-replace, v0.202.2 (inactive)
fuzzy-finder, v1.4.0 (active)
git-diff, v1.1.0 (active)
go-to-line, v0.31.0 (inactive)
grammar-selector, v0.48.2 (active)
image-view, v0.60.0 (active)
incompatible-packages, v0.26.1 (active)
keybinding-resolver, v0.35.0 (active)
line-ending-selector, v0.5.0 (active)
link, v0.31.2 (inactive)
markdown-preview, v0.158.8 (active)
metrics, v1.1.2 (active)
notifications, v0.65.1 (active)
open-on-github, v1.2.1 (inactive)
package-generator, v1.0.1 (inactive)
settings-view, v0.243.1 (active)
snippets, v1.0.4 (active)
spell-check, v0.68.4 (active)
status-bar, v1.4.1 (active)
styleguide, v0.47.2 (active)
symbols-view, v0.113.1 (inactive)
tabs, v0.103.0 (active)
timecop, v0.33.2 (active)
tree-view, v0.210.0 (active)
update-package-dependencies, v0.10.0 (active)
welcome, v0.35.1 (active)
whitespace, v0.35.0 (active)
wrap-guide, v0.38.2 (active)
language-c, v0.54.0 (active)
language-clojure, v0.22.1 (active)
language-coffee-script, v0.48.0 (active)
language-csharp, v0.13.0 (active)
language-css, v0.40.1 (active)
language-gfm, v0.88.0 (active)
language-git, v0.15.0 (active)
language-go, v0.43.0 (active)
language-html, v0.47.1 (active)
language-hyperlink, v0.16.1 (active)
language-java, v0.24.0 (active)
language-javascript, v0.122.0 (active)
language-json, v0.18.3 (active)
language-less, v0.29.6 (active)
language-make, v0.22.2 (active)
language-mustache, v0.13.0 (active)
language-objective-c, v0.15.1 (active)
language-perl, v0.37.0 (active)
language-php, v0.37.3 (active)
language-property-list, v0.8.0 (active)
language-python, v0.45.1 (active)
language-ruby, v0.70.2 (active)
language-ruby-on-rails, v0.25.1 (active)
language-sass, v0.57.0 (active)
language-shellscript, v0.23.0 (active)
language-source, v0.9.0 (active)
language-sql, v0.25.0 (active)
language-text, v0.7.1 (active)
language-todo, v0.29.1 (active)
language-toml, v0.18.1 (active)
language-xml, v0.34.12 (active)
language-yaml, v0.27.1 (active)
# Dev
No dev packagesHi!
Thank you for the addon.
Is it possible to run it automatically on a closed file? I'm thinking about the ones generated by preprocessors. Something like Sass AutoCompile does.
Thank you for your attention.
Auto-prefixer automatically changes the following...
//compileCompressed: ../css/style.min.css
to a CSS comment
/compileCompressed: ../css/flex.min.css/
Unfortunately, this stops the desired functionality, which is to compile the SCSS file to a specific CSS file.
[Enter steps to reproduce below:]
Atom Version: 1.2.4
System: Unknown Windows Version
Thrown From: autoprefixer package, v3.1.0
Uncaught TypeError: this.textEditor.displayBuffer.getMaxScrollTop is not a function
At /C:/Users/chips/.atom/packages/minimap/lib/minimap.coffee:169
TypeError: this.textEditor.displayBuffer.getMaxScrollTop is not a function
at Minimap.module.exports.Minimap.getTextEditorMaxScrollTop (C:\Users\chips\.atom\packages\minimap\lib\minimap.coffee:200:46)
at Minimap.module.exports.Minimap.getTextEditorScrollRatio (C:\Users\chips\.atom\packages\minimap\lib\minimap.coffee:216:36)
at Minimap.module.exports.Minimap.getCapedTextEditorScrollRatio (C:\Users\chips\.atom\packages\minimap\lib\minimap.coffee:223:50)
at Minimap.module.exports.Minimap.getScrollTop (C:\Users\chips\.atom\packages\minimap\lib\minimap.coffee:334:17)
at atom-text-editor-minimap.MinimapElement.update (C:\Users\chips\.atom\packages\minimap\lib\minimap-element.coffee:343:73)
at C:\Users\chips\.atom\packages\minimap\lib\minimap-element.coffee:323:8
{
"core": {
"themes": [
"seti-ui",
"monokai-seti"
]
}
}# User
color-picker, v2.0.13
color-picker-service, v0.0.1
csslint, v1.1.4
emmet, v2.3.13
highlight-line, v0.11.0
javascript-snippets, v1.0.0
jshint, v1.8.0
linter, v1.8.1
linter-csslint, v1.0.7
linter-js-standard, v3.2.0
linter-sass-lint, v0.1.5
linter-tidy, v1.0.1
minimap, v4.13.4
monokai-seti, v0.7.0
project-manager, v2.6.1
seti-ui, v0.8.0
# Dev
No dev packagesname of atom package is "autoprefixer" the dependency is "autoprefixer"... npm dont like that:
Error: SELF_SIGNED_CERT_IN_CHAIN
This is what appears when i tried to run the plugin.
I use the sass-autocompile package and really don’t want to complicate things too much in my workflow and let Atom do all the work. The way that package compiles and saves files is by creating a new file called all.min.css from all.scss. If this package could do the same, that’d be just wonderful. Lovely. This should fix the “Converting comments” issue that I’m dealing with as well.
Now supported through a custom parser in [email protected]:
https://github.com/postcss/postcss/#custom-syntaxes
https://github.com/postcss/postcss-scss
I don't have time to do this right now, but PR welcome :)
I installed autoprefixer on my atom IDE, but when I use it, -webkit is the only autoprefixing I get, nothing for mozilla firefox.
There really needs to be a setting to disable SCSS autoprefixing. I want vendor prefixes in my compiled CSS, but NOT in my SCSS.
This seems like it would be the standard use case. Why would you want vendor prefixes in your preprocessor language? I thought the whole point of autoprefixer is so the author doesn't have to deal with vendor prefixes!
I use ::placeholder preudo element for placeholder stylizing in input fields and textareas. When I use autoprefixer it adds these:
::-webkit-input-placeholder
::-ms-input-placeholder
:-ms-input-placeholder
But it does not add these prefixes:
::-moz-placeholder
:-moz-placeholder
And Firefox browser does not add styles to placeholder without ::-moz-placeholder/:-moz-placeholder pseudo elements prefixes.
I'm using SCSS to write my styles and when I execute Autoprefixer it doesn't work, it's OK when I try it in a .css file.
Hi there,
I recently installed autoprfixer in atom an I can not make multiple browser configuration please help me it only giving webkit
It would be fantastic if autoprefixer could be chained with sass-autocompile
armin-pfaeffle/sass-autocompile#34
Any chance of collaborating the two packages to make this happen?
I don't know what the problem is, but when I select my css and I open the command palette and type autoprefixer it just copies and pastes the exact same code beneath the first one. It doesn't add the prefix. I tried the prefix for the given one in the example. "box-sizing: border-box;"
Hi!
Thanks for this package!
It would be great to run autoprefixer on when csss files change. Because I work with .less files that automatic compile to .css and I dont save file .css accordingly autoprefixer doesn`t work.
look the gif
TextEditor.prototype.displayBuffer has always been private, but now
it is gone. Reading the displayBuffer property now returns a reference
to the containing TextEditor, which now provides some of the API of
the defunct DisplayBuffer class.
TextEditor.get (/Applications/Atom.app/Contents/Resources/app.asar/src/text-editor.js:101:14)
<unknown> (/Users/paul/.atom/packages/autoprefixer/index.js:45:76)
It's currently supported by selecting the CSS manually. But I think we can do one better and do it automatically.
It might be possible to get all the CSS scopes and convert them.
https://discuss.atom.io/t/find-specific-scopes-in-a-file/12428
https://atom.io/docs/v0.209.0/behind-atom-scoped-settings-scopes-and-scope-descriptors
Could also maybe use: https://github.com/RebelMail/html-postcss
There is a $40.00 open bounty on this issue. Add more on Issuehunt.
- Checkout the Issuehunt explorer to discover more funded issues.
- Need some help from other developers? Add your repositories on Issuehunt to raise funds.
I am using Atom .174 and AP 2.2.0 for Atom.
Happens with every file I have tried, simple to complex, with selection and without.
Great plugin !
Just a little bored by the fact that I have to open a command palette then trigger the action of auto prefixer..
Couldn't it be possible to automatically prefix css when pressing "tab", "space", "enter" or "ctrl-s" ?
I spent a couple of hours trying to figure out why my code suddenly broke, and it turns out that autoprefixer deletes all my display: -webkit-flex;, hence causing the issue.
Could you please go ahead and fix this? I also had a feeling that many prefixer may be out of date since this package hasn't been updated for a long time. Thanks.
Perhaps I'm just using the package incorrectly, but I can't get any output. I was originally running the package on a much larger css file and noticed that nothing was prefixed on transitions. I looked around and found that nothing was prefixed at all.
I made a test file and tried running it there with the exact same elements that are shown in the example GIF on this page.
Here's a GIF of what happens when I run it.
Properties I've tried
It doesn't generate any error messages. It just leaves the code looking like it did prior to shift+cmd+P, "autoprefixer," enter.
Running OSX 10.10.4. Atom 1.0.5. atom-autoprefixer 2.2.4.
Probably something wrong with my config (below).
"*":
editor:
invisibles:
eol: "!"
fontSize: 15
softWrapAtPreferredLineLength: true
softWrap: true
core:
themes: [
"one-dark-ui"
"zenburn"
]
disabledPackages: [
"webbox-color"
"csscomb"
"css-comb"
"linter-csslint"
"gulp-helper"
"gulp-snippets"
]
projectHome: "~/app/BMO"
audioBeep: false
ignoredNames: [
".git"
".hg"
".svn"
".DS_Store"
"Thumbs.db"
".codekit-cache"
"bower_components"
"node_modules"
]
welcome:
showOnStartup: false
linter:
lintOnFly: true
showErrorPanel: false
"webbox-color":
fillColorAsBackground: false
"white-cursor":
darkThemes: [
"zenburn"
]
pigments:
markerType: "underline"
"atom-css-comb":
projectConfigs: ".csscomb.json"
readyMadeConfigs: "csscomb"
"linter-csslint":
csslintExecutablePath: "/usr/local/bin/csslint-cli"
I use it as the guide said, Open the Command Palette and type autoprefixer.
But nothing happened, the css file doesn't change at all.
below is the content of the css file.
a {
box-sizing: border-box;
}
How do you set the autoprefixer, e.g. "last 2 versions"?
Use the Autoprefixer source map to map the cursor back to its original position.
jdiogopeixoto has been rewarded. issuehunt ($40.00)IssueHunt has been backed by the following sponsors. Become a sponsor
If I write comments with a double backslash "//", they're converted to css comments "/* */". Is there a way to disable this?
As I was working on a "fixed aspect ratio layout" for WordPress gallery, I found this little nasty bug:
When I write this (in SCSS):
.gallery-icon {
// 16:10:
height: 0;
line-height: 0;
padding-top: 100% / 16 * 10;
}
After runnin' Autoprefixer the "0" after the inline comment gets removed! When I omit the ":", Autoprefixer adds ";" after the inline comment.. ;)
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.