この記事の概要
PostCSSのプラグインであるPostCSS Preset Envをご存知でしょうか。
"Use tomorrow’s CSS today!"というキャッチフレーズが示す通り、まだ正式な仕様になる前のCSSを色々と使うことができます。
CSS関連の勉強会などに登壇すると「普段どこからインプットしていますか？」と質問されることがあり、学ぶ先の1つとしてPostCSS Preset Envがあるので紹介してみます。
Features
CSSでは策定段階がStage 0から4まであります。
数字が高いほど仕様として固まっていて、低いほど変更や破棄になる可能性が高いです。
Stage 2でも「一部のブラウザでは使用できるけど、まだ動かないことも多い」くらいで、実用的と言えるのはStage 3からでしょうか。
そんな中でも、PostCSS Preset Envを使えばStage 0, 1, 2のものも使えるようになります。
未来の記法で書いたCSSを、現在でも動くように変換してくれるというわけです。
そして、PostCSS Preset Envで動かせるリストが以下のリンクから見れます。
そうしょっちゅう更新されるものではありませんが、こういったリストを見て「最近実装に悩んだあの箇所、この書き方ができれば速かったかも」なんて思いを巡らせています。
試し方
リストの中から気になるものがあれば実際に試してみましょう。
npm initして適当なHTMLとCSSを用意した上で、依存関係をインストールします。
npm i -D postcss postcss-cli postcss-preset-env
postcss.config.jsを作成し、試してみたいものを記載します。
ここでは、Sassを使わずともネストができるようになるnesting-rulesを有効にしてみます。
module.exports = {
plugins: {
"postcss-preset-env": {
features: {
"nesting-rules": true,
},
},
},
};
npm scriptsを追加します。
{
//省略
"scripts": {
"css:watch": "postcss 変換前.css -o 変換後.css -w"
},
}
あくまで変換後のCSSを適用しないとブラウザで表示できないので、HTMLでの指定は以下のようにしておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="path/to/変換後.css">
<title>PostCSS Preset Envのテスト</title>
</head>
あとは、変換前のCSSに新しい記法でスタイルを書けば、変換されてブラウザで表示されるようになります。
実戦投入はできないにしても、書き味を試す分には十分です。
最後に
新しく使えるようになったCSSを素振りしてみた記事は結構見かけるのですが、まだ使えないCSSを素振りするための記事は意外と見かけません（まだ使えないのだから当たり前と言えば当たり前ですが）。
Stageが上がるにつれ、プロパティ名などが変わっても、大まかな仕組みは変わらないことも多くある印象です。
早いうちに未来のCSSを見越しておけると運用も楽だと思います。
そうでなくても、ただなんとなく眺めているだけでも楽しいので一度見てみてください。
最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！
Devトークでのお話してくださる方も募集中です！