postcss-jsx로 React x CSSinJS 편안함

자기소개

오늘 말하기

오늘 말하기

postcss-jsx란?

할 수 있게 된 것 ①

PostCSS 플러그인을 CSS in JS의 스타일에 적용 가능

예를 들어 autoprefixer

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

...
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를 사용할 수 있습니다.

좋은 곳

미묘한 곳

요약

여담

오시마