search

hysryt / wiki

https://hysryt.github.io/wiki/
0 stars 0 forks source link

PostCSS #73

Open hysryt opened 6 years ago

hysryt commented 6 years ago

概要

CSS に対するポストプロセッサ。

CSS を入力として受け取り、AST(Abstract Syntax Tree: 抽象構文木)　を生成する。 AST に対する操作は各種プラグインが行うため、PostCSS の動作は

CSSの読み込み → ASTの生成 → ASTをプラグインに受け渡す

の部分となる。

現在は入力として純粋な CSS だけでなく cssnext などの構文も受け取ることができるため、ポストプロセッサという用語は使われなくなっているらしい。

メリット

Sass などと比較すると、PostCSSでは変換処理を全てプラグインに任せているため、拡張性に富んでいる。 Sass ではできないことも PostCSS ではプラグイン次第で可能になる場合もある。

参考リンク https://qiita.com/morishitter/items/4a04eb144abf49f41d7d

hysryt commented 6 years ago

使い方

インストール

$ npm install postcss-cli

ファイルの準備

$ mkdir src     # 処理前CSSファイルを置くディレクトリの作成
$ mkdir dist    # 処理後CSSファイルを保存するディレクトリの作成
$ vi src/style.css
/** src/style.css **/
html {
  font-size: 16px;
}

npm scripts 設定

$ vi package.json
{
  "scripts": {
    "postcss": "postcss src --dir dist"
  }
}

npm srcripts を実行

$ npm run postcss

プラグインを入れてないためまだ何も起きない。

hysryt commented 6 years ago

設定ファイル

プラグインの設定などは postcss.config.js に記述する。 postcss.config.js は変換対象のCSSファイルと同じディレクトリに配置する。

postcss.config.js が見つからなくてもエラーは出ないのでハマる可能性あり。

autoprefixer の場合

$ vi postcss.config.js
module.exports = () => ({
  plugins: {
    'autoprefixer': {
      'browsers': 'last 2 versions'
    }
  }
})

browsersオプションを設定している。

plugins には複数のプラグインを設定でき、上から順に適用されていく。

hysryt commented 6 years ago

ファイル監視

ファイル監視は --watch オプションで行える。

{
  "scripts": {
    "postcss": "postcss src --dir dist",
    "watch": "npm run postcss -- --watch"
  }
}

が、監視中に新規作成したファイルは監視対象とならないため、新規作成するたびに監視スクリプトを起動し直すか、あるいは nodemon を使用する方法もある。

{
  "scripts": {
    "postcss": "postcss src --dir dist",
    "watch": "nodemon --watch src -e css -x \"npm run postcss\""
  }
}

nodemon は監視中に新規作成したファイルも監視対象となる。。 その代わり1つのファイルに変更があると全ファイルを再コンパイルするため処理に時間がかかる。postcss が持つ監視機能であれば差分コンパイルが可能なため処理は速い。

hysryt commented 6 years ago

プラグイン

autoprefixer

ベンダープレフィックスを自動付与するプラグイン。

/** postcss.config.js **/
module.exports = () => ({
  plugins: {
    'autoprefixer': {
      'browsers': 'last 2 versions'
    }
  }
})

postcss-import

@import で他のCSSファイルを取り込むプラグイン。

/** postcss.config.js **/
module.exports = () => ({
  plugins: {
    'postcss-import': {
      '@hysryt/postcss-bundle-mediaquery': {}
    }
  }
})

plugins で、インポートする前に各ファイルに対して処理を行うこともできる。

書き方

/* header.css を取り込む場合は "header" のように拡張子なしで記述する */
@import "header"

stylelint

CSSのLintツール。単独でも使えるが PostCSS のプラグインとしても使用できる。

/** postcss.config.js **/
module.exports = () => ({
  plugins: {
    'stylelint': {
      fix: true
    }
  }
})

fix を true にすると自動で修正してくれる。（できない部分もある）

postcss.config.js の他に stylelint 用の設定ファイル stylelint.config.js も必要

/** stylelint.config.js **/
module.exports = {
  extends: 'stylelint-config-standard'
}

stylelint.config.js には Lint 時のルールを記述する。 特にこだわりがない場合は npm install stylelint-config-standard で標準的なルールをインストールしてそれを使用する。

postcss-preset-env

いろんな PostCSS プラグインをごった煮にしたプラグイン。 https://github.com/csstools/postcss-preset-env

hysryt commented 6 years ago

プラグインの作成

http://api.postcss.org/

プラグインは基本的に、AST を受け取り、変換し、返す。

        ________
AST -> | Plugin | -> AST'
        ¯¯¯¯¯¯¯¯

AST （Abstract Syntax Tree: 抽象構文木）

AST はノードの木構造で構成される。 ノードには以下の5種類が存在する。

ノードの種類：

ノードの探索

Comment ノードと Declaration ノード以外のノードは、探索のための walk メソッドを持つ。 walk メソッドを呼び出すと、下位ノードに対して再帰的に walk メソッドが呼び出されるため、下位ノード全てを探索できる。 特定のノード種類だけを探索したい場合は、種類ごとに walkAtRules、walkRules、walkDecls、walkComments が使える。