Minifikator CSS

Co robi minifikator

Transformacje (nigdy nie zmieniają zachowania):

• Usunięcie komentarzy (wszystkich, w tym bloków /*! licencji).
• Usunięcie zbędnego whitespace (między selektorami, deklaracjami, klamrami).
• Usunięcie końcowych średników przed zamykającą klamrą.
• Zwinięcie wieloliniowych reguł w jedną.

I to wszystko, dlatego wynik działa identycznie jak oryginał: każdy selektor, właściwość i wartość zostaje dokładnie tak, jak ją napisałeś.

Typowe oszczędności

Na minifikację nakłada się gzip po stronie serwera, dodający kolejne 60–80% oszczędności, bo CSS jest mocno redundantny. Te dwa się sumują; zawsze rób oba.

Czego minifikacja nie robi

• Usuwa nieużywany CSS. To tree-shaking / PurgeCSS, wymagający analizy HTML albo komponentów.
• Skraca hexy kolorów, zwija jednostki zerowe ani nie łączy deklaracji. Te agresywne transformacje to zadanie cssnano, esbuilda albo Lightning CSS, nie tego narzędzia.
• Scala identyczne selektory w jeden. Ryzykowne, bo kolejność źródłowa wpływa na kaskadę; niektóre minifikatory próbują, większość pomija.
• Zmienia nazwy klas. To CSS-in-JS albo CSS Modules, nie minifikacja.
• Wstawia krytyczny CSS inline. To osobny krok build-time.

Zachowanie komentarzy licencyjnych

Wiele minifikatorów zachowuje komentarze zaczynające się od /*!, używane jako nagłówki licencji:

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

To narzędzie usuwa wszystkie komentarze. Jeśli Twój CSS zawiera nagłówki licencji, dodaj je z powrotem po minifikacji albo użyj build toola z opcją zachowywania licencji, takiego jak cssnano czy esbuild.

Source maps

Do debugowania w produkcji build tool generuje source map obok zminifikowanego wyjścia:

styles.min.css
styles.min.css.map

DevTools potrafią odczytać mapę i pokazać oryginalne, pretty-printed numery linii przy inspekcji elementu. To narzędzie nie generuje source map.

Minifikacja CSS w pipeline buildu

• Vite, Webpack, Parcel: robią to automatycznie w buildzie produkcyjnym.
• PostCSS z cssnano: standardowy samodzielny minifikator.
• esbuild: też obejmuje minifikację CSS.
• Presety cssnano: default dla bezpiecznych transformacji, advanced dla agresywnych (z pewnymi kompromisami).

To narzędzie nadaje się do jednorazowej minifikacji, szybkich poprawek i nauki tego, co minifikatory faktycznie robią. W procesie produkcyjnym używaj build toola, by źródło zostało czytelne, a minifikowane było tylko wyjście.

Kiedy minifikacja może zepsuć twój CSS

Rzadko, ale możliwe:

• Selektory wrażliwe na whitespace: .foo .bar vs. .foo.bar, spacja ma znaczenie.
• Wartości custom properties z odstępami: --shadow: 0 2px 4px rgba(0,0,0,0.1), przecinki wewnątrz rgba() nie mogą zostać wycięte.
• Niezamknięte komentarze blokowe: /* missing close zjada wszystko po sobie. Minifikatory potrafią się pomylić na zniekształconym wejściu.

Naprawa: zawsze przepuszczaj zminifikowany wynik przez lint/test, zanim go wyślesz.