rollup.jsでpostcssをコンパイルするサンプル

13704 ワード
CSS postcss rollup.js CSS テキストリンク

forkリポジトリーを利用してcssの出力処理をしていた部分が現在では
不要なアテにならないノウハウです！

本記事は、Tutorial: How to Bundle JavaScript With Rollup を参考に、
postcss周りの設定だけを概括した内容となります。

https://github.com/pokkur/style_on_rollup

フォルダ構成

Project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── css/
│       └── style.css
├── dist/
│       └── index.html
├── rollup.config.js
└── package.json

各種設定

package.json
{
  "name": "postcss_on_rollup",
  "version": "1.0.0",
  "description": "",
  "main": "dist/js/main.min.js",
  "scripts": {
    "watch": "rollup -c --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://[email protected]/pokkur/style_on_rollup.git"
  },
  "author": "Pokkur",
  "license": "MIT",
  "engines": {
    "npm": ">=3.9.0",
    "node": ">=5.11.1"
  },
  "devDependencies": {
    "babel-preset-es2015-rollup": "^1.2.0",
    "lost": "^7.1.0",
    "npm-run-all": "^3.0.0",
    "postcss-cssnext": "^2.7.0",
    "postcss-size": "^1.0.0",
    "precss": "^1.4.0",
    "rollup": "^0.35.9",
    "rollup-plugin-babel": "^2.6.1",
    "rollup-plugin-postcss": "^0.2.0",
    "rollup-plugin-riot": "^0.4.2",
    "rollup-plugin-stylus-css-modules": "^1.2.1",
    "rollup-watch": "^2.5.0",
    "rucksack-css": "^0.8.6"
  },
  "dependencies": {
    "debug": "^2.2.0"
  }
}
rollup.config.js
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import precss from 'precss';
import cssnext from 'postcss-cssnext';
import rucksack from 'rucksack-css';
import size from 'postcss-size';
import lost from 'lost';

export default {
  entry: 'src/js/main.js',
  dest: 'dist/js/main.min.js',
  format: 'iife',
  plugins: [
    postcss({
      extensions: ['.css', '.sss'],
      extract: './dist/css/main.css', //css書き出し
      sourceMap: true,
      plugins: [
        precss(),
        cssnext({
          calc: false,
          rem: false,
        }),
        size(),
        rucksack(),
        lost(),
      ],
    }),
    commonjs(),
    babel({
      babelrc: false,
      presets: ['es2015-rollup'],
      include: '**/*.js',
      sourceMap: true
    }),
  ],
};

※本家でextract対応したようです。
rollup-plugin-postcssは、下記プルリクエスト版をビルドしたindex.jsを使用することで、
コンパイルしたcssをjsに書き込まず、ファイル書き出しできます。

https://github.com/zperrault/rollup-plugin-postcss

main.js

下記のようにcssをインポートしてあげましょう。

/src/js/main.js
import '../css/style.css';

style.css

/src/css/style.css
:root {
  --gothic: sans-serif;
}

$base: rebeccapurple;

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--gothic);
  font-size: 62.5%;

  > .main-content {
    position: relative;
  }
}

.popup {
  background: $base;
  size: 300px 50px;
}