VegasChickiChicki

Слушать событие input, делать input1.value = input2.value;
И jquery для этого не нужна.

Будем использовать стек. В начале стек содержит единственное значение - то, которое передано в функцию. Цикл крутится до тех пор, пока стек не окажется пуст. На каждой итерации извлекаем значение из стека, если число - плюсуем к результату, если объект - добавляем значения его свойств в стек.

function sum(data) {
  let result = 0;

  for (const stack = [ data ]; stack.length;) {
    const n = stack.pop();
    stack.push(...(n instanceof Object ? Object.values(n) : []));
    result += typeof n === 'number' ? n : 0;
  }

  return result;
}

Использовать экстенды

%cursor-pointer {
  cursor:pointer;
}

.product {
  &.grid .grid-product__text:not(._price),
  &.grid .grid-product__text._price,
  &.grid .grid-product__text .grid-product__text_inner {
    color: inherit !important;
  }

  &._photo-name-transition {
    ._name,
    ._image {
      @extend %cursor-pointer;
    }
  }

  &._name-transition {
    ._name {
      @extend %cursor-pointer;
    }
  }

  &._photo-transition {
    ._image {
      @extend %cursor-pointer;
    }
  }
}

Output:

.product._photo-name-transition ._name,
.product._photo-name-transition ._image,
.product._name-transition ._name,
.product._photo-transition ._image {
  cursor: pointer;
}

.product.grid .grid-product__text:not(._price),
.product.grid .grid-product__text._price,
.product.grid .grid-product__text .grid-product__text_inner {
  color: inherit !important;
}

Вместо этих заморочек, можно прогнать код через какой-нибудь css-оптимизатор, который умеет группировать свойства. Тут главное правильно его настроить.

Анимации с использованием stroke-dasharray и strok...

https://placekitten.com

Не очень понятно, чем тебе библиотеки Bootstrap Tailwind и т.д. мешают дальше писать "использую scss модули с использованием _variables & _mixins"?
я уже писал где то про Bootstrap, что это в первую очередь инструмент. и используют его, когда в нем есть необходимость. ты ж другие npm зависимости не используешь везде, правильно? а ставишь только те, которые тебе пригодятся в этом проекте.

ну а про гриды ваще бред. это просто css стиль. это то же самое что говорить "border я выучил, а outline мне не нужен. стоит ли учить outline?" и так говоришь, что тебе на их изучение год потребуется.

Не нужно помещать кнопку на инпут.
Нужно задать фон оборачивающему их div.

Вам сюда - newline-after-import

моё мнение: никакое.
максимум - хардкейс на сам бук. всё остальное - расходник.

если для вас железка - не расходник, заверните в пленочку и уберите в шкафчик.

Их там нет.

Запрос делаешь правильно. Переменные окружения задаёшь неправильно.

Чтобы задать переменную окружения внутри контейнера надо делать так Set environment variables in containers

̶П̶е̶р̶е̶м̶е̶н̶н̶ы̶е̶ ̶в̶ ̶.̶e̶n̶v̶ ̶о̶н̶и̶ ̶д̶л̶я̶ ̶d̶o̶c̶k̶e̶r̶-̶c̶o̶m̶p̶o̶s̶e̶,̶ ̶а̶ ̶н̶е̶ ̶д̶л̶я̶ ̶п̶р̶и̶л̶о̶ж̶е̶н̶и̶я̶ ̶в̶ ̶к̶о̶н̶т̶е̶й̶н̶е̶р̶е̶.̶
̶Н̶о̶ ̶т̶ы̶ ̶м̶о̶ж̶е̶ш̶ь̶ ̶з̶а̶п̶о̶л̶н̶я̶т̶ь̶ ̶п̶е̶р̶е̶м̶е̶н̶н̶ы̶е̶ ̶в̶ ̶e̶n̶v̶i̶r̶o̶n̶m̶e̶n̶t̶:̶ ̶и̶з̶ ̶.̶e̶n̶v̶

UPD
А нет, всё таки правильно. Передавать переменные из файла можно

version: "3"

services:
  client:
    build: client/
    command: npm run dev
    env_file:
      - ".env"
    ports:
      - "${CLIENT_PORT}:${CLIENT_PORT}"
    volumes:
      - ./client:/client

  api:
    build: api/
    command: npm run dev
    env_file:
      - ".env"
    ports:
      - "${API_PORT}:${API_PORT}"
    volumes:
      - ./api:/api

function collectValues(target, ...sources) {
  const onInput = () => target.value = sources.map(n => n.value).join(', ');
  sources.forEach(n => n.addEventListener('input', onInput));
  return () => sources.forEach(n => n.removeEventListener('input', onInput));
}


collectValues(...document.querySelectorAll('input'));

Хуки Vue синхронные. Никто никого не ждёт. Не вызывайте getMediaUrls пока не будет данных.

Если вызов происходит в шаблоне - во-первых: не используйте методы в шаблонах без крайней необходимости: вместо метода getMediaUrls должно быть computed свойство mediaUrls; во-вторых: скрывайте в шаблоне отображение пока не появятся данные: v-if="currentProductData"/v-if="currentProductData.length" и показывайте вместо этого какой-нить loader, Vue не запросит то, что скрыто под v-if пока условие не станет верным.

...upd: посмотрел полный код. Незачем выносить getMediaUrls в mounted и разрывать асинхронную цепочку. Вызывайте его сразу в getProductData, либо если currentProductData может меняться в иных случаях - сделайте, опять же, computed свойством. В крайнем случае можно вызывать его, повесив watch на currentProductData, но computed лучше.