/* package */
const gulp = require("gulp");
const sass = require("gulp-sass");
const fiber = require('fibers');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const postcss = require("gulp-postcss");
const autoprefixer = require('autoprefixer');
const mqpacker = require("css-mqpacker");
const cssnano = require("cssnano");

/* select use compiler */
sass.compiler = require("sass"); // Dart Sass = "sass"

const plugin = [
    autoprefixer({}),
    mqpacker(),
    cssnano({ autoprefixer: false })
];

const paths = {
    root: '.',
    styles: {
        style: {
            src: 'scss/style.scss',
            dest: '.',
            map: '.',
        },
        editor: {
            src: 'scss/editor-style-block.scss',
            dest: './assets/css',
            map: '.',
        }
    }
};

function sassCompress_style() {
    const file = paths.styles.style;
    return gulp
        .src(file.src, { sourcemaps: true })
        .pipe(plumber({
            errorHandler: notify.onError({
                title: 'Gulp',
                message: file.src + 'Error: <%= error.message %>',
                sound: 'Tink',
            })
        }))
        .pipe(
            sass({
                fiber: fiber,
                outputStyle: 'expanded'
            })
                .on('error', sass.logError))
        .pipe(postcss(plugin))
        .pipe(gulp.dest(file.dest, { sourcemaps: file.map }))
}

function sassCompress_editor() {
    const file = paths.styles.editor;
    return gulp
        .src(file.src, { sourcemaps: true })
        .pipe(plumber({
            errorHandler: notify.onError({
                title: 'Gulp',
                message: file.src + 'Error: <%= error.message %>',
                sound: 'Tink',
            })
        }))
        .pipe(
            sass({
                fiber: fiber,
                outputStyle: 'expanded'
            })
                .on('error', sass.logError))
        .pipe(postcss(plugin))
        .pipe(gulp.dest(file.dest, { sourcemaps: file.map }))
}

function watchFiles(done) {
    gulp.watch('scss/*').on('change', gulp.parallel(sassCompress_style, sassCompress_editor));
}

gulp.task('default', gulp.series(gulp.parallel(sassCompress_style, sassCompress_editor), watchFiles));