[patternflow-bot]

ops / https://claude.ai/code/session_01NxHZJYQmJBPASBcBvdaLbJ

Pattern Lab 의 CSS 파일 셋에서 어느 컴포넌트도 쓰지 않던 클래스 13개와 그 규칙 220줄을 걷었어요. 화면은 한 픽셀도 바뀌지 않고, 앞으로 Lab 에 같은 클래스가 생기면 Lab CSS 시험이 빨개져요.

좋아지는 것: 없음

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR 댓글(세 직함만) 읽기 — 일을 시키는 글 없음(저장소 전체 대화 댓글 2개 가운데 세 직함 글은 [DONE] hardware: Besoiobiy's printed case as a remix folder #1 의 engmung 한 줄로 일을 시키지 않음 · 리뷰 0 · 줄 댓글 0)
• 고를 일 정하기 — 후보 123 은 바퀴 6688 이 맡았고, 남은 줄 가운데 맨 위가 24
• 죽은 클래스 다시 세기 — dev 985b49d 에서 13개, 표와 같음
• 걷기 — 13개 → 0개
• 화면이 그대로인지 — 계산된 스타일 5,775 요소 0 차이 · 사진 22장 픽셀까지 같음
• 다시 생기지 않게 시험 하나
• 다섯 검사 · check:voice
• dev merge 뒤 [DONE] — dev f35b2be([DONE] 연구 페이지에 화장품 팝업과 위상·매듭 갈래가 열리고, 수학 여섯과 화장품 질감 넷이 패턴으로 선다 #219, incoming/ 만) merge · c76caeb 에서 Drift checks · Web CI 초록

한 일

• web/src/app/pattern-lab/PatternLab.module.css 에서 9개(header, headerMeta, actionRow, previewHeader, editorHeader, guideButton, pasteButton, clearButton, viewToggle)를 걷었어요. 죽은 이름만 든 규칙은 통째로 빠졌고, 산 클래스와 묶인 셀렉터에선 죽은 이름만 뺐어요(.darkButton, .editorHeader button → .darkButton). 그러고 나니 .stats 규칙 셋이 나란히 남아서 지금 이기는 값으로 하나로 합쳤어요(gap: 8px, text-transform: none, flex-wrap: wrap, line-height: 1.45). 980px 아래 블록엔 .stats 하나만 남아요.
• panels/CapturePanel.module.css 에서 stageBox, stageCanvas, stageCanvasTransparent 를, panels/DirectorPanel.module.css 에서 hint 를 걷었어요.
• labCss.test.ts 에 「Lab CSS modules › define no class that no component uses」를 더했어요. app/pattern-lab/ 아래 *.module.css 마다, 그 파일을 불러오는 src/ 의 .ts·.tsx 가 styles.x 나 styles["x"] 로 읽는 이름과 같은 파일 안의 composes 를 모아, 어디서도 안 읽는 클래스가 있으면 파일별 이름 목록으로 빨개져요. 계산된 이름(styles[name])으로 읽는 모듈은 통째로 쓰인 것으로 쳐요.

CSS 는 226줄 빠지고 6줄 들어와 220줄이 줄었어요. 표가 센 169줄은 셀렉터가 다 죽은 규칙만이고, 220줄은 빈 줄 32줄과 주석, 묶인 셀렉터에서 뺀 이름, 합친 .stats 까지 든 diff 그대로예요.

증거

다시 센 것(dev 와 이 브랜치, 같은 스크립트 — import x from "….module.css" 를 찾아 x.name, x["name"], composes 를 모아요. 동적 접근은 0곳이었어요):

dev 985b49d
src/app/pattern-lab/PatternLab.module.css defined 31 importers 8 dead 9 ['actionRow', 'clearButton', 'editorHeader', 'guideButton', 'header', 'headerMeta', 'pasteButton', 'previewHeader', 'viewToggle']
src/app/pattern-lab/panels/CapturePanel.module.css defined 23 importers 1 dead 3 ['stageBox', 'stageCanvas', 'stageCanvasTransparent']
src/app/pattern-lab/panels/DirectorPanel.module.css defined 32 importers 3 dead 1 ['hint']
total dead 13

이 브랜치
src/app/pattern-lab/PatternLab.module.css defined 22 importers 8 dead 0 []
src/app/pattern-lab/panels/CapturePanel.module.css defined 20 importers 1 dead 0 []
src/app/pattern-lab/panels/DirectorPanel.module.css defined 31 importers 3 dead 0 []
total dead 0

화면이 그대로인지: NEXT_PUBLIC_BUILD_ENABLED=1 로 빌드해 To hardware 가 보이게 하고, Chromium 으로 /pattern-lab 을 390×844(터치)와 1440×900 에서 열어 패널 탭 아홉(Preview, Layers, Code, Pixel, Text, Knobs, Color Ramp, Graphic Export, Director)을 하나씩 앞으로 꺼내고 Code guide 창과 To hardware 창까지 22가지 상태에서 요소마다 getComputedStyle 의 모든 속성과 ::before·::after 를 모았어요. 같은 dev 빌드를 두 번 찍으면 0 차이인 것을 먼저 봤어요(사용자 지정 속성 순서가 실행마다 달라서 속성을 정렬해 비교해요).

dev 1회 vs dev 2회      22 states, 5775 elements, 0 differ
dev vs 이 브랜치        22 states, 5775 elements, 0 differ
사진 22장(before-*/after-*)  22 identical of 22

.stats 를 합친 규칙도 빌드된 CSS 에서 같은 값으로 나와요:

._hmesG_stats{color:#1715129e;font-family:var(--font-jetbrains), monospace;text-transform:none;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;line-height:1.45;display:flex}

CSS 크기(.next/static/chunks/*.css):

	dev	이 브랜치
사이트 CSS 전체	469,984 B	466,493 B (−3,491)
/pattern-lab 첫 로드 CSS	292,454 B · gzip 41,526	291,697 B · gzip 41,665
/community 첫 로드 CSS	184,981 B · gzip 32,254	184,224 B · gzip 32,393
Graphic Export 를 열 때 더 받는 CSS	2,734 B 파일 하나	없음

Graphic Export 의 CSS 가 27줄 줄어 2 KB 남짓이 되자 Turbopack 이 그것을 따로 늦게 받는 파일 대신 Lab·커뮤니티가 같이 받는 묶음에 합쳤어요. 그래서 첫 로드 gzip 은 139 B 늘었고, Graphic Export 를 열 때 받던 요청 하나가 없어졌어요.

시험이 정말 잡는지: PatternLab.module.css 를 dev 판으로 되돌리고 CodePanel.module.css 끝에 .zzDead {} 를 넣어 돌리면 빨개져요.

AssertionError: expected { …(2) } to deeply equal {}
+   "PatternLab.module.css": [ "actionRow", "clearButton", "editorHeader", "guideButton", "header", "headerMeta", "pasteButton", "previewHeader", "viewToggle" ],
+   "panels/CodePanel.module.css": [ "zzDead" ],
 Test Files  1 failed (1)
      Tests  1 failed | 13 passed (14)

다섯 검사(web/, 끝줄):

npm ci                              added 762 packages, and audited 763 packages in 55s
npm run lint -- --max-warnings=0    (출력 없음, exit 0)
npm run typecheck                   (출력 없음, exit 0)
npm run build                       ƒ  (Dynamic)  server-rendered on demand (exit 0)
npm run check:ci                    passed virtual-panel (Test Files 99 passed · Tests 1251 passed · drift 14 passed, links-absolute · roadmap skipped)
npm run check:voice                 check:voice: nothing found (브랜치 38줄 · PR 본문 122줄)

dev 를 merge 한 c76caeb 의 GitHub 검사:

Drift checks | completed | success
Web CI | completed | success

화면을 바꾸지 않아서 PR 에 사진은 싣지 않았어요. 위 22장은 스크래치 폴더에서 픽셀 비교에만 썼어요.

실행법

cd web
npx vitest run src/app/pattern-lab/labCss.test.ts

가정

• 표는 산 클래스와 묶인 셀렉터에서 「죽은 이름만 빼요」라고 했어요. 그대로 뺀 뒤 나란히 남은 .stats 규칙 셋은 하나로 합쳤어요. 같은 셀렉터가 연달아 셋이면 뒤가 앞을 덮는 값(gap 10px → 8px, text-transform uppercase → none)을 읽는 사람이 따져야 해서예요. 계산된 스타일 비교가 0 차이라 값은 그대로예요.
• 표는 걷기만 말했지만 시험 하나를 더했어요. 이 13개는 아무것도 알려 주지 않아서 쌓였고, 시험이 없으면 다음 정리 때 또 손으로 세야 해요. 시험은 Lab 의 CSS 모듈 열 개만 봐요.
• 첫 로드 gzip 이 139 B 느는 것은 Turbopack 이 묶음을 나누는 방식 탓이고, 설정(next.config)은 고치지 않았어요.
• 표 밖: 같은 셈으로 다른 CSS 모듈에도 쓰이지 않는 클래스가 보여요. app/roadmap/Roadmap.module.css 11개(legend, zoomBtn 들), components/community/Community.module.css 9개(gatePanel 들)예요. 이 셈엔 거짓 양성(org, w3 은 SVG data URL 안의 글자)도 섞여 있어 다시 재야 해요.

Changelog

Web

• Pattern Lab's stylesheets drop 13 classes no component used. The 220 lines of rules that styled them are gone, and the Lab CSS test now fails when a Lab module defines a class nothing reads.

경험

언제: 바퀴에서 CSS 만 걷고 화면이 그대로인 것을 보여야 할 때
교훈: 요소마다 getComputedStyle 의 모든 속성을 정렬해 모으고 dev 를 두 번 찍어 0 차이부터 확인하면, 사진 대신 「요소 몇 개 가운데 0 차이」로 보일 수 있고 정렬하지 않으면 사용자 지정 속성 순서 탓에 거의 다 다르게 나와요
근거: #223 에서 정렬 없이 dev 두 번을 비교하니 5,775 요소 가운데 5,518개가 달랐고, 정렬하니 0 이 됐어요

바퀴

바퀴 89 · 후보 24 「Pattern Lab CSS 에서 아무 컴포넌트도 쓰지 않는 클래스 13개와 그 규칙 169줄이 빠진다」

다음 바퀴

• 25 UI 「Pattern 탭의 고급 안내와 To hardware 칸의 두 문단, Build 탭의 다른 길 안내가 제 글자 크기로 보인다」 — globals.css 의 .panel-body p 가 모듈 클래스를 이겨 14~15px 글이 20px 로 나와요.
• 26 UI 「Make 가이드의 덱 순서 경고가 지금 펌웨어 판을 말한다」 — 「Up to firmware v3.10.4」 경고가 3.10.5 에서 고쳐진 뒤로도 그대로예요.
• 27 UI 「가로로 든 폰에서 Build, Pattern, Inside 탭의 글이 화면의 절반 넘게 보인다」 — 844×390 에서 3D 보기와 탭 막대가 224px 를 쥐어 글은 166px 만 보여요.

🤖 Generated with Claude Code

https://claude.ai/code/session_01NxHZJYQmJBPASBcBvdaLbJ