Как сборщик узнает какие CSS классы используются

Сборщики (например, Webpack с плагинами типа PurgeCSS) анализируют код на предмет использования CSS-классов. Они сканируют:

1. HTML-файлы - ищут классы в атрибутах class
2. JavaScript/JSX - анализируют строковые литералы, className в React, динамические классы
3. Шаблоны (Vue, Svelte и др.) - парсят шаблонные синтаксисы

Пример работы PurgeCSS в Webpack:

// webpack.config.js
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync('./src/**/*', { nodir: true }),
    }),
  ],
};

Нюансы:

• Динамические классы (classList.add()) могут быть пропущены
• Классы, генерируемые через CSS-in-JS, обычно не требуют очистки
• Ложно-позитивные срабатывания можно обработать через safelist