import gulp from 'gulp'
import rename from 'gulp-rename'
import postCSS from 'gulp-postcss'
import sourcemaps from 'gulp-sourcemaps'

export function serveMainCSS() {
    const p = [
        require('postcss-import')(),
        require('postcss-extend')(),                                        // @extend, placeholder
        require('postcss-nested')(),                                        // nested rules like SASS
        require('postcss-custom-media')(),                                  // custom media
        require('postcss-preset-env')(),                                    // autoprefixer, CSS 4
        require('postcss-critical-split')({                                 // critical CSS
            'output':'rest'
        }),
        require('css-mqpacker')(),                                          // merge media queries
        require('cssnano')({ autoprefixer: false, zindex: false }),         // minify CSS; Disable autoprefixer, because it's already included in cssnext
        require('postcss-reporter')(),                                      // report issue in console
        require('postcss-browser-reporter')()                               // report issue in browser
    ];

    return gulp.src('./css/main.css')
        .pipe(sourcemaps.init())
        .pipe(postCSS(p))
        .on('error', function(error) {
            console.log(error.toString())
            this.emit('end')
        })
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('../wp-content/themes/biuro/css/'));
}
