W obecnym świecie frontendu wszystko zmienia się bardzo szybko. Powstaje mnóstwo nowych bibliotek, pluginów, framewoorków css czy js. Minęły czasy w których używało się notatnika do pisania stron 😉
Narzędzie które dzisiaj opiszę to PostCSS. Tak naprawdę najważniejszą częścią tego narzędzia są dodatki, pluginy których są setki.
Do czego można to wykorzystać, a no do miliona rzeczy 😉 Najczęściej używany plugin prze zemnie to autoprefixer.
Co on nam daje, a no to że nie musimy martwić dodawaniem prefiksów. Powiedzmy piszemy display: flex; a w wyniku dostajemy display: -webkit-box;display: -ms-flexbox;display: flex; Oczywiście zależne to jest od tego co ustalimy w package.json
W naszym package.json musimy dodać taki wpis, oczywiście ten wpis jest uzależniony od tego jakie przeglądarki chcemy wspierać:
"browserslist": [
"last 2 version",
">1%",
"not dead"
],
Ten wpis można by opisać tak, ostatnie 2 wersje przeglądarek, więcej niże 1% używa tych przeglądarek, no i ostatni wpis "nie martwe" czyli takie przeglądarki, które nadal są używane. Jeżeli chcemy zobaczyć jak budować tą listę polecam zapoznać się z browserslist oraz sprawdzić jakie jest pokrycie tego wpisu na tej stronie browserl.ist
Browserslist nie jest tylko wykorzystywane dla CSS ale także dla JS a dokładnie dla Babel + Corejs ale to już w innym wpisie będzie.
Cały kod będzie opierać się od webpacka. Więc od niego najpierw zaczniemy, ale nie będę opisywał co to jest webpack i podawał jego konfiguracji bo to jest wpis o PostCSS 😉 Jeżeli ktoś chce zobaczyć cały webpack-boilpreate to zapraszam. Jest to taki podstawowy zestaw który praktycznie zawsze używam do budowy stron.
Najważniejsza cześć w webpacku to ten wpis który odpowiada za obsługę css, sass oraz scss. Jest to wersja webpack.prod.js inna jest dla webpack.dev.js, polecam kliknąć w link webpack-boilpreate tam jest cały kod.
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2
},
},
{
// obsługa postcss
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: './config/',
},
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-resources-loader',
options: {
resources: [
'./sources/scss/modules/_config.scss'
],
},
},
],
},
Do całego webpacka potrzebujemy zainstalować npm i -D postcss-loader lub tak jak ja korzystam z yarna więc będzie to yarn add -D postcss-loader
Cała konfiguracja opiera się na stworzeniu pliku postcss.config.js w głównym folderze naszej aplikacji ale to można zmienić przez dodanie wpisu:
options: {
config: {
path: './config/',
},
},
W ten sposób zmieniamy miejsce naszego pliku postcss.config.js, który powinniśmy dodać do foldera config. A struktura jego jest dość oczywista:
module.exports = {
plugins: {
'plugin1': {},
'plugin2': {}
}
};
Autoprefixer
Dobra zaczniemy od najważniejszego pluginu Autoprefixer jest nawet strona która pokazuje na jakiej zasadzie działa ten plugin autoprefixer
Instalujemy standardowo yarn add -D autoprefixer i dodajemy go do postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {},
}
};
I tak naprawdę to tyle, gdy uruchamiamy wersję produkcyjną webpacka ładnie nam dodaje prefixy i wiele innych rzeczy nie musimy martwić się tym przy pisaniu styli.
cssnano
Innym przydatny plugin to cssnano, formatuje css do tego usuwa zbędne spacje, komentarze, nowe linie i wiele innych niepotrzebnych śmieci w wynikowym kodzie, dokładny opis co potrafi cssnano zerknijcie tutaj cssnano.co/guides.
postcss-font-base64
Ten plugin ostatnio używałem bo chciałem aby czcionki były inline w css. Powiedzmy że miałem taki wpis jak poniżej.
@font-face {
font-family: Scrabble;
src:
url("fonts/fakefont.eot?#iefix") format("embedded-opentype"),
url("fonts/fakefont.woff") format("woff"),
url("fonts/fakefont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
Plugin ten konwertuje na taki wpis:
@font-face {
font-family: "Scrabble";
src:
url(data:application/font-eot;charset=utf-8;base64sZEAABWRAAA...l54u0 format("embedded-opentype"),
url(data:application/font-woff;charset=utf-8;base64d09GRgABAA...tZQAA format("woff"),
url(data:application/font-tiff;charset=utf-8;base64AAEAAAARAQ...D0QAA format("truetype");
font-weight: normal;
font-style: normal;
}
postcss-css-variables
Plugin ten konwertuje zmienne css a dokładnie to co poniżej:
:root {
--gray-light: #C7C7C7;
}
.app-todo {
background-color: var(--gray-light);
}
W wyniku działania tego pluginu dostajemy dokładnie to co poniżej:
.app-todo {
background-color: #C7C7C7;
}
Innym bardzo przydatnym pluginem jest purgecss opisałem go tutaj jak usunąc nadmiarowy css
W skrócie jeżeli używamy biblioteki Bootstrap czy jakiegoś innego frameworka css to plugin ładnie nam zostawi tylko ten styl css który używamy w aplikacji co przełoży się na szybsze ładowanie strony.
To tak na szybko opisane jedno z najważniejszych obecnie narzędzi do optymalizacji pracy frontendowaca, to moim zdaniem coś na równi z Babel + Corejs dla javascriptu.