LoginSignup
18

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-05-27
1 / 21

自己紹介


  • @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;
    ...
  }
`;
...

image.png


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


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 使い放題
  • 足早な発表だったため、何か質問や疑問があればお気軽に聞いてください!

おしまい

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18