postcss-jsxで React x CSSinJSを快適にする



自己紹介


  • @otofu-square
  • 外部登壇2回目の初心者です🙇
  • JUBILEE WORKS, inc でフロントエンド業
    • TimeTree というカレンダーアプリ
    • React/Redux/TypeScript/hypernova...etc
  • 最近 wasm(Rust), Web Components に興味あり

今日お話すること


今日お話すること

  • postcss-jsx とは
  • postcss-jsx で出来るようになったこと①
  • postcss-jsx で出来るようになったこと②
  • 所感

postcss-jsx とは


出来るようになったこと①


PostCSS プラグインを CSS in JS 内のスタイルに適用出来る


例えば autoprefixer

  • styled-components や emotion などの CSS in JS は内部的に vendor prefix を付与する仕組みを持っている(stylis という CSS プロセッサ)
  • しかし stylis には CSS Grid の IE11 向けサポートがない
  • autoprefixer が持つGrid Autoplacementの機能が利用可能

どうやって PostCSS プラグインを適用するか


Webpack 上で使う

webpack.config.js
...
rules: [{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  use: ["babel-loader", "postcss-loader"]
}],
...

emotion の動的なスタイルに IE11 向けの Grid スタイルが適用されている

...
const StyledWrapper = styled.div`
  /* NOTE: & { ... } でスタイルを囲まないと autoprefixer がエラーを吐く */
  & {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 100px);
    grid-gap: 10px;
    ...
  }
`;
...


出来るようになったこと②


stylelint の --fix が使える



良いところ

  • stylis のサポート外の vendor prefix も対応可能
  • postcss-preset-env を使ってナウい CSS が書けるように
  • stylelint の --fix が使えることでようやく安心して CSS を書ける
    • 個人的には stylelint-order の autofix が嬉しい

微妙なところ

  • autoprefixer と stylis の vendor prefix が重複する
  • Grid Autoplacement 使っても IE11 の Grid サポートは辛い...
  • stylelint のエディタサポートが微妙
    • Atom は linter-stylelint に一手間加える必要
    • VSCode は format on save が出来ない ... ?

まとめ

  • CSS in JSでもビルドタイムでスタイルを色々弄れるように
  • stylelintで快適に CSS in JS を書けるように
  • とはいえまだ全体的に洗練されてない印象
  • 各方面に PR 出していきましょう 💪

余談

  • ゼロランタイムCSS in JSの動向が気になる
    • linaria, astroturf ... etc
    • ビルドタイムで CSS が生成されるので PostCSS 使い放題
  • 足早な発表だったため、何か質問や疑問があればお気軽に聞いてください!

おしまい