Apply postcss during build of a Liferay 7 theme

[caneta]

I'm trying to use postcss with autoprefixer during build of a Liferay 7 theme. I've tried with the following gulpfile.js:

const gutil = require('gulp-util');
const postcss = require('gulp-postcss');

liferayThemeTasks.registerTasks({
  gulp: gulp,
  hookFn: function(gulp) {
    gulp.hook('after:build:remove-old-css-dir', function(done) {
      gutil.log(`Start postcss`);
      gulp.src('build/css/*.css')
        .pipe(postcss())
        .pipe(gulp.dest('build/css/'));
      gutil.log(`Stop postcss`);
      done();
    });

  } // hookFn()
});

and with the following postcss.config.js:

module.exports = (ctx) => ({
  plugins: {
    'autoprefixer': {
      'browsers': [
        'ie >= 9',
        'Firefox >= 38',
        'Chrome >= 44',
        'ChromeAndroid >= 44',
        'Safari >= 8',
        'Edge >= 0',
        'iOS >= 8'
      ]
    }
  }
});

When I run gulp build postcss is working because inside build/main.css properties like:

transform: rotate(180deg);

are changed into

 -webkit-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
         transform: rotate(180deg);

But is this approach correct? I mean, I'm not sure if when I run postcss (after task build:remove-old-css-dir) is ok, and if it is a good idea to overwrite main.css, aui.css, main_rtl.css and aui_rtl.css directly inside the build directory. Any hints or suggestions? Thank you

[jbalsas]

Hey @caneta, not sure if you ever saw https://github.com/liferay/liferay-theme-tasks/issues/81. Just in case, I've filed https://github.com/liferay/liferay-themes-sdk/issues/46 in the new repo location to keep track of this and figure out how can we support it out of the box.

Please, feel free to add any additional feedback over there.

Thanks!

[caneta]

Great! Thank you Chema, I will follow that new thread with interest....for the moment I can say that the approach described above works for me without side effects.

[jbalsas]

Great to know, thanks a lot @caneta!