const path = require('path');
const gulp = require('gulp');
const del = require('del');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const concat = require('gulp-concat');
const postcssUrl = require('postcss-url');
const postcssImport = require('postcss-import');
const sourcemaps = require('gulp-sourcemaps');
const postcssPresetEnv = require('postcss-preset-env');

const paths = {
  styles: {
    src: ['./node_modules/@doodle/components/styles.dev.css', './src/**/*.css'],
    dest: 'assets/styles.css',
  },
};

function clean() {
  return del(path.dirname(paths.styles.dest));
}

function styles() {
  return gulp
    .src(paths.styles.src)
    .pipe(sourcemaps.init())
    .pipe(
      postcss([
        postcssImport(),
        postcssPresetEnv(),
        postcssUrl({
          url: 'copy',
          basePath: path.resolve(__dirname, 'node_modules/@doodle/components'),
          assetsPath: 'assets',
          useHash: true,
        }),
        postcssUrl({
          url: asset => `/${asset.url}`,
        }),
        cssnano({
          preset: 'default',
        }),
      ])
    )
    .pipe(concat(path.basename(paths.styles.dest)))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.dirname(paths.styles.dest)));
}

function watch() {
  return gulp.watch(
    paths.styles.src,
    {
      ignoreInitial: true,
    },
    styles
  );
}

function build(done) {
  return gulp.series(clean, styles)(done);
}

exports.clean = clean;
exports.build = build;
exports.watch = watch;