PostCSS: Nowa data gry Sassa

Ostatnio PostCSS jest narzędziem, które krąży po front-endowej stronie tworzenia stron internetowych.

PostCSS został opracowany przez Andreya Sitnika, twórcę Autoprefixera. Jest to pakiet Node.js opracowany jako narzędzie do przekształcania całego kodu CSS za pomocą JavaScript, dzięki czemu osiąga znacznie szybsze czasy kompilacji niż inne procesory.

Pomimo tego, co sugeruje jego nazwa, nie jest to postprocesor (ani preprocesor), ale raczej transpiler do zamiany składni specyficznej dla PostCSS (lub specyficznej dla wtyczki PostCSS, by być bardziej precyzyjnym) w składnię waniliowy CSS.

Biorąc to pod uwagę, nie oznacza to, że PostCSS i inne procesory CSS nie mogą ze sobą współpracować. W rzeczywistości, jeśli jesteś nowy w całym świecie pre/post-processingu CSS, używanie PostCSS razem z Sassem może oszczędzić Ci wielu bólów głowy, którymi zajmiemy się wkrótce.

PostCSS nie zastępuje innych procesorów CSS; raczej spójrz na to jako kolejne narzędzie, które może się przydać w razie potrzeby, kolejny dodatek do zestawu narzędzi.

Wykorzystanie PostCSS ostatnio zaczęło rosnąć wykładniczo, a obecnie są używane przez niektóre z największych firm z branży technologicznej, takie jak Twitter, JetBrains i Wikipedia. Jego powszechne przyjęcie i sukces wynika w dużej mierze z jego modułowości.

Wtyczki, wtyczki, wtyczki

PostCSS to przede wszystkim wtyczki.

Pozwala wybrać wtyczki, których będziesz używać, porzucając niepotrzebne zależności i zapewniając zarówno szybką, jak i lekką konfigurację do pracy, z podstawowymi cechami innych preprocesorów. Pozwala także stworzyć bardziej dostosowaną strukturę przepływu pracy, zachowując przy tym jego wydajność.

Na dzień napisania tego posta PostCSS posiada repozytorium ponad 200 wtyczek, z których każda odpowiada za inne zadania. W repozytorium GitHub PostCSS wtyczki są podzielone na kategorie według „Rozwiąż globalne problemy CSS”, „Użyj przyszłego CSS już dziś”, „Lepsza czytelność CSS”, „Obrazy i czcionki”, „Linters” i „Inne”.

Jednak w katalogu wtyczek znajdziesz dokładniejszą kategoryzację. Radzę zajrzeć tam samemu, aby lepiej zorientować się w możliwościach kilku z nich; są dość szerokie i dość imponujące.

Prawdopodobnie słyszałeś o najpopularniejszej wtyczce PostCSS, Autoprefixer, która jest popularną samodzielną biblioteką. Drugą najpopularniejszą wtyczką jest CSSNext, wtyczka umożliwiająca korzystanie z najnowszej składni CSS, takiej jak na przykład nowe niestandardowe właściwości CSS, bez martwienia się o obsługę przeglądarki.

Jednak nie wszystkie wtyczki PostCSS są tak przełomowe. Niektóre po prostu dają możliwości, które prawdopodobnie wychodzą z pudełka z innymi procesorami. Weźmy na przykład parent selector . Dzięki Sassowi możesz zacząć z niego korzystać od razu po zainstalowaniu Sassa. W przypadku PostCSS musisz użyć postcss-nested-ancestors . To samo może dotyczyć extends lub mixins .

Jaka jest więc zaleta korzystania z PostCSS i jego wtyczek? Odpowiedź jest prosta - możesz wybrać własne bitwy. Jeśli uważasz, że jedyną częścią Sassa, której będziesz używać, jest parent selector , możesz oszczędzić sobie stresu związanego z implementacją czegoś takiego jak instalacja biblioteki Sass w swoim środowisku w celu kompilacji CSS i przyspieszyć ten proces, używając tylko PostCSS i postcss-nested-ancestors .

To tylko jeden przykładowy przypadek użycia PostCSS, ale kiedy sam zaczniesz to sprawdzać, z pewnością zdasz sobie sprawę z wielu innych przypadków użycia.

Podstawowe użycie PostCSS

Najpierw przyjrzyjmy się podstawom PostCSS i przyjrzyjmy się, jak jest zwykle używany. Chociaż PostCSS jest niezwykle potężny, gdy jest używany z programem uruchamiającym zadania, takim jak Gulp lub Grunt, można go również używać bezpośrednio z wiersza poleceń za pomocą postcss-cli.

Rozważmy prosty przykładowy przypadek użycia. Załóżmy, że chcielibyśmy użyć wtyczki postcss-color-rgba-fallback, aby dodać rezerwową wartość HEX do wszystkich naszych kolorów sformatowanych w RGBA.

Po zainstalowaniu NPM postcss , postcss-cli i postcss-color-rgba-fallback , musimy uruchomić następujące polecenie:

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

Za pomocą tej instrukcji mówimy PostCSS, aby użył postcss-color-rgba-fallback , przetworzył wszystko, co CSS jest w src/css/all.css i wysłał to do dist/css/all.css .

OK, to było łatwe. Spójrzmy teraz na bardziej złożony przykład.

Korzystanie z PostCSS wraz z Task-runnerami i Sass

PostCSS można dość łatwo włączyć do przepływu pracy. Jak już wspomniano, doskonale integruje się z programami uruchamiającymi zadania, takimi jak Grunt, Gulp lub Webpack, a nawet może być używany ze skryptami NPM. Przykład użycia PostCSS wraz z Sass i Gulp jest tak prosty, jak poniższy fragment kodu:

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

Zdekonstruujmy powyższy przykład kodu.

Przechowuje odniesienia do wszystkich potrzebnych modułów (Gulp, Contact CSS, Sass, PostCSS i CSSNext) w serii zmiennych.

Następnie rejestruje nowe zadanie Gulpa o nazwie stylesheets . To zadanie wyszukuje pliki, które znajdują się w ./src/css/ z rozszerzeniem .scss (niezależnie od tego, jak głęboko są w strukturze podkatalogów), Sass kompiluje je i łączy w jeden plik all.css .

Po wygenerowaniu pliku all.css jest on przekazywany do PostCSS w celu przetranspilowania całego kodu związanego z PostCSS (i wtyczek) do rzeczywistego CSS, a następnie plik wynikowy jest umieszczany w ./dist/css .

OK, więc skonfigurowanie PostCSS z programem do uruchamiania zadań i preprocesorem jest świetne, ale czy to wystarczy, aby przede wszystkim usprawiedliwić pracę z PostCSS?

Ujmijmy to tak: Chociaż Sass jest stabilny, dojrzały i ma za sobą ogromną społeczność, możemy chcieć użyć PostCSS do wtyczek, takich jak na przykład Autoprefixer. Tak, moglibyśmy użyć samodzielnej biblioteki Autoprefixer, ale zaletą korzystania z Autoprefixera jako wtyczki PostCSS jest możliwość późniejszego dodania większej liczby wtyczek do przepływu pracy i uniknięcie zewnętrznych zależności od obciążenia bibliotek JavaScript.

Takie podejście pozwala nam również używać właściwości bez prefiksu i mieć je z prefiksem na podstawie wartości pobranych z interfejsów API, takich jak ta z Can I Use, co jest trudne do osiągnięcia przy użyciu samego Sassa. Jest to bardzo przydatne, jeśli próbujemy uniknąć złożonych domieszek , które mogą nie być najlepszym sposobem na przedrostek kodu.

Najpopularniejszym sposobem integracji PostCSS z bieżącym przepływem pracy, jeśli już korzystasz z Sassa, jest przekazanie skompilowanych danych wyjściowych pliku .sass lub .scss przez PostCSS i jego wtyczki. Spowoduje to wygenerowanie kolejnego pliku CSS, który zawiera dane wyjściowe zarówno Sass, jak i PostCSS.

Jeśli używasz modułu uruchamiającego zadania, korzystanie z PostCSS jest tak proste, jak dodanie go do potoku zadań, które aktualnie masz, zaraz po skompilowaniu pliku .sass lub .scss (lub plików wybranego przez Ciebie preprocesora).

PostCSS dobrze współpracuje z innymi i może być ulgą w niektórych głównych problemach, z którymi my, jako programiści, doświadczamy każdego dnia.

Rzućmy okiem na inny przykład PostCSS (i kilku wtyczek, takich jak CSSNext i Autoprefixer) i Sassa współpracujących ze sobą. Możesz mieć następujący kod:

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

Ten fragment kodu ma waniliową składnię CSS i Sass. Właściwości niestandardowe, na dzień pisania tego artykułu, nadal mają status Rekomendacji Kandydata (CR) i tutaj zaczyna działać wtyczka CSSNext dla PostCSS.

Ta wtyczka będzie odpowiedzialna za przekształcanie takich rzeczy jak niestandardowe właściwości w dzisiejszy CSS. Coś podobnego stanie się z właściwością transform , która zostanie automatycznie poprzedzona przez wtyczkę Autoprefixer. Napisany wcześniej kod da w wyniku coś takiego:

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

Tworzenie wtyczek dla PostCSS

Jak wspomniano wcześniej, atrakcyjną cechą PostCSS jest poziom dostosowania, który umożliwia. Dzięki swojej otwartości, tworzenie własnej wtyczki dla PostCSS, która zaspokoi Twoje szczególne potrzeby, jest dość prostym zadaniem, jeśli nie masz nic przeciwko pisaniu JavaScript.

Ludzie z PostCSS mają na początek całkiem solidną listę, a jeśli jesteś zainteresowany tworzeniem wtyczki, sprawdź polecane przez nich artykuły i przewodniki. Jeśli czujesz, że musisz o coś zapytać lub o coś przedyskutować, Gitter jest najlepszym miejscem do rozpoczęcia.

PostCSS ma swoje API z dość aktywną bazą obserwujących na Twitterze. Wraz z innymi korzyściami społeczności wspomnianymi wcześniej w tym poście, to właśnie sprawia, że ​​proces tworzenia wtyczek jest tak zabawny i taka wspólna aktywność.

Tak więc, aby stworzyć wtyczkę PostCSS, musimy stworzyć moduł Node.js. (Zazwyczaj foldery wtyczek PostCSS w katalogu node_modules/ są poprzedzone prefiksem, takim jak „postcss-”, co ma wyraźnie wskazywać, że są to moduły zależne od PostCSS.)

Na początek w index.js nowego modułu wtyczki musimy zawrzeć następujący kod, który będzie opakowaniem kodu przetwarzania wtyczki:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

Nazwaliśmy wtyczkę replacecolors . Wtyczka wyszuka słowo kluczowe deepBlackText i zastąpi je wartością koloru #2e2e2e HEX:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

Poprzedni fragment kodu wykonał tylko następujące czynności:

1. Używając walkRules() , iterował wszystkie reguły CSS, które znajdują się w bieżącym pliku .css , przez który przechodzimy.
2. Używając walkDecls() przez wszystkie deklaracje CSS, które znajdują się w bieżącym pliku .css .
3. Następnie zapisywał deklarację wewnątrz zmiennej deklaracji i sprawdzał, czy jest w niej ciąg deepBlackText . Jeśli tak, zastąpił całą deklarację następującą deklaracją CSS: color: #2e2e2e; .

Gdy wtyczka jest gotowa, możemy jej użyć w ten sposób bezpośrednio z wiersza poleceń:

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

Lub, na przykład, załadowany w Guplfile w ten sposób:

 var replacecolors = require('postcss-replacecolors');

Czy powinienem porzucić mój obecny procesor CSS, aby korzystać z PostCSS?

Cóż, to zależy od tego, czego szukasz.

Często zdarza się, że Sass i PostCSS są używane w tym samym czasie, ponieważ nowicjuszom łatwiej jest pracować z niektórymi narzędziami oferowanymi po wyjęciu z pudełka, wraz z funkcjami wtyczek PostCSS. Używanie ich obok siebie pozwala również uniknąć przebudowy wstępnie zdefiniowanego przepływu pracy za pomocą stosunkowo nowych i najprawdopodobniej nieznanych narzędzi, zapewniając jednocześnie sposób na utrzymanie bieżących implementacji zależnych od procesora (takich jak mixiny Sass , extends , selektor nadrzędny , selektory zastępcze , i tak dalej).

Daj szansę PostCSS

PostCSS to gorąca (no cóż, poniekąd) nowość w świecie programowania front-end. Został on powszechnie przyjęty, ponieważ sam w sobie nie jest pre/postprocesorem i jest wystarczająco elastyczny, aby dostosować się do środowiska, w którym jest umieszczany.

Duża część mocy PostCSS tkwi w jego wtyczkach. Jeśli szukasz modułowości, elastyczności i różnorodności, to jest to właściwe narzędzie do pracy.

Jeśli używasz programów do uruchamiania zadań lub pakietów, dodanie PostCSS do bieżącego przepływu najprawdopodobniej będzie bułką z masłem. Sprawdź przewodnik instalacji i użytkowania, a prawdopodobnie znajdziesz łatwy sposób na zintegrowanie go z narzędziami, z których już korzystasz.

Wielu programistów twierdzi, że zostanie, przynajmniej w przewidywalnej przyszłości. PostCSS może mieć ogromny wpływ na sposób, w jaki ustrukturyzujemy nasz dzisiejszy CSS, a to może potencjalnie prowadzić do znacznie większego przyjęcia standardów w społeczności programistów front-end.