Repository navigation
Переводит сборку стилей на lightningcss - #1377
Merged
Merged
Conversation
postcss-csso не выходил с августа 2022, csso — с февраля 2023, и внутри он держит css-tree 2.2.1, который не знает ни @container, ни @scope, ни вложенных слоёв, ни вложенности. Обновить нельзя: новых версий просто нет. postcss-media-minmax из той же эпохи, июнь 2022. lightningcss закрывает всё разом: собирает @import, ставит префиксы, компилирует синтаксис под browserslist и минифицирует. Вместе с ним уезжают postcss, postcss-import, postcss-media-minmax, postcss-csso, autoprefixer и gulp-postcss — шесть пакетов на один. Targets считаются из поля browserslist в package.json и лежат в config/css.js, чтобы дев-сервер и прод-сборка не разъезжались. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
solarrust
requested review from
HellSquirrel,
furtivite and
igsekor
as code owners
September 1, 2026 09:58
Раньше поле browserslist ни на что толком не влияло: autoprefixer по нему ставил префиксы, а компиляцией синтаксиса занимался postcss-media-minmax, который смотрел не на browserslist, а никуда. С lightningcss поле стало настоящим переключателем поддержки, и его значение пора было починить. `last 2 version` — это Chrome 150 и Safari 26.5, позавчерашние релизы. `defaults` — стандартный набор browserslist, а порог 16.4 по Safari взят не с потолка: в этой версии в Safari приехали разом range-синтаксис медиазапросов, булева логика MQ4 и :has(). Ниже него lightningcss начинает компилировать медиазапросы и на строгих неравенствах выдаёт синтаксис, которого в старом Safari всё равно нет. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
monochromer
reviewed
Sep 1, 2026
|
|
||
| await Promise.all( | ||
| styleEntries.map((entry) => | ||
| writeFile(path.join('dist/styles', entry), bundleStyle(path.join('src/styles', entry))), |
Member
Author
There was a problem hiding this comment.
Валидно, надо будет оставить только его и для локальной и для продакшен сборки. В следующих сериях =)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Продолжение #1376: тот убрал csso с дев-сервера, этот убирает его вообще.
Зачем
Половина css-цепочки — археология, и она уже мешает:
postcss-cssocsso(внутри)css-tree(внутри csso)postcss-media-minmaxcss-tree 2.2.1не знает@container,@scope, вложенных слоёв и CSS-вложенности. Обновиться некуда — новых версий не выходит. Пока современный синтаксис есть только в демках, это ломало дев-сервер; как только он появится вsrc/styles, упадёт боевая сборка.Что сделано
lightningcssзакрывает всё, чем занимались пять пакетов: собирает@import, ставит префиксы, компилирует синтаксис под browserslist, минифицирует. Ушлиpostcss,postcss-import,postcss-media-minmax,postcss-csso,autoprefixer,gulp-postcss— шесть пакетов на один,cssoпропал из дерева зависимостей целиком.Targets считаются из поля
browserslistвpackage.jsonи живут вconfig/css.js— общем дляgulpfile.jsи Vite, чтобы дев-сервер и прод не разъезжались.Тесты —
config/__tests__/css.js, 8 штук: сборка@import, префиксы по targets и по одному кейсу на каждый синтаксис, который ронял csso.Заодно починен browserslist
Раньше это поле почти ни на что не влияло: по нему autoprefixer расставлял префиксы, а компиляцией синтаксиса занимался
postcss-media-minmax, который не смотрел ни на какой browserslist и переписывал range-медиазапросы всегда. С lightningcss поле стало настоящим переключателем поддержки — и обнаружилось, что записано тамlast 2 version, то есть Chrome 150 и Safari 26.5, позавчерашние релизы.Стало
defaults(стандартный набор browserslist:> 0.5%, последние две версии, Firefox ESR, живые браузеры) плюс порог 16.4 по Safari и iOS. Порог не с потолка: в Safari 16.4 приехали разом range-синтаксис медиазапросов, булева логика MQ4 и:has(). Ниже него lightningcss начинает компилировать медиазапросы, а на строгих неравенствах вроде(width < 768px)выдаётnot (min-width: 768px)— синтаксис MQ4, которого в старом Safari всё равно нет, так что правило просто не применится.Что это даёт по сравнению с тем, что собиралось раньше:
last 2 versiondefaults+ 16.4index.cssmin-width/max-widthRange-синтаксис теперь доезжает до браузера как написан, без перевода в
min-width/max-width— все браузеры выборки его понимают. Префиксов больше, чем приlast 2 version, и меньше, чем ставил autoprefixer: часть старых ему уже была не нужна.Ещё пропал
@charset 'utf-8': lightningcss его убирает, потому что всегда пишет UTF-8. В файле есть четыре не-ASCII символа (✎,✅,❌вcontent), а сервер отдаётtext/cssбез charset — проверила на превью, браузер читает их правильно (U+270E, U+2705, U+274C). По CSS Syntax 3 дефолт и есть UTF-8.Остальные различия выдачи безобидны: слияние правил с одинаковыми объявлениями,
border: 0→border: none,background-position: center→50%. Ещё lightningcss добавляет пару служебных переменных--lightningcss-light/--lightningcss-dark— это заготовка полифиллаlight-dark(), которая срабатывает отcolor-scheme: light darkвbase-colors.css. Сейчасlight-dark()в стилях не используется, переменные никто не читает, а когда функция появится — она будет работать.Чем проверяла
После ребейза на свежий
mainвсё прогнано заново, начиная сnpm ci, и потом ещё раз после смены browserslist:npm run check— зелёный целиком, включая 8 новых тестов.npm run build— проходит,dist/stylesна месте, кеш-хэши проставились, страницы ссылаются на существующие файлы. Таскstylesстал 13 мс вместо секунд.npm start— поднимается,/styles/index.cssотдаётся собранным (ни одного@import, 1145 правил, префиксы на месте), в логе ни одной ошибки./css/display/в светлой теме, страница участника,/css/container/и её демка — на десктопе, планшете (768) и мобильном (375). Демка@containerработает: при ширине контейнера 402px карточки перестраиваются в 2 колонки,container-type: inline-sizeприменён. Демка@container style()и демка@scopeтоже отрабатывают по существу, а не просто отдают 200.@container,@scope, вложенные слои, вложенность — теперь 200.npm run lint:htmlпрогнать не удалось: валидатору нужна Java 17, а на машине только 11 и 13. К правке это не относится — HTML эта работа не трогает, в CI (setup-java@v4,java-version: 17) проверка отработает.Ещё замечание не по теме:
npm iна ноде 22 падает —editorconfig-checker@7требует>=24.14.0, а в.npmrcстоитengine-strict = true. Ставила и собирала на 24.20 из nvm, как и написано в.nvmrc.🤖 Generated with Claude Code