css-in-js가 번들되는 과정

1. 코드 파싱

• JavaScript 파서가 코드를 분석한다.
• CSS-in-JS 문법이 인식된다.

2. 변환

• 바벨 혹은 다른 프랜스파일러가 코드를 변환한다.
  • 왜 트랜스파일러가할까? 자바스크립트 파일이니까!
  • 여기서 추가 변환이 필요하다면 플러그인을 추가한다.

3. 정적 분석 및 최적화

• 가능한 경우, 정적 스타일을 추출한다.
• 중복 스타일을 제거하거나 최적화한다.

4. JavaScript 번들 생성

• 변환된 코드가 JavaScript 번들로 합쳐진다.
• 이 시점에서 스타일은 JavaScript 객체나 함수의 형태로 존재한다.

5. 런타임 코드 주입

• CSS-in-JS 라이브러리의 런타임 코드가 번들에 포함된다.
• 이 코드는 스타일을 동적으로 처리하고 주입하는 역할을 한다.

6. 최종 번들 생성 -> 브라우저에서 실행

• JavaScript 파일들이 생성된다

7. 동적 스타일 처리

• 런타임에 스타일 객체가 처리된다.
• 동적 값(prop 에 기반한 스타일)이 계산된된다.
• document.createElement('style') 등을 사용해 style stag 가 생성되고,
• 생성된 css 가 해당 태그에 주입된다.
• 따라서 생상된 style 태그가 head 태그에 추가되어서,. 해당 스타일이 적용된 컴포넌트가 렌더링된다.

// 이 코드는 JavaScript 번들의 일부
const styles = {
  button: {
    backgroundColor: 'blue',
    color: 'white'
  }
};

// 런타임에 실행되는 함수
function injectStyles() {
  const styleElement = document.createElement('style');
  styleElement.textContent = `
    .my-button {
      background-color: ${styles.button.backgroundColor};
      color: ${styles.button.color};
    }
  `;
  document.head.appendChild(styleElement);
}

// 페이지 로드 시 스타일 주입
window.addEventListener('load', injectStyles);