Offcanvas

개발자 / 애플리케이션

'파슬 CSS 파서' 나왔다··· "성능 및 축소 측면에서 강점"

2022.01.17 Paul Krill  |  InfoWorld
러스트(Rust) 기반 CSS 파서(parser), 컴파일러, 축소기(minifier)인 파슬 CSS(Parcel CSS)가 지난주 공식 발표됐다. 성능 및 축소 측면에서 강점을 지니는 도구라고 개발사 측은 강조했다. 

러스트 언어로 작성된 이 도구는, CSS 모듈의 컴파일링을 처리하며, 중첩(nesting), 논리적 속성 및 레벨 4 색상 구문(Level 4 color syntax) 등의 CSS 기능을 트리 셰이킹 및 트랜스파일링한다. 

파슬 CSS는 파슬과 함께 사용되거나 자바스크립트 또는 러스트의 독립실행형 라이브러리로 사용될 수 있다. 다른 도구 내에서 플러그인으로 래핑될 수도 있다. 지난 1월 12일 깃허브에 등록됐다. 현재 브라우저에서 라이브 데모를 시험해볼 수 있다. 

개발진에 따르면 파슬 CSS의 강점 중 하나는 빠른 속도다. 네이티브 언어로 작성된 한편, 설계 시점부터 성능을 염두에 두고 개발됐기 때문이다. 이 밖에 CSS 속성을 사용할 때마다 다시 구문 분석해야 하는 문자열로 나타내지 않고 구조화된 데이터로 구문 분석 업무를 수행하는 메모리 최적화 기능을 갖췄다. 

이 밖에 빠른 속도를 감안했음에도 불구하고 크기 및 요소 측면에서 타협하지는 않았다는 설명이다. 많은 라이브러리에서 사용되는 레거시 CSS 구문을 더 작고 현대적인 구문으로 변환하는 기능을 지원한다. 따라 많은 경우 다른 도구보다 더 작은 출력물을 생성한다고 개발진은 밝혔다. 아울러 각 개별 CSS 속성을 이해하기도 하는 것으로 전해졌다. 

한편 파슬 CSS의 근간은 ‘css파서 러스트 크레이트’(cssparser Rust crate)다. 이는 파이어폭스 브라우저에서 사용되는 브라우저 등급 토크나이저다. 이를 통해 토큰화 및 기본 구문 분석 등을 아우르는 근간을 제공하게 된다. 파슬 사용자는 .parcelrc 파일에 다음을 추가하여 Parcel CSS를 사용해 볼 수 있다.

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.css": ["@parcel/transformer-css-experimental"]
  },
  "optimizers": {
    "*.css": ["@parcel/optimizer-css"]
  }
}


사용을 위해서는 또 대상 CSS가 컴파일될 대상 브라우저를 정의하기 위해서 기존 package.json에 browserlist 속성을 추가해야 한다. ciokr@idg.co.kr
CIO Korea 뉴스레터 및 IT 트랜드 보고서 무료 구독하기
Sponsored
추천 테크라이브러리

회사명:한국IDG 제호: CIO Korea 주소 : 서울시 중구 세종대로 23, 4층 우)04512
등록번호 : 서울 아01641 등록발행일자 : 2011년 05월 27일

발행인 : 박형미 편집인 : 천신응 청소년보호책임자 : 한정규
사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2024 International Data Group. All rights reserved.