Обнаружение использования несуществующих имен классов в CSS Модули / React

Question

В моем реактивном проекте, если я использую какое-то несуществующее имя_класса из файла css modules,

 // mycss.modules.scss

.thing { color: red }

// index.jsx

import styles from mycss.modules.scss

<div className={styles.otherThing}>Some div</div>

// Browser would return:

<div>Some div</div>

, оно тихо терпит неудачу, не давая мне знать, что этот класс не существует. Как я могу проверить, существует ли это имя класса или нет, и выдать ошибку. Было бы здорово получить ошибку во время сборки, при сохранении файла.

Answer 1

Если вы не хотите выдвигать запрос на добавление, чтобы добавить что-то вроде параметра строгого режима в сам загрузчик веб-пакетов, я не думаю, что вы можете многое сделать, поскольку он является просто базовым объектом. Легкая альтернатива - просто набрать styles.styleName.toString(), поэтому, если styleName не определено, выдается ошибка.

Answer 2

Если вы открыты для машинописного решения, я нашел для вас один плагин TS.

typescript-plugin- css -модули

Он может заполнить styles объект с информацией о типе для доступных ключей.

Вам не нужно переключать весь проект на машинописный текст, вы можете добавить директиву // @ts-check вверху этого файла, чтобы включить проверку времени разработки механизма TS.

Answer 3

добавьте эту функцию вверху:

// index.jsx
import styles from mycss.modules.scss

function strictStyles (clsName){
  if(styles[clsName]){
    return styles[clsName]
  }else{
    throw "CSS class doesn't exist";
  }
}

...
<div className={strictStyles(otherThing)}>Some div</div>
...

Answer 4

На самом деле это возможно в javascript коде. Но я думаю, что проверка ClassName существовать не является хорошей идеей.

document.styleSheets[].rules[].selectorText

исходная ссылка Как определить, существует ли класс css с Javascript?