Как дебажить CSS Modules в production

Для дебага CSS Modules в production можно использовать несколько подходов:

1. Добавить уникальные имена классов в dev-режиме:

// webpack.config.js
{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: isProduction 
        ? '[hash:base64]' 
        : '[path][name]__[local]--[hash:base64:5]'
    }
  }
}

2. Использовать source maps в CSS:

// webpack.config.js
{
  loader: 'css-loader',
  options: {
    sourceMap: true
  }
}

3. Включить отладочные имена через специальный плагин:

npm install --save-dev babel-plugin-react-css-modules

4. Для временного дебага можно добавить атрибут data-test-id с именем компонента в JSX и соответствующий селектор в CSS.

Лучшая практика - настроить разные конфигурации для dev и prod, сохраняя читаемость классов в development.