Нам нужны твои мозги

Хотите расти как разработчик и найти крутую работу? Не протирайте штаны — займитесь Open Source проектами. Так легче всего попасть в лучшие команды разработчиков и положить себе в резюме настоящий проект, вместо нелепых «примеров кода». Но найти подходящий проект для участия сложно. Начинаются лень и отговорки, а за ними — отсутствие профессионального роста, критики по-настоящему крутых программистов, уныние и застой.

На Cult of Martians мы собираем интересные задачи для современных веб-программистов. Можно выбрать подходящую по сложности, продолжительности и специализации. Задачи не выдуманы «из воздуха» — каждая решает насущную проблему, и решить ее можно через создание нового Open Source проекта или улучшение существующего. Решайте задачи, прокачивайтесь, присылайте решение на оценку. Лучших могут пригласить к себе на работу компании, программистам которых понравится ваше решение.

В работе 0Короткие 0Длинные 0Сделано 229
Помощь запрашивал
Андрей Ситник
 Андрей Ситник
Помог
Евгений Петухов
 Евгений Петухов

Фронт: Исправить логику вставки row/column в Автопрефиксере

Для новичков, задача на неделю

Autoprefixer умеет вставлять префиксы Grid Layout для Internet Explorer. Поддерживается даже grid-template-areas.

Но, в некоторых случаях, префиксы для grid-template-areas в медиа-выражении могут быть вставлены не в том месте. Нужно изменить логику.

Польза: указать в резюме коммит в известный проект.

Сейчас для кода

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "a   b"
    "c   d";
}
@media (min-width: 600px) {
  .grid {
    grid-template-areas: "a   b   c   d";
  }
}
.grid__cell--a {
  grid-area: a;
}

Autoprefixer сгенерирует:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr) [2];
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "a   b"
    "c   d";
}
@media (min-width: 600px) {
  .grid {
    grid-template-areas: "a   b   c   d";
  }
  .grid__cell--a {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
}
.grid__cell--a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

В итоге, код будет работать неправильно, так как второй .grid__cell--a (вне @media) перезапишет значение первого. Правильный вариант:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr) [2];
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "a   b"
    "c   d";
}
@media (min-width: 600px) {
  .grid {
    grid-template-areas: "a   b   c   d";
  }
}
.grid__cell--a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}
@media (min-width: 600px) {
  .grid__cell--a {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
}
  1. Форкнуть Автопрефиксер.
  2. Поправить или добавить тесты в файлах в test/cases/grid-template-*.
  3. Изменить логику insertAreas.
Посмотреть решение