[CSS, EmotionJS] css 가 처음 로딩 시 적용되다가 깨지는 이슈

[bluelion2]

✨ What? 발견된 이슈 간단히 정리하기

특정 선생님만 웹 사이트 접근시 css가 꺠져서 나오는 이슈

• window 10, chrome 최신버전 사용하고 있으며, cache 및 localstorage등 초기화를 통해 흔히 사용하는 해결방안으로 해결되지 않음
• 처음 진입시 css를 가지고 와서 그리는 듯 하나, 잠시 후 화면이 깨짐.

📚 캡쳐한 사진들

[bluelion2]

사용자 크롬에 확장프로그램으로 수식 셰프 하나만 존재하는데, 끄면 css 가 정상 동작함.

크롬 익스텐션

• 26명 크롬에서 사용
• 1000명정도 웨일에서 사용중
• 우리와 같은 @emotion을 통해 스타일링

[bluelion2]

• 수식 셰프를 처음 실행시 또는 처음 켜진 상태에서 처음 웹 진입시에만 차단하고 있음.
• 수식 셰프 앱 실행시 iframe으로 새로운 html을 생성해서 하단부에 노출하고 있음.
• 우리 웹페이지는 페이지 마다 emotion/css를 만들어서 쓰고 있어서 다음 페이지로 이동하면 제대로 불러와서 보여주고 있음.

---

extension으로 인해 jira style도 깨짐

---

Extension으로 인해 웨일 브라우저에서도 깨짐 - jira

[bluelion2]

원인 추측으로는 emotion/cache 일 것으로 추측중.

Primary use cases
Using emotion in embedded contexts such as an <iframe/>

Setting a [nonce](https://emotion.sh/docs/@emotion/cache#nonce-string) on any <style/> tag emotion creates for security purposes

Using emotion with a developer defined <style/> tag

Using emotion with custom Stylis plugins

[bluelion2]

해당 익스텐션 프로젝트 코드중.. @emotion/cache 의심이 가는 부분

createCache
createCache allows for low level customization of how styles get inserted by emotion. It's intended to be used with the [<CacheProvider/>](https://emotion.sh/docs/cache-provider) component to override the default cache, which is created with sensible defaults for most applications.

createCache createCache는 @emotion에 의해 스타일이 삽입되는 방법에 대한 낮은 수준의 사용자 정의를 허용합니다. 대부분의 응용 프로그램에 적합한 기본값으로 생성되는 기본 캐시를 재정의하기 위해 구성 요소와 함께 사용하기 위한 것입니다.

@emotion/cache

---

function App() {
  return (
    <Extension height={toggle ? '80px' : '35%'} minHeight={toggle ? '' : '200px'}>
      <Frame
        id="iframe"
        head={[
          <link
            key={1}
            type="text/css"
            rel="stylesheet"
            href={
              process.env.NODE_ENV === 'development'
                ? 'content.css'
                : chrome.runtime.getURL('/content.css')
            }
          ></link>,
          <link
            key={2}
            type="text/css"
            rel="stylesheet"
            href={
              process.env.NODE_ENV === 'development'
                ? 'sementic.css'
                : chrome.runtime.getURL('/sementic.css')
            }
          ></link>,
        ]}
      >
        <FrameContextConsumer>
          {({ document, window }) => {
            const cache = createCache({
              key: 'head',
              container: document.head,
            });
            return (
              <CacheProvider value={cache}>
                <MainPage toggle={toggle} onToggle={onToggle} />
              </CacheProvider>
            );
          }}
        </FrameContextConsumer>
      </Frame>
    </Extension>
  );
}

export default App;

[bluelion2]

추측

• 확장프로그램의 @emotion/cache로 인해 기존 css를 override 해서 덮어 씌움. -> 화면이 처음에 잘 나오다가 깨지는 것처럼 보이게 됨.

참고

• css-in-js 라이브러리 코드로 파악해보는 css-in-js의 이모저모
• emotion/cache

[bluelion2]

emotion을 쓰는 곳은 다 깨지는듯...

• 크몽

[bluelion2]

흠... 그렇다고 하기에는 같은 @emotion을 쓰는 ifKakao page는 또 잘 나오네...

[bluelion2]

cacheProvider가 문제가 맞는듯.

• CacheProvider를 적용시키면 적용시킨 범위 내에서, cache key를 class명에 추가해줌으로써 다른 cache를 피하게 됨.

Code

Result

[bluelion2]

createCache(option)에는 옵션을 줄 수 있는데,

option: { key: 'css' ... }

data-emotion=css-global에 저장하지 않고, data-emotion={key}에 저장을 하게 됨 cache를 쓰지 않으면 data-emotion=css-global 에 css 저장.

Ifkakao

Among

[bluelion2]

로컬(dev)에서는 잘 나오지만, production에서는 잘 나오지 않는 이유

• css 수정하는 방법의 차이
• link

[bluelion2]

결론

• cacheProvder를 통해서 key를 넣어주면 emotion style을 관리하는 style tag의 data-emotion과, 클래스명 앞에 key를 붙여서 만듬 -> 다른 emotion/cache 또는 css-global로 관리하지 않고 독립적으로 분리 가능
• 적용시키지 않으면, Provider 바깥 범위의 emotion style들이 무력화