как отказаться от селекторов CSS в IDE

Question

Я ищу решение, с его помощью я могу пометить селектор в моих файлах scss как устаревший. Затем, если я работаю с файлом html и в то же время хочу использовать этот «устаревший-селектор», моя IDE должна пометить селектор и показать мне сообщение об устаревании. Хотелось бы чего-то похожего:

      /**
 * @deprecated Please use '.ui-fresh__selector' instead!
 */
.ui-old__selector {...}

... как и в случае с JSDoc. Также было бы неплохо добиться этого с помощью .editorconfigили с помощью какого-нибудь инструмента для линтинга. Например, было бы здорово, если бы я мог установить массив в файле конфигурации со всеми этими устаревшими селекторами ... или что-то в этом роде? 🤔 Было бы также важно показать это сообщение об устаревании в среде IDE, и не только позже, на этапе сборки / компиляции. Похоже, что найти для этого подходящее решение довольно сложно.

Любые предложения приветствуются! Спасибо ребята!

Answer 1

После некоторых разговоров у нас есть решение - поддержка sassdoc в IDE!
Хорошо ... Почти готово! У команды Jetbrains уже есть запрос на добавление новых функций! Нам нужно только протолкнуть несколько сотен голосов ГОЛОСОВ - затем они будут встроены в IDE Jetbrains.
Давай, ребята!
https://youtrack.jetbrains.com/issue/WEB-12829
Сделайте наш рабочий процесс Frontend снова отличным! Вместе мы сможем это сделать! ;)

Answer 2

Эти вещи относятся к сфере линтеров. Я ничего не знаю о возможностях html-линтеров. Но у вас все еще будет другая проблема: во многих случаях имя класса формируется только тогда, когда SASS скомпилирован в CSS.

      /**
 * @deprecated Please use '.ui-fresh__selector' instead!
 */
.ui-old {
    &__selector {}
}

.ui-fresh {
    &__selector {}
}

Но вы можете создать предупреждение об устаревании, которое будет отображаться (при визуализации) вокруг всех элементов, использующих старый стиль. Вы можете настроить свой веб-пакет (или любой другой пакет, который вы используете), чтобы включать предупреждение об устаревании, только если это сборка DEV, но никогда в сборке PROD.

      @import "deprecation";

/**
 * @deprecated Please use '.ui-fresh__selector' instead!
 */
.ui-old {
    @include deprecated;
    &__selector {}
}

.ui-fresh {
    &__selector {}
}

а также

      // _deprecation.scss
@mixin deprecated {
    @if $env == development {
        border: 4px solid red !important;
    }
}

в $env переменную можно установить в конфигурации вашего веб-пакета через sass-loader вариант additionalData

      {
    loader: 'sass-loader',
    options: {
        additionalData: '$env: ' + process.env.NODE_ENV + ';'
    },
},