css module 이 번들되는 과정

1. CSS 파일 처리

• 빌드 도구가 CSS 모듈 파일을 감지한다 (.module.css)
• CSS 로더가 파일을 처리하고, 클래스 이름을 고유한 식별자로 반환한다.
• 그러면 .module.css라고 명명하지 않으면 CSS 모듈파일을 식별하지 못할까? NO
  • 빌드 도구 설정을 통해서 동작을 변경 할 수 있다. 예를들어 웹팩에서는 다음과 같이 설정할 수 있다.

	module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,  // 모든 .css 파일에 대해
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,  // CSS 모듈로 처리
            },
          },
        ],
      },
    ],
  },
};

혹은 일부 프레임워크에서는 import 문에 명식적으로 css module 임을 지정할 수 있다.

import styles from './styles.css?module'

• vite 나 rollup 에서 지원하는 방식
• 해당 구문을 통해서 import 시점에 CSS 파일을 모듈로 처리하도록 지시한다.
• ?module 쿼리파라미터는 빌드 도구에게 이 파일을 CSS 모듈로 처리하라고 한다.
• 이를 통해서 파일 이름을 변경하지 않고도, CSS 모듈을 사용 할 수 있다.
• 같은 CSS 파일을 상황에 따라 모듈 또는 일반 CSS 로 임포트 할 수 있다는 장점이 있다.

2. JavaScript 와 연결

• 목적

  • 스코프 제한을 위해 (CSS 클래스 이름의 충돌 방지)
  • 동적 클래스 이름 사용 (빌드시 생성된 고유한 클래스 이름을 자바스크립트에서 참조해야한다.)

• 연결 과정

  • 빌드 도구가 CSS 모듈 파일을 분석한다.
  • 각 클래스 이름을 고유한 식별자로 변환한다.
  • 변환된 클래스 이름을 포함하는 객체를 생성한다.
  • 이 객체는 원래 클래스 이름을 키로, 변환된 고유 클래스 이름을 값으로 가진다.
  • 생성된 객체를 JavaScript 모듈로 내보낸다.

.button {
  background: blue;
  color: white;
}

import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click me</button>;
}

빌드 과정에서 styles 객체는 아래와 같이 생성됨.

{ button: "_Button_button_1a2b3c" }

그렇다면 classnames 와 같은 라이브러리랑은 어떻게 연결되는걸까?

• classnames 함수는 여러 인자를 받아 하나의 문자열로 결합한다.
• css 모듈에서 가져온 styles의 객체 속성들 (ex. styyles.button)이미 별환된 고유한 클래스 이름이다.
• classNams 은 이 고유한 클래스 이름들을 조건에 따라 결합하는 것일뿐!

그러면 추출된 css 파일에도 해당 클래스이름을 어떻게 반영할까?

• 빌드 도구에서 CSS 로더가 이런 작업을 담당한다.
  • 즉, 변환된 CSS 를 생성한다.

._Button_button_1a2b3c {
  background: blue;
  color: white;
}

3. 번들링

• 처리된 CSS 는 별도 CSS 파일로 추출되거나, JavaScript 번들에 포함될 수 있다.