mirror of
https://github.com/Matysh/houseplan-card
synced 2026-10-06 22:49:16 +00:00
perf(build): the stylesheet minifier had never run
It looked for the tag written as `css` immediately followed by a backtick. The plugin is a Rollup transform, so the module has already been through TypeScript by the time it arrives, and the TS printer puts a space there: `css `. The guard therefore returned null for every stylesheet in the project, and minification never ran once — around 23 KB of explanatory comments went to every user in every release. Matching the tag as a word with optional whitespace turns it on: chunk, raw 1 079 508 -> 1 021 115 B (-58 393) initial view 300 111 -> 287 284 B gzip (-12 816) room to the budget 955 -> 13 782 B The ceiling moves down with the fact, as the tool asks when a graph shrinks past the band. The risk is not the two lines; it is that 23 KB of CSS is minified for the first time. Two witnesses cover it: a browser smoke that puts the original and the minified text into separate stylesheets and compares the serialised rules — 1 049 of them, identical up to the whitespace policy the minifier declares — and a test that takes real comment text out of src/styles and requires it to be absent from dist, so a plugin that silently stops working cannot pass again. Issue: #526 User-Visible: yes
This commit is contained in:
@@ -2,6 +2,12 @@
|
||||
|
||||
## Unreleased
|
||||
|
||||
- The card downloads 12.8 KB less on a cold start. The stylesheet minifier had
|
||||
never actually run — it looked for its tag written one way and the build hands
|
||||
it another — so every explanatory comment inside the stylesheets was shipped
|
||||
to the browser. Nothing looks or behaves differently; the plan simply arrives
|
||||
sooner ([#526](https://github.com/Matysh/houseplan-card/issues/526)).
|
||||
|
||||
- The plan is smooth again in Firefox. A device marker's shadow is sized from
|
||||
the marker, which is sized from the container, so anything that changed the
|
||||
container width — a tooltip, a scrollbar, a rotation — restarted a shadow
|
||||
|
||||
@@ -8,6 +8,12 @@
|
||||
|
||||
## Не выпущено
|
||||
|
||||
- Карточка скачивается на 12,8 КБ меньше при холодном старте. Минификатор
|
||||
таблиц стилей не работал ни разу — он искал свой тег в одном написании, а
|
||||
сборка отдаёт его в другом, — поэтому все пояснительные комментарии из стилей
|
||||
уезжали в браузер. Внешне и по поведению не меняется ничего, план просто
|
||||
появляется раньше ([#526](https://github.com/Matysh/houseplan-card/issues/526)).
|
||||
|
||||
- План снова плавный в Firefox. Тень маркера устройства считается от размера
|
||||
маркера, а он — от ширины контейнера, поэтому всё, что эту ширину меняло —
|
||||
подсказка, полоса прокрутки, поворот экрана, — заново запускало анимацию
|
||||
|
||||
@@ -279,6 +279,26 @@ node scripts/bundle-tree.mjs dist custom_components/houseplan/frontend
|
||||
|
||||
The full HA pytest harness requires Linux/WSL; native Windows lacks `fcntl`.
|
||||
|
||||
## The stylesheet minifier sees TypeScript output, not the source (#526)
|
||||
|
||||
`scripts/css-template-minifier.mjs` runs as a Rollup transform, and by then the
|
||||
module has already been through TypeScript. The TS printer puts a space between
|
||||
a tag and its template, so the source `css`…`` arrives as `css `…``.
|
||||
|
||||
The plugin used to look for the exact string `css` + backtick and therefore
|
||||
returned `null` for every stylesheet in the project: minification never ran
|
||||
once, and roughly 23 KB of explanatory comments were shipped to every user —
|
||||
12.8 KB gzipped in the initial chunk.
|
||||
|
||||
Two consequences for anyone touching this area:
|
||||
|
||||
- match the tag as a word followed by optional whitespace, never as a literal
|
||||
two-character string;
|
||||
- the guard that keeps this honest is not inside the plugin but in
|
||||
`test/bundle-assets.test.mjs`: it takes real comment text out of
|
||||
`src/styles/*.ts` and asserts none of it appears in `dist/**`. A plugin that
|
||||
silently stops working cannot pass it.
|
||||
|
||||
## Do not animate container-relative properties on the plan (#524)
|
||||
|
||||
A CSS property whose value is expressed in container query units — `cqw`,
|
||||
|
||||
Reference in New Issue
Block a user