VulCode
Blog

Autoprefixer: odstępy siatki z grid-row-gap i grid-column-gap nie giną przy dziedziczeniu

Reguła, która dziedziczy grid-template-areas, przejmowała odstęp tylko z grid-gap. Odstęp ustawiony przez grid-row-gap i grid-column-gap znikał z prefiksów -ms-grid.

DualFroz - VulCode CEODualFroz - VulCode CEO1 min czytania
Autoprefixer: odstępy siatki z grid-row-gap i grid-column-gap nie giną przy dziedziczeniu - DualFroz - VulCode CEO
Tytuł zmiany w repozytorium
Inherit grid gap set with the row-gap and column-gap longhands
Scalono
15.09.2026
Opisano tutaj
6.10.2026

Wpis powstał 21 dni po scaleniu zmiany.

Autoprefixer
Technologie:JavaScriptCSSPostCSS

Co nie działało

Autoprefixer potrafi zamienić grid-template-areas na starszą składnię -ms-grid-columns i -ms-grid-rows. Kiedy reguła dziedziczy obszary siatki po innej, na przykład .karta.modyfikator po .karta, odstęp między kolumnami trzeba skopiować z reguły rodzica, bo bez niego wyliczone kolumny się nie zgadzają.

Kod szukał tego odstępu tylko w skrócie grid-gap. Jeśli kontener ustawiał odstępy osobno, przez grid-row-gap i grid-column-gap, reguła dziedzicząca dostawała -ms-grid-columns: (1fr)[2] zamiast 1fr 50px 1fr, czyli siatkę bez odstępu.

Co zmieniliśmy

Funkcja getGridGap już rozpoznawała obie formy przez wyrażenie regularne, tylko dziedziczenie z niej nie korzystało. Wyrażenie trafiło do wspólnej stałej i obie ścieżki używają teraz tej samej reguły:

javascript
const GAP_PROPS = /^(grid-)?((row|column)-)?gap$/

// find gap values, set either by the shorthand or by the longhands
r.walkDecls(GAP_PROPS, d => (gridGap = getGridGap(d)))

Jak to sprawdziliśmy

Do przypadków testowych grid-gap.css doszła para reguł .longhand-gap i .longhand-gap.modifier z odstępami ustawionymi przez właściwości składowe. Oczekiwany wynik to -ms-grid-columns: 1fr 50px 1fr i -ms-grid-rows: 100px 40px 100px w obu regułach. W opisie zmiany zaznaczyliśmy, że ten błąd może stać za zgłoszeniami #1243 i #1181, ale nie udało się potwierdzić, której składni tam użyto.

Efekt

Zmianę scalono 15 września 2026. To nasza druga zmiana przyjęta w Autoprefixerze, obok poprawki źródeł w mapach źródeł dla prefiksów siatki.

Wtyczka PostCSS, która dodaje prefiksy przeglądarek do CSS na podstawie danych Can I Use.

Język
JavaScript
Gwiazdki na GitHubie
22 209

Ten sam przypadek przed zmianą i po niej

Na przykładzie z wpisu: co wychodziło przed poprawką i co wychodzi teraz.

Reguła z przypadków testowych grid-gap.css
.longhand-gap.modifier

Dziedziczy grid-template-areas po .longhand-gap, który ustawia odstępy osobno, przez grid-row-gap i grid-column-gap.

Przed zmianą
-ms-grid-columns: (1fr)[2]

Siatka bez odstępu: dziedziczenie szukało go tylko w skrócie grid-gap.

Po zmianie
-ms-grid-columns: 1fr 50px 1fr
-ms-grid-rows: 100px 40px 100px

Odstęp jest w obu regułach, bo dziedziczenie używa tego samego wyrażenia co getGridGap.

Czego nas to nauczyło

Właściwości skrócone i pełne w CSS muszą dawać ten sam wynik po przetworzeniu. Narzędzie, które zmienia CSS, ma zachować też mapę źródeł.

Wartości z opisu błędu i z oczekiwanego wyniku testu w pull requeście #1557.

Pytania o zmianę #1557

Gdzie jest zmiana, jak ją sprawdziliśmy i kto ją przyjął.