CSS AutoPrefixer in JetBrains WebStorm

Question

I'm writing Sass with the .sass file extension and using the File Watchers plugin by JB.

It's not using an autoprefixer by default and I couldn't find any package that provides that.

How can I get an autoprefixer for my .css files in WebStorm using File Watchers or other methods ?

Answer 1

I don't believe there are any autoprefixers built in to the IDE. I use pycharm (pretty much same thing as webstorm).

https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000149090-Autoprefixer

I use gulp to autoprefix .sass and compile css.

You can do this by adding a gulpfile and implementing this in the following mannor:

Variables: ----------------------------------------------------

*/

var autoprefixer = require('gulp-autoprefixer');

then run the task:

SCSS / CSS: -------------------------------------------------

*/

gulp.task('sass', function () {
    return gulp.src(STYLES_SRC_FILES)
      .pipe(sass().on('error', sass.logError))
      .pipe(autoprefixer('last 3 version'))
      .pipe(gulp.dest(STYLES_DEST_PATH))
      .pipe(cleanCSS({debug: true}, function(details) {
        console.log('Original Size : ' + details.name + ': ' + details.stats.originalSize + ' bytes');
        console.log('Minified Size : ' + details.name + ': ' + details.stats.minifiedSize + ' bytes');
      }))
      .pipe(renameFiles({ suffix: '.min' }))
      .pipe(gulp.dest(STYLES_DEST_PATH));
  });

Answer 2

Yes your current project folder

You will probably have to install gulp globally, i.e

npm install gulp-cli -g

then add the gulpfile to your project and then run:

gulp 

for windows npx gulp

My example gulpfile is as follows:

/*

Variables: ----------------------------------------------------

*/

var gulp         = require('gulp'),
    uglify       = require('gulp-uglify'),
    renameFiles  = require('gulp-rename'),
    sass         = require('gulp-sass'),
    concat       = require('gulp-concat'),
    cleanCSS     = require('gulp-clean-css'),
    gutil        = require('gulp-util'),
    sourcemaps = require('gulp-sourcemaps'),
    autoprefixer = require('gulp-autoprefixer');

/*

Paths: -------------------------------------------------

*/

var SRC_PATH = './your_project_name/src/',
    DEST_PATH = './your_project_name/static/',

// Style paths
    STYLES_SRC_FILES = SRC_PATH + 'scss/**/*.scss',
    STYLES_DEST_PATH = DEST_PATH + 'css/',

// JS paths
    JS_SRC_FILES = SRC_PATH + 'js/**/*.js',
    JS_DEST_PATH = DEST_PATH + 'js/';

/*

SCSS / CSS: -------------------------------------------------

*/

gulp.task('sass', function () {
    return gulp.src(STYLES_SRC_FILES)
      .pipe(sass().on('error', sass.logError))
      .pipe(autoprefixer('last 3 version'))
      .pipe(gulp.dest(STYLES_DEST_PATH))
      .pipe(cleanCSS({debug: true}, function(details) {
        console.log('Original Size : ' + details.name + ': ' + details.stats.originalSize + ' bytes');
        console.log('Minified Size : ' + details.name + ': ' + details.stats.minifiedSize + ' bytes');
      }))
      .pipe(renameFiles({ suffix: '.min' }))
      .pipe(gulp.dest(STYLES_DEST_PATH));
  });

/*

JS: -------------------------------------------------

*/

gulp.task('js', function () {
    return gulp.src(JS_SRC_FILES)
        .pipe(concat('main.js'))
        .pipe(gulp.dest(JS_DEST_PATH))
        .pipe(uglify().on('error',gutil.log))
        .pipe(sourcemaps.write('./'))
        .pipe(renameFiles({ suffix: '.min' }))
        .pipe(gulp.dest(JS_DEST_PATH));
});

/*

Default Task: ----------------------------------------------------- Default Task

*/

gulp.task('watch', function () {
  gulp.watch(STYLES_SRC_FILES, gulp.series('sass'));
  gulp.watch(JS_SRC_FILES, gulp.series('js'));
});

gulp.task('default', gulp.series('sass', 'js', 'watch'));

This will then compile the autoprefixed css in the static css folderand keeps your scss files neat and tidy

If using my example above, you will want to install all the gulp task dependencies i.e

npm install gulp-autoprefixer --save

Answer 3

Use https://github.com/postcss/postcss-cli for that

npm i -D -g postcss postcss-cli postcss-nested

Add file watcher