Minulý týden Martin Michálek popsal ve svém článku PostCSS jako jednoduchou náhradu CSS preprocesoru. Pojďme se teď společně podívat na to, jak tyto technologii dostat na produkční prostředí. Využijeme k tomu nejnovější Webpack ve verzi 2.x a přihodím taky CSSNext, přestože Martinovy výhrady k tomuto nástroji chápu.

Aby těch novinek nebylo málo, budu v příkladu používat Yarn – jedná se o alternativu pro NPM od vývojářů Facebooku. Pokud Yarn neznáte, budete mít dnes možnost jej vyzkoušet.

Začneme instalací balíčků

Základem bude Webpack 2.x, který nám pomůže vyřešit distribuci výsledného CSS kódu, jeho sestavení a přípraví kód k distrubuci v podobě jediného CSS souboru.

yarn add --dev webpack

Dále si nainstalujeme postcss a jeho loader pro Webpack – postcss-loaders. Ten nám umožní tyto dvě technologie vzájemně propojit. Abychom mohli zdrojové CSS rozdělit do více souborů, přidáme postcss-import – ten nám vyřeší poporu pro CSS @import.

yarn add --dev postcss postcss-loader postcss-import

Přihodíme balíček postcss-cssnext, který nám umožní využít CSSNext.

yarn add --dev postcss-cssnext

Závěrem nainstalujeme extract-text-webpack-plugin, který nám pomůže s vytvořením statického CSS souboru. Poslední bude css-loader a style-loader, který zařídí fallback, pokud se nepovede extrahovat CSS soubory.

yarn add --dev extract-text-webpack-plugin css-loader style-loader

Jdeme to všechno propojit

Středobodem veškerého našeho snažení bude webpack.config.js, který obsahuje konfiguraci pro Webpack. Přidejte do sekce module pravidlo pro CSS soubory:

var ExtractTextPlugin = require("extract-text-webpack-plugin");
// ....
module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     fallback: "style-loader", // když se to nepovede
     use: ['css-loader', 'postcss-loader']
    })
   }
   // ...
  ]
 },
}

Vysledný CSS soubor budeme chtít ukládat do složky dist. Musíme tady patřičně nastavit output:

var path = require("path");
module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'), // zde bude výsledek
    filename: '[name].bundle.js',
  }
  // ...
}

A následně použijeme extract-text-webpack-plugin, pro generování výsledného statického CSS souboru:

module.exports = {
  // ...
  plugins: [
    new ExtractTextPlugin("style.css"), // soubor pojmenujeme
  ]
  // ...
}

Dále nastavte resolve a context, čímž sdělí Webpacku, kde se budou naše zdrojáky nacházet:

module.exports = {
  context: path.resolve(__dirname, 'src'),
  // ...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
  // ...
}

Závěrem nastavíme entrypoint – vstupní soubor, ze kterého budeme vycházet:

module.exports = {
  // ...
  entry: {
    app: './app.js'
  },
  // ...
}

Webpack máme připraven. Jdeme nastavit postcss – ten je možné nově konfigurovat prostřednictvím souboru postcss.config.js, do kterého vložíme následující kód:

 module.exports = {
   plugins: {
     'postcss-import': {},
     'postcss-cssnext': {
       browsers: ['last 2 versions', '> 5%'],
     },
   },
 };

Jdeme to spustit!

Do souboru src/app.js přidejte následující: import styles from './app.css'; . Vytvořte si soubor src/app.css a spusťte v příkazové řádce webpack:

./node_modules/.bin/webpack

Pokud se vše povedlo, tak máte vytvořen ve složce dist svůj první CSS soubor s využitím PostCSS, CSSNext a Webpack.

A co soubory?

Pokud budeme potřebovat načítat v CSS statické soubory, jako jsou například odkazy na obrázky v  url() , budete muset přidat jejich loader:

yarn add --dev img-loader file-loader url-loader

Do webpack.config.js si přidejte v sekci module další pravidlo:

module.exports = {
  module: {
    rules: [
       // ...
      {
         test: /\.(jpe?g|png|gif|svg)$/i,
         use: [ 'url-loader?limit=10000', 'img-loader' ]
      } 
     // ...
    ]
  }
  // ...
}

Závěrem

Všechny zdrojáky jsou volně k dispozici na Github – teď už stačí je akorát dostat do produkce :-)