Как не пропускать css клас в комит?

Question

[Alex]

Есть простой проект. Написан на 11ty. В нем используется шаблонизатор Nunjucks.
Суть проблемы: иногда для отладки в одном конкретном файле для одного конкретного html элемента добавляется клас. Но очень важно чтобы этот клас не попал в прод и был удалёт перед комитом.

Как это можно решить? Использовать валидатор html и как-то внедрять в него свои правила? Или использовать какой-то фреймворк для тестов и уже внутри него самостоятельно парсить html и проверять? И что в таких случаях принято проверять: файл с исходным кодом, или итоговый html?

Comments

[Алекс Глебов]

Ну как бы надо смотреть что ты коммитишь. Поставь графическое представление гита, которое показывает diff. Github desctop и подобные.

[Alex]

Алекс Глебов, Так дело в том, что об этом просто забываешь. Добавляешь класс для отладки. Правишь верстку несколько дней. Переключаешься на другие задачи. Потом возвращаешься. Доделываешь. И коммитишь забыв удалить вспомагательный клас :(
Вот и подумал про какой-то механизм, чтоб бил по рукам

[RAX7]

Alex, не проще в css предпроцессор прокидывать переменную DEBUG и исходя из значения этой переменной компилить css

/* SCSS */
$DEBUG: false !default;

@if $DEBUG {
  .debug-stuff {
    outline: 1px solid red;
  }
}

в html класс останется, но вреда от него не будет.

[Alex]

RAX7, Не проще так как:

1. Препроцессор не используется
   
2. Появится точно та же проблема: не пропускать комиты в которых $DEBUG: true
   

[Златослав Десятников]

Alex, переменная окружения может быть установлена в только на компьютере разработчика.

Второй вариант — git hooks (об этом написали ниже).

Answer 1

[Aleksey Solovyev]

Возможно, я неправильно понимаю задачу, но что Вам мешает передать в Nunjucks переменную и использовать ее для условного рендеринга?

Что я имею ввиду:
Пример для WebPack:
nunjucks.config.js

module.exports = {
  data: {
    isDev: process.env.NODE_ENV === 'development'
  }
}

template.njk

<div {% if isDev %} class="debug" {% endif %} ></div>
<!-- or -->
<div class="{{ 'debug' if isDev }}"></div>

Для 11ty по аналогии. Только использовать addGlobal

Comments

[Alex]

Тут дело вот в чем:
на странице есть карточка. При добавлении класса "flip" она переворачивается. Но иногда, когда нужно вносить много изменений в верстку "обратной стороны" разработчик заранее добавляет класс flip в тело документа, чтобы эта карточка сразу была перевернута и по ней не доводилось кликать. То есть этот класс не отдельный от верстки. Он добавляется по клику, но иногда, для упрощения разработки от предустанавливается. И вот перед коммитом его нужно удалять.
Но это происходит не всегда. То есть это не зависит от окружения, а зависит от конкретной задачи.

[Aleksey Solovyev]

Alex, разве мой способ не решает проблему? Используйте свою переменную - IM_CARD_DEBUGGER. При разработке устанавливайте ее в значение true (возможно, Вам тут нужно какое-то более сложное условие, чем просто process.env.NODE_ENV === 'development'). При сборке проекта устанавливаете в значение false

Например,
nunjucks.config.js: isDebugCard = !!process.env.IM_CARD_DEBUGGER

Запускайте разработку проекта со своим флагом\переменной для работы над карточкой:
yarn start dev --env.IM_CARD_DEBUGGER
Просто разработка:
yarn start dev

Сборка проекта:
yarn build

Вы же можете гибко настроить под себя переменные окружения.

[Alex]

Aleksey Solovyev, Да, действительно, это решает проблему

Answer 2

[Aetae]

Дёшево и сердито: пре-коммит хук, который простым grep-ом ищет это имя класса и не даёт коммитить если находит.)