[Storybook] Storybook + Twin.macro 환경 설정

문제 발생

Storybook과 Twin.macro를 함께 사용하던 중, className에 작성한 tw 클래스를 Storybook이 인식하지 못 하는 문제가 발생했습니다.

 

 

 

원인

Storybook과 Twin.macro 호환 문제는 은근 흔한 경우였습니다.

저의 경우 tailwind / Storybook의 설정 파일을 제대로 작성하지 않은 문제였습니다.

Storybook은 Webpack 기반 프레임워크이기 때문에 별도로 Babel을 사용하도록 설정해야합니다.

 

 

 

해결 방법

우선 아래 코드로 두 개 라이브러리를 설치합니다.

npx sb init --builder webpack5
npm i -D @storybook/cli@next @emotion/babel-plugin-jsx-pragmatic @babel/plugin-transform-react-jsx

 

 

그 다음 Storybook 환경 파일에 들어가 babel을 연결합니다.

 

const path = require('path');

const config: StorybookConfig = {
  ...
  // babel 설정 커스터마이징
  babel: async (config) => ({
    ...config,
    presets: [["@nrwl/react/babel"]],
    plugins: [
      'babel-plugin-macros',
      [
        '@emotion/babel-plugin-jsx-pragmatic',
        {
          export: 'jsx',
          import: '__cssprop',
          module: '@emotion/react',
        },
      ],
      [
        '@babel/plugin-transform-react-jsx',
        {
          pragma: '__cssprop',
        },
        'emotion-css-prop',
      ],
    ],
  }),
};

export default config;