12 Gru 2019

PostCSS narzędzie do przekształcania CSS w JavaScript

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ównie z Babel + Corejs dla javascriptu.