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

export class StyleSheet {
  isSpeedy: boolean
  ctr: number
  tags: HTMLStyleElement[]
  container: HTMLElement
  key: string
  nonce: string | void
  prepend: boolean | void
  before: Element | null
  insertionPoint: HTMLElement | void
  constructor(options: Options) {
    this.isSpeedy =      options.speedy === undefined        ? process.env.NODE_ENV === 'production'        : options.speedy    this.tags = []
    this.ctr = 0
    this.nonce = options.nonce
    // key is the value of the data-emotion attribute, it's used to identify different sheets
    this.key = options.key
    this.container = options.container
    this.prepend = options.prepend
    this.insertionPoint = options.insertionPoint
    this.before = null
  }

_insertTag = (tag: HTMLStyleElement) => {
    let before
    if (this.tags.length === 0) {
      if (this.insertionPoint) {
        before = this.insertionPoint.nextSibling
      } else if (this.prepend) {
        before = this.container.firstChild
      } else {
        before = this.before
      }
    } else {
      before = this.tags[this.tags.length - 1].nextSibling
    }
    this.container.insertBefore(tag, before)
    this.tags.push(tag)
  }

insert(rule: string) {
    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
    // it's 1 in dev because we insert source maps that map a single rule to a location
    // and you can only have one source map per style tag
    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {      this._insertTag(createStyleElement(this))
    }
    ...

    this.ctr++  }

import React from 'react'
import styled from '@emotion/styled'

const Button = styled.button`
  color: hotpink;
`
const Button2 = styled.button`
  color: blue;
`

const Button3 = styled.button`
  color: green;
`

function App() {
  return (
    <div className='App'>
      <h1>{process.env.NODE_ENV}</h1>
      <Button>이모션</Button>
      <br />
      <Button2>고모션</Button2>
      <br />
      <Button3>저모션</Button3>
    </div>
  )
}

export default App

insert(rule: string) {
    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
    // it's 1 in dev because we insert source maps that map a single rule to a location
    // and you can only have one source map per style tag
    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
      this._insertTag(createStyleElement(this))
    }
    ...

    if (this.isSpeedy) {
      const sheet = sheetForTag(tag)
      try {
        // this is the ultrafast version, works across browsers
        // the big drawback is that the css won't be editable in devtools
        sheet.insertRule(rule, sheet.cssRules.length)      } catch (e) {
        if (
          process.env.NODE_ENV !== 'production' &&
          !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear){/.test(
            rule
          )
        ) {
          console.error(
            `There was a problem inserting the following rule: "${rule}"`,
            e
          )
        }
      }
    } else {
      tag.appendChild(document.createTextNode(rule))    }
    this.ctr++
  }

import React, { useState } from 'react'
import styled from '@emotion/styled'

const Button = styled.button<{ flag: boolean }>`
  color: ${(props) => (props.flag ? 'pink' : 'hotpink')};
  font-weight: bold;
`
const Button2 = styled.button<{ flag: boolean }>`
  color: ${(props) => (props.flag ? 'skyblue' : 'blue')};
  font-weight: bold;
`

const Button3 = styled.button<{ flag: boolean }>`
  color: ${(props) => (props.flag ? 'yellow' : 'green')};
  font-weight: bold;
`

function App() {
  const [flag, setFlag] = useState(false)
  return (
    <div className='App'>
      <h1>{process.env.NODE_ENV}</h1>
      <button onClick={() => setFlag((flag) => !flag)}>flag 바꾸기</button>
      <br />
      <br />
      <Button flag={flag}>이모션</Button>
      <br />
      <Button2 flag={flag}>고모션</Button2>
      <br />
      <Button3 flag={flag}>저모션</Button3>
    </div>
  )
}

export default App

export const DISABLE_SPEEDY = Boolean(
  typeof SC_DISABLE_SPEEDY === 'boolean'
    ? SC_DISABLE_SPEEDY
    : typeof process !== 'undefined' &&
      typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
      process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''
    ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'
      ? false
      : process.env.REACT_APP_SC_DISABLE_SPEEDY
    : typeof process !== 'undefined' &&
      typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' &&
      process.env.SC_DISABLE_SPEEDY !== ''
    ? process.env.SC_DISABLE_SPEEDY === 'false'
      ? false
      : process.env.SC_DISABLE_SPEEDY
    : process.env.NODE_ENV !== 'production'
)

const defaultOptions: SheetOptions = {
  isServer: !IS_BROWSER,
  useCSSOMInjection: !DISABLE_SPEEDY}

/** Create a CSSStyleSheet-like tag depending on the environment */
export const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions) => {
  if (isServer) {
    return new VirtualTag(target)
  } else if (useCSSOMInjection) {
    return new CSSOMTag(target)  } else {
    return new TextTag(target)
  }
}

 insertRule(index: number, rule: string): boolean {
    try {
      this.sheet.insertRule(rule, index);      this.length++;
      return true;
    } catch (_error) {
      return false;
    }
  }

  insertRule(index: number, rule: string) {
    if (index <= this.length && index >= 0) {
      const node = document.createTextNode(rule);
      const refNode = this.nodes[index];
      this.element.insertBefore(node, refNode || null);      this.length++;
      return true;
    } else {
      return false;
    }
  }

import { createTheme, style } from '@vanilla-extract/css'

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue',
    white: '#fff'
  },
  space: {
    small: '4px',
    medium: '8px'
  }
})

export const hero = style({
  backgroundColor: vars.color.brandd,
  color: vars.color.white,
  padding: vars.space.large
})

**사고의 과정**

1. 왜 emotion라이브러리를 사용하면 운영에서 스타일 태그가 비어있지?
2. emotion, styled-component와 같은 runtime css-in-js 라이브러리 코드를 파악해보니 dev와 prod는 runtime css in js의 성능 문제를 해결하려다보니 다르게 구현했구나?
3. 그럼 run-time 이외의 css-in-js는 있을까? (zero run time css / near zero run time css)

import media from 'css-in-js-media'

export const exampleClass = css`
  color: red;
  ${media('>desktop')} {
    font-size: 15px;
  }
  ${media('<=desktop', '>tablet')} {
    font-size: 20px;
  }
  ${media('<=tablet', '>phone')} {
    font-size: 25px;
  }
  ${media('<=phone')} {
    font-size: 30px;
  }
`