storybook 에서 styled component css prop 적용이 안된다면?

 

💡 문제 현상

실행 환경

Next 13
Storybook 7.0.4
Styled component: 5.3.10

 

Next.js 13 에서 스토리북을 빌드한 결과, styled-component 의 css-prop 이 올바르게 적용되지 않는 이슈가 있었습니다.

 

🤔 원인은?

 

 

기본적으로 css-prop 을 사용하는 컴포넌트는 babel 을 통해서 빌드가 이뤄지는데, Next.js 12 부터는 babel 대신에 swc 로 빌드하기 때문에, 문제가 생긴 듯 보였습니다.

혹시나 해서 관련된 이슈를 찾아보니, 아직 활발하게 논의되고 있는 상태였습니다.

 

https://github.com/vercel/next.js/issues/30802

Port babel-plugin-styled-components to SWC · Issue #30802 · vercel/next.js

 

✅ 해결 방법

우선 해당이슈가 각 패키지의 메인테이너를 통해 근본적으로 해결되기 전까지 다음 방법을 사용합니다.

babel 을 사용하는 대신 Next.js 13 과 동일하게 swc 컴파일러를 이용해서 빌드합니다.

두 가지 패키지를 활용하면 되는데, 하나는 storybook 에서 swc 를 이용해서 빌드 할 수 있도록 도와주는 패키지이고 다른 하나는 swc 에서 styled component 을 올바르게 해석할 수 있도록 도와주는 플러그인입니다.

 

1️⃣ 패키지 설치

> npm i -D storybook-addon-swc @swc/plugin-styled-components

 

2️⃣ swc 및 plugin 설정

// .storybook/main.ts

const config: StorybookConfig = {
  addons: [
        // ✅ plugin 을 추가합니다.
    {
      name: 'storybook-addon-swc',
      options: {
        swcLoaderOptions: {
          jsc: {
            experimental: {
              plugins: [['@swc/plugin-styled-components', {}]],
            },
          },
        },
      },
    },
  ],

    // ... other settings
}

위 설정을 마치고 swc 로 스토리북을 빌드하면, css-prop 을 사용하는 컴포넌트들을 문제없이 렌더링합니다.

 

✏️ 번외

swc 로 빌드하니 storybook 빌드 속도가 기존보다 2배 정도 빨라졌습니다.

덕분에 ci 실행시간도 줄일 수 있었네요! 😀