• 요약
• 동기
  • 왜 Tailwind CSS인가요?
  • 목표
  • 비목표
• 제안
  • 장점
  • 단점
• 디자인 및 구현 세부 정보

Tailwind CSS에 CSS 유틸리티 클래스 생성 위임

요약

GitLab에서 엘리먼트 스타일링은 주로 CSS 유틸리티 클래스에 의존합니다. 이러한 클래스들은 일반적으로 단일 CSS 속성을 정의하고 요소의 외관을 변경할 수 있는 추가적인 적용이 가능한 클래스입니다. 우리는 필요한 유틸리티를 생성하기 위해 GitLab UI 프로젝트에서 우리만의 도구를 개발했지만, 우리의 방식은 해결해야 할 여러 결함을 보여주었으며, 이를 Tailwind CSS 프레임워크에 위임함으로써 이러한 결함을 우회할 수 있음을 입증했습니다.

이 계획은 Tailwind CSS가 이러한 기존 유틸리티를 대체할 수 있도록 우리가 기존 유틸리티를 폐기해야 한다는 것을 요구합니다.

동기

2019년 6월, 우리는 RFC#4를 통해 CSS 유틸리티 클래스의 사용을 정리했으며, 여기에는 유틸리티가 매뉴얼으로 정의된 SCSS 믹스인의 모음에서 생성되는 개념이 소개되었습니다.

이러한 방식은 우리에게 유용했지만 몇 가지 주의해야 할 점이 있었습니다:

• 개발 오버헤드 증가: 새 유틸리티가 필요할 때마다 이를 매뉴얼으로 GitLab UI 프로젝트에 추가해야 합니다. 그런 다음 소비자 프로젝트에서 새 버전의 @gitlab/ui를 기다리고 설치해야 합니다.
• 불일치: 유틸리티가 어떻게 명명되었는지 확인하는 도구가 없기 때문에 라이브러리에 많은 불일치가 발생하여 매우 예측하기 어려워졌습니다. 이러한 사례 중 하나로, 몇몇 모바일 우선 유틸리티들 사이에 데스크톱 우선 유틸리티가 들어가면서 이를 구별할 수 있는 방법이 없었습니다.
• 유틸리티 라이브러리와 그 사용자 간의 연결 끊김: 라이브러리에 유틸리티를 추가하면 @gitlab/ui를 사용하는 모든 프로젝트에서 해당 유틸리티를 사용할 수 있습니다. 결과적으로 어떤 프로젝트에서는 필요 없는 유틸리티가 포함됩니다. 반대로, 모든 사용자가 특정 유틸리티 사용을 중단하면 CSS 번들 크기를 줄이기 위해 해당 유틸리티를 제거할 수 있지만, 우리는 이에 대해 시각성이 전혀 없었습니다.
• 제한된 자동 완성: 기존 라이브러리에 대해 자동 완성을 구성하는 것은 가능하지만, 이는 유틸리티 번들로 제한됩니다. 반면, Tailwind CSS 자동 완성은 요구 시 접근 가능하며, 여러분이 사용하는 구체적인 유틸리티가 적용하는 값들을 드러내어 이해를 향상시키는 IDE 확장을 이용할 수 있습니다.

이러한 아키텍처 변경의 일환으로, 우리는 CSS 유틸리티를 생성하는 우리만의 솔루션을 삭제하고 Tailwind CSS에 이 임무를 위임함으로써 이러한 문제를 완화합니다.

이와 관련하여 이전에 RFC#107에서 논의되었었습니다. RFC는 호응이 좋았습니다. 제기된 몇 가지 우려 사항은 CSS 유틸리티 접근 방식 전체에 대한 것이었으며, 우리가 그것을 구현한 방식에 대한 것은 아니었습니다. 이 계획의 목적은 추가적으로 사용된 용어 클래스에 의문을 제기하는 것이 아니라 CSS 유틸리티를 전체적으로 구현하여 엔지니어가 CSS 유틸리티와 작업할 때 효율성을 향상시키는 것입니다.

왜 Tailwind CSS인가요?

우리가 유사한 도구 대신 Tailwind CSS를 선택한 몇 가지 이유는 다음과 같습니다:

• 이 프로젝트는 많은 프로덕션 앱에서 실전에 검증되었으며 건강한 커뮤니티가 형성되어 있는 오랜 기간의 프로젝트입니다.
• Tailwind CSS는 잘 유지되고 부풀어 오르지 않고 계속 발전하고 있습니다.
• Ruby on Rails 프로젝트는 tailwindcss-rails Gem를 활용할 수 있습니다.
• Nuxt 앱은 tailwindcss 모듈을 설정할 수 있습니다.
• 더 일반적인 프론트엔드 스택은 tailwindcss Node 모듈을 사용할 수 있습니다.

목표

이 청사진의 목표는 CSS 유틸리티 클래스를 사용할 때 개발자 경험(DX)을 향상시키는 것입니다. 이 계획의 결과로 프론트엔드 엔지니어의 효율성이 크게 향상되어야 합니다.

비목표

위에서 언급한 바와 같이, 이것은 기존의 아키텍처 결정을 개선하는 데 중점을 둔 것으로, 새로운 설계로 교체하는 것이 아닙니다. 따라서 이 계획은 다음과 같습니다:

• _CSS 작성 방식이나 프로젝트 내에서 스타일을 적용하는 방식을 재검토하는 것이 아닙니다.
• _사용자 친화적인 개선에 중점을 두지 않습니다. 이 변경은 대부분 개발자 경험을 향상하는 것이며, 결과적으로 사용자 경험을 간접적으로 향상시킬 수 있지만 우리의 주요 의도는 아닙니다.

제안

우리는 Tailwind CSS를 GitLab UI와 GitLab에 설정할 예정입니다. 이 계획은 GitLab UI에서 주요 Tailwind CSS 설정을 갖도록 하는 것입니다. 여기서는 Pajamas 호환 구성 속성(색상, 간격 스케일 등)을 유지할 예정입니다. GitLab에서는 GitLab 코드베이스와 @gitlab/ui Node 모듈을 스캔할 것입니다. 이렇게 함으로써 GitLab UI는 더 이상 CSS 유틸리티를 노출시키지 않아도 되지만, 그것이 의존하는 유틸리티는 여전히 GitLab에서 생성됩니다. 유사한 설정은 CSS 유틸리티를 사용하고 Tailwind CSS 기반 버전으로 업그레이드해야 하는 다른 프로젝트들에 도입되어야 할 것입니다.

장점

• 새로운 유틸리티를 추가하는 번거로운 작업이 사라집니다. 사용자는 다른 프로젝트에 기여하고 릴리스 주기를 기다릴 필요 없이 즉시 어떤 유틸리티든 사용할 수 있어야 합니다.
• 이름 정하는 오히려 Tailwind CSS 프로젝트에서 결정되는 예측 가능한 라이브러리를 도입하고 있습니다.
• 엔지니어는 언제나 사용 가능한 유틸리티와 이를 사용하는 방법에 대해 알기 위해 Tailwind CSS 문서를 참조할 수 있습니다. 이제 더 이상 GitLab UI의 소스 코드를 통해 읽지 않아도 됩니다.
• Tailwind CSS는 소비자의 코드베이스를 스캔하여 필요한 유틸리티를 생성하기 때문에, CSS 번들 크기를 관리하면서 실제로 필요한 유틸리티만 생성될 것입니다. 이것은 염두에 두어야 할 사항이지만, Tailwind CSS는 매우 유연하여 때로는 개발자가 정의한 값과 함께 다양한 유틸리티를 생성할 수 있는데, 이는 우리가 Tailwind CSS의 기능을 어떻게 채택하느냐에 따라 큰 유틸리티 번들로 이어질 수 있습니다.
• 지원하는 유틸리티에 대한 자동 완성과 미리보기를 제공하는 견고한 IDE 통합을 활용할 수 있습니다.

단점

• 더 많은 설정: CSS 유틸리티가 필요한 각 프로젝트는 Tailwind CSS를 설정해야 하며, 환경에 따라 더 또는 적은 지루하게 느껴질 수 있습니다.
• 각 프로젝트에 더 많은 개발 의존성.
• 문자열 보간을 사용하여 클래스 이름을 동적으로 생성할 수 없음(Tailwind CSS는 필요한 클래스 생성을 위해 전체 이름을 볼 필요가 있습니다).
• 마이그레이션이 필요합니다: 기존 CSS 유틸리티 라이브러리의 사용을 보증하여 마이그레이션 프로세스를 함께 보장해야 합니다.

디자인 및 구현 세부 정보

파괴를 방지하기 위해 현재 라이브러리를 점진적으로 멀리하는 방식으로 접근하고 있습니다. 여기에서 제안된 경로는 고의적으로 날카로운 부분이 있습니다. 이것이 한국의 사례에 일치하는 것이 아니며 어떤 경우에는 몇몇 사례에 맞추어 조정해야 할 수 있다는 것을 인정합니다.

다음은 기본 프로세스입니다:

1. 기본 Tailwind 구성은 @gitlab/ui에서 정의되어 tailwind.defaults.js로 내보내진다. 이 구성은 모든 프로젝트에서 일관성 있는 것이어야 하는 브레이크포인트, 색상, 간격, 폰트 크기 및 기타 구성을 정의합니다.
2. gitlab-org/gitlab에는 @gitlab/ui/tailwind.defaults.js를 프리셋으로 사용하는 tailwind.config.js 파일이 있어야 합니다. content 속성은 gitlab-org/gitlab과 @gitlab/ui의 Vue, JS, HAML 및 Ruby 파일을 스캔하며, 모든 구성이 상속된다.
3. scripts/frontend/tailwind_all_the_way.mjs이 Tailwind 유틸리티를 @gitlab/ui 유틸리티와 비교합니다. 완벽하지 않은 유틸리티는 config/helpers/tailwind/css_in_js.js에 추가됩니다. 자동으로 일치하는 유틸리티는 Tailwind에 의해 생성됩니다.
4. config/helpers/tailwind/css_in_js.js가 tailwind.config.js에서 가져와서 addUtilities 함수를 사용하여 이러한 유틸리티를 등록합니다.
5. gitlab-org/gitlab에서 이전 유틸리티 사용은 그들의 Tailwind와 동일한 것으로 반복적으로 이관됩니다. 이것은 config/helpers/tailwind/css_in_js.js가 줄어들게 만듭니다.
6. @gitlab/ui에서 이전 유틸리티 사용은 그들의 Tailwind와 동일한 것으로 이관됩니다. @gitlab/ui에 이전 유틸리티 사용이 남아 있지 않을 때, config/helpers/tailwind/css_in_js.js가 비워지고 지원 도구와 함께 제거될 수 있습니다.
7. 모든 SCSS 유틸리티 믹스인은 @gitlab/ui에서 제거되고 주 버전이 릴리스됩니다.