이 도구에 대하여
CSS를 JS 스타일 객체로 변환 도구는 CSS 블록을 React 인라인 스타일이나 styled-components, Emotion 같은 CSS-in-JS 라이브러리에 적합한 JavaScript 객체로 변환합니다. 선언을 브라우저에서 로컬로 파싱하며 아무것도 업로드하지 않으므로, 스타일시트를 인라인 스타일로 옮기는 것은 붙여넣고 복사하기만 하면 됩니다.
각 속성 이름은 camelCase 됩니다. background-color는 backgroundColor, z-index는 zIndex가 됩니다. 벤더 접두사는 React의 규칙을 따릅니다. 선두의 -ms-는 소문자 ms(msFilter)가 되고, -webkit-, -moz-, -o-는 대문자로 Webkit, Moz, O(WebkitBoxShadow)가 됩니다. 커스텀 속성(--brand-color)은 인용된 키로 그대로 유지됩니다. 값은 기본적으로 문자열로 출력되어 단위와 !important를 보존하며, 숫자 토글을 켜면 순수 정수와 소수가 인용 없는 숫자가 됩니다. 유효한 JavaScript 식별자인 키는 인용 없이 남고 나머지는 자동으로 인용됩니다.
입력이 순수 선언 블록(셀렉터 없음)이면 하나의 평면 객체를 만들며, 이는 React style prop에 완벽합니다. 입력이 셀렉터가 있는 전체 규칙을 포함하면 styled/Emotion 모드가 각 셀렉터 문자열을 키로 하는 중첩 객체(그 라이브러리들이 받아들이는 객체 구문)를 출력합니다. 출력 const 이름을 제어할 수 있으며, 전체는 const styles = { ... };로 작성되어 붙여넣을 준비가 됩니다.