CSS-Deduplication part1 (postcss 커스텀 스크립트를 이용한 CSS 중복 제거)

2024-01-16 - Estimated reading time: 3 minutes — Front-end

본 포스팅을 통해 postcss 를 이용하는 방법에 대해 배울 수 있습니다. 또한 원하는 플러그인이 없는 경우 custom 플러그인을 작성하는 방법을 학습할 수 있습니다.

Abstract

두 개의 파일을 하나의 파일로 병합.
CSS 파일내에 중복된 속성에 대해 상위에 선언된 속성만 남기고 동일 속성명에 대해서는 삭제를 수행.
CSS 압축 수행.

두 개의 파일을 하나의 파일로 병합

두개 또는 세개의 파일을 하나의 파일로 병합하는 방법은 다음과 같다.

# linux
> cat a.css b.css c.css > input.css

# windows
> type a.css b.css c.css > input.css

프로젝트 초기화

npm 프로젝트를 초기화 합니다.

> npm init -y  # -y 옵션을 사용하면 불필요한 질문을 skip 합니다.

PostCSS 플러그인 설치

공식문서에 다음과 같이 postcss를 설명하고 있다.

이름에서도 알 수 있듯이 CSS 후처리를 js 플러그인을 기반으로 다양한 변환 작업 수행을 도와준다.

아래의 명령어를 통해 PostCSS 와 PostCSS-CLI 를 설치해보자.

> npm i -D postcss postcss-cli  # -D 옵션 : --save-dev의 축약형으로 devDependency로 설치

node 의 버전은 18.15.0 으로 진행

> node -v
  v18.15.0

> nvm list
18.15.0 (Currently using 64-bit executable)
14.17.4

# 💡 14.17.4 버전에서는 postcss-cli 가 동작하지 않는다. 아래의 명령어로 버전 변경.
> nvm use 18.15.0

package.json 파일 내용

{
  "name": "postcss2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "postcss input.css --output dist/output.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "postcss": "^8.4.32",
    "postcss-cli": "^11.0.0"
  }
}

input.css 파일의 내용에서 중복제거하여 dist/output.css 로 떨구도록 설정하였다.

input.css 파일 내용

h1 {
  margin: 0 auto;
  padding-left: 10px;
}
h1 {
  margin: 10 10 10 10;
}
h1 {
  color: red;
}
.test {
  color: red;
}
.hello {
  background-color: blue;
}
.foo {
  width: 100px;
  height: 100px;
}
.foo {
  height: 100px;
  width: 100px;
}
.test {
  margin: 0 auto;
  padding-left: 10px;
}

input.css 파일내용 중 중복된 h1 선언의 경우 맨 위에것만 남기도록 처리할 것이다. (모든 중복 선택자 제거)

postcss 플러그인 사용을 위한 환경설정 파일인 postcss.config.js 파일을 프로젝트 루트에 생성한다.

postcss.config.js 파일 내용

const postcss = require("postcss");

module.exports = {
  plugins: [customMerge({})],
};

// custom-clean plugin to keep only the first declaration of each rule
function customMerge(options) {
  return postcss.plugin("custom-clean", () => {
    return (root, result) => {
      const visitedRules = new Map();

      root.walkRules((rule) => {
        const selector = rule.selector;

        if (!visitedRules.has(selector)) {
          visitedRules.set(selector, rule);
        }
      });

      root.removeAll();

      visitedRules.forEach((rule) => {
        root.append(rule);
      });
    };
  });
}

빌드 수행

> npm run build
postcss2@1.0.0 build
postcss input.css --output dist/output.css
custom-clean: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration

dist/output.css 파일 결과

h1 {
  margin: 0 auto;
  padding-left: 10px;
}
.test {
  color: red;
}
.hello {
  background-color: blue;
}
.foo {
  width: 100px;
  height: 100px;
}

여기까지 하면 CSS 중복을 제거 하는 작업이 완료되었다.

postcss-clean을 이용한 CSS 압축

postcss-clean 설치

> npm i -D postcss-clean

package.json 파일 내용

{
  "name": "postcss2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "postcss input.css --output dist/output.css",
    "build:min": "postcss dist/output.css --use postcss-clean -o dist/output.min.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "postcss": "^8.4.32",
    "postcss-cli": "^11.0.0",
    "postcss-clean": "^1.2.2"
  }
}

💡 build:min 스크립트를 추가했다. 다른설정은 불필요.

바로 빌드 수행

> npm run build:min

output.min.css 파일 결과 내용

h1{margin:0 auto;padding-left:10px}.test{color:red}.hello{background-color:#00f}.foo{width:100px;height:100px}h1,h2{margin:10 10 10 10}.hwan77{color:red}
/_# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIiUzQ2lucHV0JTIwY3NzJTIwMSUzRSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxHQUFHLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQyxNQUFNLFNBQVMsQ0FBQyxPQUFPLHFCQUFxQixDQUFDLEtBQUssV0FBVyxDQUFDLFlBQVksQ0FBQyxNQUFNLGtCQUFrQixDQUFDLFFBQVEsU0FBUyIsImZpbGUiOiJvdXRwdXQubWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImgxe21hcmdpbjowIGF1dG87cGFkZGluZy1sZWZ0OjEwcHh9LnRlc3R7Y29sb3I6cmVkfS5oZWxsb3tiYWNrZ3JvdW5kLWNvbG9yOiMwMGZ9LmZvb3t3aWR0aDoxMDBweDtoZWlnaHQ6MTAwcHh9aDEsaDJ7bWFyZ2luOjEwIDEwIDEwIDEwfS5od2FuNzd7Y29sb3I6cmVkfSJdfQ== _/

build 스크립트에서 postcss ... 와 같이 설정하는 경우 postcss.config.js 파일의 내용을 기반으로 스크립트를 수행한다.

postcss --use postcss-clean 과 같이 플러그인의 이름을 직접 지정하는 경우 postcss.config.js 파일을 참고하지 않고 바로 postcss-cli를 통해서 플러그인을 실행할 수 있다.

다음 글: 심볼릭 링크로 마크다운 에디터로 업로드한 이미지 HUGO에서 바로 확인 이전 글: CSS-Deduplication part 2 (CSS 중복제거 플러그인 제작)

Hwantage world