Отключает csso на дев-сервере

[solarrust]

Что случилось

Локально дев-сервер отдавал 500 на демках к статьям про современный CSS — @container, @scope, вложенные слои, CSS-вложенность:

[vite] Internal server error: [postcss] postcss-csso: index.html?html-proxy&index=0.css:56:15: ")" is expected
  56 |      @container (max-width: 420px) {
     |                ^

Виноват не postcss — он свежий, 8.5.26. Виноват postcss-csso: он тянет csso@5.0.5, а тот жёстко пинит css-tree@2.2.1. Этот парсер не знает современного синтаксиса:

css-tree 2.2.1  @container: падает | @scope: падает | @layer a.b: падает | вложенность &: падает
css-tree 3.2.1  @container: ок     | @scope: ок     | @layer a.b: ок     | вложенность &: ок

Обновиться нельзя: postcss-csso не выходил с августа 2022, csso — с февраля 2023, css-tree тем временем ушёл на 3.2.1. Стоят самые новые версии, новых просто нет.

Под раздачу демки попадают потому, что Vite прогоняет через css-цепочку и инлайновые <style> из HTML. На проде этого нет: gulp гоняет postcss только по src/styles/{index.css,index.sc.css,dark-theme.css}, а демки уезжают passthrough-копией — поэтому doka.guide/css/container/ работает, а локальная копия нет. Заодно html-min в прод-ветке демки и так исключает (notDemo, minifyCss: false), так что минификация демок нигде и не задумывалась.

Что сделано

postcssCsso убран из vite-конфига. На дев-сервере минификация не даёт ничего — она там только ломает. В прод-сборке (gulpfile.js) csso остаётся нетронутым.

Чем проверяла

Юнит-тест сюда не ложится: это конфиг плагина Vite, а ломается всё на стыке Vite + postcss. Поэтому проверяла запуском.

До правки поднимала настоящий Vite с цепочкой из .eleventy.js на css/container/demos/basic/index.html — 500 и ошибка выше. После правки гоняла полный npm start и ходила по страницам:

Страница	Было	Стало
/css/container/demos/basic/	500	200
/css/scope/demos/basic/	500	200
/css/layer/demos/list-of-child-layers/	500	200
/js/number-is-nan/demos/index/	500	200
/css/container/	200	200

@container и @scope доезжают до браузера как есть, в логе дев-сервера ни одной ошибки postcss, /styles/index.css и /styles/dark-theme.css по-прежнему 200. npm run check зелёный целиком.

Что осталось за скобками

csso мёртв, и он же стоит в проде. Как только в src/styles появится @container, @scope или вложенность — упадёт уже боевая сборка (@property там уже есть, но его css-tree 2.2.1 переваривает). Замена на живой минификатор — отдельная задача, не сюда.

Ещё 15 демок падали по другой причине — опечатка ;; в контенте, она чинится в doka-guide/content#6134.

🤖 Generated with Claude Code

Превью контента из ae9714c опубликовано.