uglifycss가 값이 0인 단위(s, %) 삭제하는 것 수정하기
개요: uglifycss가 단위를 삭제해요
서브라임 텍스트에서 css minify 툴로 uglifycss를 쓰고있어요.
clean-css는 --skip-rebase 문제도 있고, 해당 옵션 제거해서 실행하면 또 자기 마음대로 코드를 삭제하거나 꼬아버리는 문제가 있더라고요. 옵션을 조절해도 소용 없어서 그냥 쓰던 거 쓰고 있죠.
빌드 기능을 이용해서 esbuild도 써 봤는데 익숙치 않다보니 뭔가 불편한 느낌 때문에 uglifycss를 자주 쓰게 되더라고요.
그런데 uglifycss도 문제가 있어요. 값이 0이면 해당 단위를 삭제해 버린다는 거죠.
px 같은 경우는 문제되지 않지만 애니메이션에서 퍼센트(%) 값이나, 트랜지션에서 초(s) 단위를 지우면 문제가 터져요.
조절 옵션은 없는지?
없는 것 같아요. 찾아봤는데 안 나오더라고요. 서브라임 텍스트의 minify 패키지를 설치해서 사용중인데, 그 설정에도 마땅한 옵션이 보이지 않았어요.
uglifycss 깃허브 페이지를 보면 업데이트가 오래전에 중단되어서 개선을 기대할 수도 없겠더라고요.
서브라임 텍스트 말고 notepad++도 사용중인데, 거긴 css minify 플러그인은 마땅한 게 없어서 js만 작성하고 있는 중이에요.
그래서 결국 '직접 한번 수정해 보죠!' 라는 결론에 도달했어요.
복잡한 것 아닌지?
아뇨. 간단해요. 정규식 한 줄만 수정하면 끝이에요. 아래의 절차를 따르면 1분이면 끝나요.
- 윈도우 탐색기 주소창에 '
%appdata%\npm\node_modules\uglifycss' 입력 - 'uglifycss-lib.js' 백업 후 열기
- 700번 라인의 '// replace 0(px,em,%) with 0.' 찾기
- 정규식에서 '%' 및 'm?s' 제거
- 파일 저장
이러면 끝이에요. 이제 서브라임 텍스트에서 uglifycss를 이용하여 css를 압축할 때 퍼센트(%)나 초(s, ms)단위가 삭제되지 않을 거예요.
결론: 간단하게 해결 가능해요
이 정규식만 수정하면 다른 단위에서도 값이 0일 때 단위가 지워지지 않도록 할 수 있는데, 현재는 다른 단위 건드릴 이유가 없어서 초(s), 퍼센트(%) 단위만 보존하도록 했어요.
uglifycss 버전은 0.0.29 기준이고요, 서브라임 텍스트에서 minify 패키지 설치해서 쓰는 중이에요. 참고하셔요.