FabiBoom

this.style.background = '';

После первого аргумента идет последовательность мидлваров (любое их количество). У вас сперва массив мидлваров, а потом обычная мидлвар функция.

В доке это описано:

До тех пор пока картинка не загружена о ее размерах не известно. В первом случае браузеру вы явно сообщаете о ширине и поэтому она доступна. Попробуйте так:

second.addEventListener('load', () => {
       console.log(second.clientWidth);
 });

const filteredArr = arr.filter(elem => Array.isArray(elem) && elem.length);

Браузер не понимает SCSS. В конечном итоге ваш SCSS код "конвертируется" в CSS, в котором нет таких переменных как в SCSS.

Вот что генерирует ваш код и он же будет применен к странице:


Переменная просто перезаписалась и все. Никакой логики нет и быть не может, так как SCSS не работает в браузере. Такой способ не сработает.

Как решить?

1. SCSS

.item {
    $value_1: 50px;
    @media only screen and (max-width: 200px) {
       width: 100px;
    }
    
    width: $value_1;
    height: 50px;
    background-color: red;
}

2. CSS Variables (поддержку посмотреть на CanIUse) - если устраивает, то можете использовать.
Они - часть СSS, а поэтому позволяют организовать более сложную логику.

.item {
    --value-1: 50px;
   
    width: var(--value-1);
    height: 50px;
    background-color: red;
}

 @media only screen and (max-width: 200px) {
   .item {
      --value-1: 100px;
   }
  }

Сдесь он нужен, чтобы определить в каком контексте вызван handler:

let handler = {
    apply: function (target, thisArg, args) {
        console.log(`this=${thisArg}`); // obj
        console.log(thisArg === obj); // true
        console.log(this); // Proxy
    }
};

let obj = {
  p: new Proxy(target, handler)
};

obj.p(1, 2);

apply parameters

Лучше даты сразу преобразовать перед сортировкой

Свойство text-decoration не наследуется, а применяться на весь контент и отменить не получиться.

Оберни (например, в span) только текст , который нужно подчеркнуть и задай именно ему text-decoration: underline.

И это один из вариантов только. Можно еще придумать)

const gulp = require('gulp');

function compress() {
    // compress task
}

function watch() {
    gulp.watch('src/img/*', compress);
}

function css() {
    return gulp
        .src('src/scss/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(cleanCSS())
        .pipe(
            autoprefixer({
                browsers: ['last 2 versions'],
                cascade: false
            })
        )
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
}

module.exports.default = gulp.series(watch); // ну если один таск можно и просто `watch`.
module.exports.watch = watch;
module.exports.css = css;

Промис экспортировать можно

module.exports = async function() {
      const exportFunctions = {};
       //  код

      // добавляем функции нужные
      exportFunctions.sheet = sheet;
       
      return exportFunctions;
   };

  // другой файл

  const mod = require('./test.js').then(funcs => console.log(funcs)); // наши функции

window.addEventListener('wheel', function(evt) {
        if(evt.deltaY < 0 && window.scrollY === 0) {
           // поймали
       }
   });

let selectPlatforms = document.querySelector('#select-platforms');
let inputsContainer = document.querySelector('#inputs');

selectPlatforms.addEventListener('change', renderInputs);

function renderInputs() {
    inputsContainer.innerHTML = '';

    for(let i = 0; i < selectPlatforms.options.length; i++) {
        let option = selectPlatforms.options[i];
        if(option.selected) {
            inputsContainer.insertAdjacentHTML('beforeend', createInput(option.text, option.value));
        }
    }
}

function createInput(text, name) {
    return `<div class="classX">${text} <input type="text" value="" name="<b>${name}</b>"></div>`;
}

renderInputs();

Вот только я не проверял )

Можно же просто запустить в консоли и проверить, что такое делать нельзя, и, если упрощенно объяснять, то:
1) сперва у нас создается именно обьект (то что между { ... });
2) если в свойстве указанно какое-то выражение (типо a+b, или obj.property) , то оно вычисляется и результат этого выражения становиться значениям этого свойства;
3) допустим у нас есть что-то типо такого -

let o = {
  x : 2,
  y : o.x,
}

Свойство x получает значение 2 и доходим до свойства y - видим там получения свойства x объекта o, но у нас еще нет переменной с именем o, что значит мы не просто не можем получить свойство объекта, а мы не нашли сам объект и в итоге получаем ReferenceError.
4) Если у нас не было никаких ошибок и объект успешно создан и размещен в памяти, только тогда создается в нужной области видимости переменная, которой присваивается ссылка на наш объект и только тогда мы можем ссылаться на него за заданным именем.

https://jsfiddle.net/ktoqf5wr/1/ ?

https://codepen.io/anon/pen/gZOWOb