CSS를 JavaScript 객체로 변환 — Numio

postcss-js로 일반 CSS를 JavaScript 객체(CSS-in-JS)로 변환합니다. 속성 이름은 camelCase가 되고, 선택자와 at 규칙은 키가 되며, 한 규칙 안에서 반복된 속성은 값 배열이 됩니다.

.css 파일의 스타일을 속성을 일일이 다시 입력하지 않고 styled-system, JSS, Emotion, Radium 객체로 옮길 때.

CSS

JavaScript Object

이럴 때 사용하세요

.css 파일의 스타일을 속성을 일일이 다시 입력하지 않고 styled-system, JSS, Emotion, Radium 객체로 옮길 때.
디자인 도구나 브라우저 DevTools에서 복사한 CSS 스니펫을 인라인 스타일이나 style prop용 객체로 바꿀 때.

사용 방법

CSS 편집기에 CSS를 붙여 넣거나 .css 파일을 끌어다 놓습니다.
JavaScript Object 패널에서 결과를 확인합니다. 결과는 `const converted`에 할당되고 Prettier로 포맷됩니다(세미콜론 없음).
객체를 복사해 `converted` 이름을 바꾸고 필요한 선택자 키를 골라 씁니다. 이 페이지에는 바꿀 설정이 없습니다.

CSS 입력

.card {
  display: flex;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.card:hover .title {
  color: tomato;
}

@media (max-width: 600px) {
  .card { flex-direction: column; }
}

JavaScript 객체

const converted = {
  ".card": {
    display: "flex",
    backgroundColor: "#fff",
    WebkitBoxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
    margin: "0 auto",
  },
  ".card:hover .title": { color: "tomato" },
  "@media (max-width: 600px)": { ".card": { flexDirection: "column" } },
}

세부 정보 및 제한 사항

변환은 브라우저의 Web Worker에서 실행되며(PostCSS 파싱 + postcss-js objectify), CSS는 서버로 전송되지 않습니다.

벤더 접두사가 붙은 속성은 PascalCase로 접두사를 유지합니다(예: -webkit-box-shadow는 WebkitBoxShadow). --main-color 같은 사용자 정의 속성은 원래 이름을 유지합니다.

값은 문자열로 유지되지만, z-index처럼 단위 없는 숫자 속성은 숫자가 됩니다. 주석은 삭제됩니다.

출력은 React Native에서 바로 쓸 수 없습니다. 선택자, :hover, @media 블록은 중첩 키로 남고, 단축 속성 값도 펼쳐지지 않습니다.

FAQ

같은 선택자가 두 번 나오면 어떻게 되나요?

같은 선택자의 규칙은 하나의 키로 병합됩니다. 같은 속성이 두 번 선언되면(예: color: red !important; color: blue) 키의 값은 배열 ["red !important", "blue"]가 됩니다.

@media 쿼리와 중첩 선택자를 지원하나요?

네. @media 블록은 "@media (max-width: 600px)" 같은 키가 되고, 그 값은 내부 규칙을 담은 객체입니다. 자손 선택자와 의사 선택자는 완전한 문자열 키로 유지됩니다.

"Unclosed block" 오류가 나는 이유는 무엇인가요?

입력은 유효한 CSS여야 합니다. PostCSS는 닫는 중괄호 누락 같은 구문 오류에서 멈추고 줄과 열을 알려 줍니다. Sass나 Less 구문(변수, 중첩)은 여기서 컴파일되지 않습니다.

사양 및 참고 자료

postcss-js on GitHub