<div id="readability-page-1" class="page"><div><figure></figure><div><a rel="noopener follow" href="/?source=post_page-----97ed9c52ae33--------------------------------"><div aria-hidden="false"><p><img alt="Jusung Hwang" src="https://miro.medium.com/v2/resize:fill:88:88/1*3sz0SF37ibwm-BAopfwAfQ.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"></p></div></a></div><p id="6473">이번 글은 이전에 작성했던 <a rel="noopener" href="/tsup-라이브러리에서-es5-타겟으로-사용-시-겪었던-문제-81fa68f6546c">tsup 라이브러리에서 es5 타겟으로 사용 시 겪었던 문제</a>와 연관되어 있어요. 이전 글을 읽으신 뒤에 이번 글을 읽어주시면 좀 더 이해하기 쉬울 거예요. (아마..)</p><h2 id="2243">문제 발생</h2><p id="a412">화창하고 바람이 부는 어느 오후, 슬랙 채널에 한 개의 메시지가 등장했어요.<br>사용 중인 iOS 14 버전에서 라이브러리의 컴포넌트 스타일이 깨진다는 제보가 있었는데, 동료 개발자가 <code>postion: absolute;</code> 와 함께 지정된 <code>inset: 0;</code>이 구형 브라우저에서 지원이 되지 않는다고 전해주셨어요.</p><p id="6e53">처음에 제보를 듣고 저는 조금 의아해졌는데요. “이전에 라이브러리를 작성할 때 <code>inset: 0;</code>에 대한 스타일링 코드를 넣은 적이 없었던 거 같은데?"라고 기억하고 있었으며, 실제로 확인해 봤을 때도 소스 코드에서는 <code>inset</code> 관련 스타일을 찾을 수 없었어요.</p><h2 id="32a9">원인</h2><p id="5cfd">우선 빌드 시 <code>inset: 0;</code> 으로 변경되기 전 스타일의 소스 코드는 다음과 같았어요.</p><pre><span id="6c8d">import { style } from '@vanilla-extract/css';<p>const wrapper = style({<br>  position: 'absolute',<br>  top: 0,<br>  right: 0,<br>  bottom: 0,<br>  left: 0,<br>});</p></span></pre><p id="279f">기존에 <code>inset</code> 속성이 <code>top</code> <code>right</code>, <code>bottom</code>, <code>left</code>의 약칭으로 쓰이는 건 어렴풋이 알고 있었지만, 갑자기 왜 바뀌었는지 의문이 들어서 우선 vanilla-extract의 저장소에서 <code>inset</code> 관련 키워드와 라이브러리 디펜던시에 걸린 패키지를 찾아봤지만 찾을 수 없었어요.</p><p id="9ec4">이다음으로 확인해 본 것이 tsup에서 사용 중인 esbuild 인데요, 결론적으로는 여기에 원인이 있었어요.</p><p id="94bf">esbuild 공식 문서에서는 다음과 같이 설명하고 있는데요.</p><blockquote><p id="f179">Note that by default, esbuild’s output will take advantage of modern CSS features. For example, <code>color: rgba(255, 0, 0, 0.4)</code> will become <code>color: #f006</code> when minifying is enabled which makes use of syntax from <a href="https://www.w3.org/TR/css-color-4/#changes-from-3" rel="noopener ugc nofollow" target="_blank">CSS Color Module Level 4</a>. If this is undesired, you must specify esbuild's <a href="https://esbuild.github.io/api/#target" rel="noopener ugc nofollow" target="_blank">target</a> setting to say in which browsers you need the output to work correctly. Then esbuild will avoid using CSS features that are too modern for those browsers.</p></blockquote><p id="af54">이전에 작성했던 글처럼 tsup config에서 <code>target</code>을 <code>es5</code>로 설정하면 우선 esbuild에서 <code>es2020</code>으로 빌드 하다보니 위에 문서에서 설명 중인 것처럼 CSS 최신 스펙인 <code>inset</code>으로 교체가 되었던 것이었죠.</p><h2 id="a722">해결 방법</h2><p id="d93b">이후 추가로 확인해 본 결과, 문제를 해결할 수 있는 방법은 크게 두 가지가 있었어요. 먼저, esbuild의 <code>target</code>을 구형 브라우저에 맞게 설정하기 위해 tsup config에서 <code>esbuildOptions</code>를 통해 지정해 주거나, esbuild <code>supported</code> 옵션에서 <code>inset-property</code>를 비활성화(<code>false</code>) 처리하는 방법이에요.</p><p id="0cfd">처음에는 <code>target</code>을 통해 변경할 때 빌드된 js 파일에 이슈가 발생하면 어떻게 처리해야 할지 걱정하면서, 일단은 <code>inset-property</code>를 비활성화하는 방안으로 고려했어요. 그러나 이후에는 <code>inset</code>뿐만 아니라 다른 최신 CSS 문법도 이슈가 될 가능성이 있어 보여서, 일단은 <code>target</code>을 설정하고 js 파일에서 문제가 없는지 확인한 후에 다음과 같이 처리했어요.</p><pre><span id="d53d">// tsup.config.ts<br>export default defineConfig((options) =&gt; {<br>  // ...etc,<br>  target: 'es5',<br>  esbuildOptions(options) {<br>   options.target = ['chrome64', 'ios12'];<br>  },<br>});</span></pre><h2 id="755b">마치며</h2><p id="4a59">이전 글에 이어 tsup과 esbuild 사용 시 이슈를 두 번이나 겪다니 저랑 뭔가 있나 봅니다(?)<br>동료 개발자분의 제보 덕분에 나름 꽤 신선한(?) 경험을 했었던 것 같고, 이렇게 글로 정리해서 남겨볼 수 있어서 좋았어요. (감사합니다 😌)</p><h2 id="1bf0">출처</h2><ul><li id="0bbe"><a href="https://esbuild.github.io/content-types/#css" rel="noopener ugc nofollow" target="_blank">https://esbuild.github.io/content-types/#css</a></li><li id="c8b4"><a href="https://github.com/evanw/esbuild/issues/1925" rel="noopener ugc nofollow" target="_blank">https://github.com/evanw/esbuild/issues/1925</a></li></ul></div></div>

Stories by Jusung Hwang on Medium

나는 분명 inset을 사용한 적이 없는데 
CSS 출력물에 inset이 들어있던 건에 대해서
이번 글은 이전에 작성했던 tsup 라이브러리에서 es5 타겟으로 사용 시 겪었던 문제와 연관되어 있어요. 이전 글을 읽으신 뒤에 이번 글을 읽어주시면 좀 더 이해하기 쉬울 거예요. (아마..)
문제 발생
화창하고 바람이 부는 어느 오후, 슬랙 채널에 한 개의 메시지가 등장했어요.
사용 중인 iOS 14 버전에서 라이브러리의 컴포넌트 스타일이 깨진다는 제보가 있었는데, 동료 개발자가 postion: absolute; 와 함께 지정된 inset: 0;이 구형 브라우저에서 지원이 되지 않는다고 전해주셨어요.
처음에 제보를 듣고 저는 조금 의아해졌는데요. “이전에 라이브러리를 작성할 때 inset: 0;에 대한 스타일링 코드를 넣은 적이 없었던 거 같은데?"라고 기억하고 있었으며, 실제로 확인해 봤을 때도 소스 코드에서는 inset 관련 스타일을 찾을 수 없었어요.
원인
우선 빌드 시 inset: 0; 으로 변경되기 전 스타일의 소스 코드는 다음과 같았어요.
import { style } from '@vanilla-extract/css';
const wrapper = style({
  position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
});
기존에 inset 속성이 top right, bottom, left의 약칭으로 쓰이는 건 어렴풋이 알고 있었지만, 갑자기 왜 바뀌었는지 의문이 들어서 우선 vanilla-extract의 저장소에서 inset 관련 키워드와 라이브러리 디펜던시에 걸린 패키지를 찾아봤지만 찾을 수 없었어요.
이다음으로 확인해 본 것이 tsup에서 사용 중인 esbuild 인데요, 결론적으로는 여기에 원인이 있었어요.
esbuild 공식 문서에서는 다음과 같이 설명하고 있는데요.
Note that by default, esbuild’s output will take advantage of modern CSS features. For example, color: rgba(255, 0, 0, 0.4) will become color: #f006 when minifying is enabled which makes use of syntax from CSS Color Module Level 4. If this is undesired, you must specify esbuild's target setting to say in which browsers you need the output to work correctly. Then esbuild will avoid using CSS features that are too modern for those browsers.
이전에 작성했던 글처럼 tsup config에서 target을 es5로 설정하면 우선 esbuild에서 es2020으로 빌드 하다보니 위에 문서에서 설명 중인 것처럼 CSS 최신 스펙인 inset으로 교체가 되었던 것이었죠.
해결 방법
이후 추가로 확인해 본 결과, 문제를 해결할 수 있는 방법은 크게 두 가지가 있었어요. 먼저, esbuild의 target을 구형 브라우저에 맞게 설정하기 위해 tsup config에서 esbuildOptions를 통해 지정해 주거나, esbuild supported 옵션에서 inset-property를 비활성화(false) 처리하는 방법이에요.
처음에는 target을 통해 변경할 때 빌드된 js 파일에 이슈가 발생하면 어떻게 처리해야 할지 걱정하면서, 일단은 inset-property를 비활성화하는 방안으로 고려했어요. 그러나 이후에는 inset뿐만 아니라 다른 최신 CSS 문법도 이슈가 될 가능성이 있어 보여서, 일단은 target을 설정하고 js 파일에서 문제가 없는지 확인한 후에 다음과 같이 처리했어요.
// tsup.config.ts
export default defineConfig((options) => {
  // ...etc,
  target: 'es5',
  esbuildOptions(options) {
   options.target = ['chrome64', 'ios12'];
  },
});
마치며
이전 글에 이어 tsup과 esbuild 사용 시 이슈를 두 번이나 겪다니 저랑 뭔가 있나 봅니다(?)
동료 개발자분의 제보 덕분에 나름 꽤 신선한(?) 경험을 했었던 것 같고, 이렇게 글로 정리해서 남겨볼 수 있어서 좋았어요. (감사합니다 😌)
출처
https://esbuild.github.io/content-types/#css
https://github.com/evanw/esbuild/issues/1925

나는 분명 inset을 사용한 적이 없는데 CSS 출력물에 inset이 들어있던 건에 대해서

댓글