`exports` 정의를 통한 `import` 구문 간소화

[hyunbinseo]

문제 상황

(상대) 경로를 온전히 입력해야만 CSS import이 가능합니다. [email protected] 기준

// 자바스크립트, 타입스크립트
import '../../node_modules/@sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.css';

/* CSS */
@import '@sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.css';

바라는 점

import 구문이 간소화 됐으면 합니다.

- import '../../node_modules/@sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.css';
+ import '@sun-typeface/SUIT/variable/woff2';

구현 방법

package.json 파일의 exports 항목을 사용하면 됩니다. https://github.com/vitejs/vite/discussions/2657#discussioncomment-5856909

"exports": {
  "./variable/woff2": {
    "import": "./fonts/variable/woff2/SUIT-Variable.css",
    "require": "./fonts/variable/woff2/SUIT-Variable.css"
  },
  // ...
}

[hyunbinseo]

exports 수정은 breaking change로 간주됩니다.

글꼴과 npm 패키지 버전이 따라가야 하는 현 프로젝트는 유의해서 도입해야 하는 요소입니다.

추가적인 요청이나 수요가 없다면 보류해도 될 듯합니다.

참고

@fontsource-variable/noto-sans-kr 패키지의 경우 다음과 같이 사용법을 적어놨는데:

import "@fontsource-variable/noto-sans-kr"; // Defaults to wght axis
import "@fontsource-variable/noto-sans-kr/wght.css"; // Specify axis
import "@fontsource-variable/noto-sans-kr/wght-italic.css"; // Specify axis and style

이는 패키지 root에 하기 파일들을 위치시켰기 덕분입니다. 별도 빌드 과정이 없는 현 프로젝트에선 적합하지 않아보입니다.

.
├── index.css
├── wght.css
└── wght-italic.css