PostCSS
 | |
| Deweloper (y) | Andrey Sitnik, Ben Briggs, Bogdan Chadkin |
|---|---|
| Pierwsze wydanie | 4 listopada 2013 |
| Wersja stabilna |  8.4.21 / 6 stycznia 2023 r
|
| Magazyn | postcss |
| Napisane w | JavaScript |
| System operacyjny | Wieloplatformowy |
| Dostępne w | język angielski |
| Typ | Narzędzie do tworzenia CSS |
| Licencja | Licencja MIT |
| Strona internetowa | |
PostCSS to narzędzie programistyczne , które wykorzystuje wtyczki oparte na JavaScript do automatyzacji rutynowych operacji CSS . Został zaprojektowany przez Andreya Sitnika, a pomysł wziął się z jego front-endowej pracy dla Evil Martians.
Funkcjonalność
PostCSS to framework do tworzenia narzędzi CSS. Można go wykorzystać do opracowania języka szablonów, takiego jak Sass i LESS.
Rdzeń PostCSS składa się z:
- Parser CSS generujący abstrakcyjne drzewo składni
- Zestaw klas składających się na drzewo
- Generator CSS , który generuje linię CSS dla drzewa obiektów
- Generator mapy kodu dla wprowadzonych zmian CSS
Funkcje są udostępniane za pośrednictwem wtyczek. Wtyczki to małe programy pracujące z drzewem obiektów . Gdy rdzeń przekształci ciąg CSS w drzewo obiektów, wtyczki analizują i zmieniają drzewo. Następnie PostCSS generuje nowy ciąg CSS dla drzewa zmienionego przez wtyczkę.
PostCSS i jego wtyczki są napisane w JavaScript i dystrybuowane za pośrednictwem npm , które oferują interfejsy API dla niskopoziomowych operacji JavaScript.
Istnieją oficjalne narzędzia umożliwiające używanie PostCSS z systemami kompilacji, takimi jak Webpack , Gulp i Grunt . Dostępny jest także interfejs konsoli. Do otwarcia PostCSS w przeglądarce można użyć narzędzia Browserify lub Webpack .
Składnie
PostCSS umożliwia zmianę parsera i generatora. W tym przypadku PostCSS może zostać użyty do pracy ze Less i SCSS . Jednak PostCSS sam w sobie nie może skompilować Sass lub Less do CSS. Powoduje zmianę oryginalnych plików — na przykład sortowanie właściwości CSS lub sprawdzanie kodu pod kątem błędów. PostCSS obsługuje SugarSS.
Wtyczki
Wtyczki PostCSS wykonują różne zadania przetwarzania CSS, od analizy i sortowania właściwości po minimalizację .
Pełną listę wtyczek można znaleźć na postcss.parts, z kilkoma przykładami wymienionymi poniżej.
- Autoprefixer do dodawania i usuwania prefiksów przeglądarki.
- Moduły CSS umożliwiające izolowanie selektorów CSS i porządkowanie kodu. Jest dostarczany jako część pakietu Webpack .
- stylelint do analizy kodu CSS pod kątem błędów i sprawdzania spójności stylu.
- stylefmt naprawia kod CSS zgodnie z ustawieniami stylelint.
- PreCSS do wykonywania niektórych funkcji przetwarzania wstępnego Sass / Less .
- postcss-preset-env do emulacji funkcji z niedokończonych wersji roboczych specyfikacji CSS.
- cssnano , aby zmniejszyć rozmiar CSS, usuwając spacje i przepisując kod.
- RTLCSS do zmiany kodu CSS tak, aby projekt nadawał się do pisania od prawej do lewej (tak jest stosowane w języku arabskim i hebrajskim ).
- postcss-assets , postcss-inline-svg i postcss-sprites do pracy z grafiką.
Historia
W trakcie projektu Rework pomysł modułowego przetwarzania CSS został zasugerowany przez TJ Holowaychuka 1 września 2012 r. 28 lutego 2013 r. TJ wyraził to publicznie.
14 marca 2013 r. Andrey Sitnik pracował nad Evil Martians zaowocując Autoprefixerem, wtyczką opartą na Rework. Początkowo nazwa wtyczki brzmiała rework-vendors.
W miarę rozwoju Autoprefixera Rework nie był już w stanie zaspokoić jego potrzeb. 7 września 2013 Andrey Sitnik zaczął rozwijać PostCSS w oparciu o pomysły Rework.
W ciągu 3 miesięcy ukazała się pierwsza wtyczka PostCSS, grunt-pixrem. 22 grudnia 2013 r. migracja Autoprefixera w wersji 1.0 do PostCSS.
W przypadku PostCSS głównym celem stylu jest alchemia . Logo projektu przedstawia kamień filozoficzny . Większe i mniejsze wersje PostCSS otrzymały swoje nazwy od demonów Ars Goetia . Na przykład wersja 1.0.0 nazywa się Marquis Decarabia.
Termin postprocesor spowodował pewne zamieszanie. Zespół PostCSS użył tego terminu, aby pokazać, że PostCSS nie jest językiem szablonów (preprocesorem), ale narzędziem CSS. Jednak niektórzy programiści uważają, że termin postprocesor lepiej pasowałby do narzędzi przeglądarki (na przykład -bez prefiksu). Sytuacja stała się jeszcze bardziej skomplikowana po wydaniu PreCSS. Teraz zamiast postprocesora zespół PostCSS używa terminu procesor.