Карты исходников

После PostCSS в CSS появляются префиксы, развёрнутая вложенность, склеенные файлы — номера строк уже не совпадают с вашими исходниками. Карта исходников (source map) — это данные, которые связывают каждую строку итогового CSS со строкой исходного файла. С ней инструменты разработчика в браузере показывают post-card.css:4, а не строку в собранном css/main.css.

Два способа хранения

Способ	Где карта	Когда удобно
Встроенная	В конце самого CSS, в виде строки base64	Быстрые эксперименты
Внешняя	В отдельном файле `main.css.map`	Обычная работа, CSS остаётся компактным

Без файла настроек postcss-cli пишет встроенную карту по умолчанию — вы видели её в уроке об установке. Флаг -m (или --map) переключает на внешнюю, --no-map отключает карту.

Карта в postcss.config.js

Когда есть файл настроек, карты управляются его параметром map. Добавьте его рядом с plugins:

// postcss.config.js
import autoprefixer from 'autoprefixer';
 
export default {
  map: { inline: false },
  plugins: [autoprefixer()],
};

inline: false означает «записать карту в отдельный файл». Выполните npx postcss styles/main.css -o css/main.css. В папке css/ появятся два файла, и css/main.css заканчивается ссылкой на карту:

.post-card {
  padding: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
 
/*# sourceMappingURL=main.css.map */

А в css/main.css.map лежит JSON:

{"version":3,"sources":["../styles/main.css"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,yBAAiB;KAAjB,sBAAiB;UAAjB,iBAAiB;AACnB","file":"main.css","sourcesContent":[".post-card {\n  padding: 16px;\n  user-select: none;\n}\n"]}

Поле sources указывает исходный файл, sourcesContent хранит его текст, а mappings — закодированное соответствие строк. Читать его вручную не нужно.

Значения параметра map

Значение	Результат
`{ inline: false }`	Отдельный файл `.map` и ссылка на него
`true`	Карта встроена в конец CSS
`false` или параметра нет	Карты нет

Как это выглядит в браузере

Откройте страницу блога, затем инструменты разработчика (F12) и выберите заголовок карточки. На вкладке стилей рядом с правилом .post-card будет ссылка main.css:1 — на строку в styles/main.css, а не в собранном файле. Щелчок по ней откроет исходник. Если карты нет, ссылка ведёт в css/main.css.

В Vite карты CSS в режиме разработки включаются параметром css.devSourcemap: true в vite.config.js.

Частая ошибка

Указать -m в команде и ждать файл .map, когда в проекте есть postcss.config.js. При наличии файла настроек postcss-cli берёт параметры карт из него, и флаг ничего не меняет. Задавайте map в самом файле настроек.

Спасибо, что читаете!