Skip to content

fix: 디자인 토큰 미해결 참조 필터링 및 js 플랫폼 제거 #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wlrnjs merged 1 commit into from
May 11, 2026
+124 −15
Merged

fix: 디자인 토큰 미해결 참조 필터링 및 js 플랫폼 제거 #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 112 additions & 0 deletions packages/design-tokens/dist/css/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,116 @@
--line-height-tight: 1.25;
--line-height-normal: 1.6;
--line-height-relaxed: 1.75;
--primitive-mode-1-color-gray-0: #ffffff;
--primitive-mode-1-color-gray-25: #f9f9f9;
--primitive-mode-1-color-gray-50: #d8d8d8;
--primitive-mode-1-color-gray-75: #b6b6b6;
--primitive-mode-1-color-gray-100: #c0c0c0;
--primitive-mode-1-color-gray-200: #acacac;
--primitive-mode-1-color-gray-300: #858585;
--primitive-mode-1-color-gray-400: #757575;
--primitive-mode-1-color-gray-500: #5c5c5c;
--primitive-mode-1-color-gray-600: #484848;
--primitive-mode-1-color-gray-700: #393939;
--primitive-mode-1-color-gray-800: #292929;
--primitive-mode-1-color-gray-900: #1d1d1d;
--primitive-mode-1-color-gray-1000: #000000;
--primitive-mode-1-color-blue-0: #ffffff;
--primitive-mode-1-color-blue-12: #f7fbff;
--primitive-mode-1-color-blue-25: #eaf2fe;
--primitive-mode-1-color-blue-50: #cde1fe;
--primitive-mode-1-color-blue-75: #b8d4ff;
--primitive-mode-1-color-blue-100: #69a5ff;
--primitive-mode-1-color-blue-200: #4f95ff;
--primitive-mode-1-color-blue-300: #3385ff;
--primitive-mode-1-color-blue-400: #1a75ff;
--primitive-mode-1-color-blue-500: #0066ff;
--primitive-mode-1-color-blue-600: #005eeb;
--primitive-mode-1-color-blue-700: #0054d1;
--primitive-mode-1-color-blue-800: #003e9c;
--primitive-mode-1-color-blue-900: #002966;
--primitive-mode-1-color-blue-950: #001536;
--primitive-mode-1-color-blue-1000: #000000;
--primitive-mode-1-color-red-0: #ffffff;
--primitive-mode-1-color-red-50: #fffafa;
--primitive-mode-1-color-red-75: #fff4f4;
--primitive-mode-1-color-red-100: #feecec;
--primitive-mode-1-color-red-200: #fed5d5;
--primitive-mode-1-color-red-300: #ffb5b5;
--primitive-mode-1-color-red-400: #ff8c8c;
--primitive-mode-1-color-red-500: #ff6363;
--primitive-mode-1-color-red-600: #ff3030;
--primitive-mode-1-color-red-700: #e52222;
--primitive-mode-1-color-red-800: #b00c0c;
--primitive-mode-1-color-red-900: #730303;
--primitive-mode-1-color-red-950: #3b0101;
--primitive-mode-1-color-red-1000: #000000;
--primitive-mode-1-color-orange-0: #ffffff;
--primitive-mode-1-color-orange-50: #fffcf7;
--primitive-mode-1-color-orange-100: #fef4e6;
--primitive-mode-1-color-orange-200: #fee6c6;
--primitive-mode-1-color-orange-300: #ffd49c;
--primitive-mode-1-color-orange-400: #ffc642;
--primitive-mode-1-color-orange-500: #ff8a05;
--primitive-mode-1-color-orange-600: #d47800;
--primitive-mode-1-color-orange-700: #d17600;
--primitive-mode-1-color-orange-800: #9c5800;
--primitive-mode-1-color-orange-900: #663a00;
--primitive-mode-1-color-orange-950: #361e00;
--primitive-mode-1-color-orange-1000: #000000;
--primitive-mode-1-color-green-0: #ffffff;
--primitive-mode-1-color-green-25: #e6fff6;
--primitive-mode-1-color-green-50: #d0ffee;
--primitive-mode-1-color-green-100: #b1ffe3;
--primitive-mode-1-color-green-200: #8cfad2;
--primitive-mode-1-color-green-300: #70eec0;
--primitive-mode-1-color-green-400: #48dda7;
--primitive-mode-1-color-green-500: #1bc587;
--primitive-mode-1-color-green-600: #10b981;
--primitive-mode-1-color-green-700: #008f5f;
--primitive-mode-1-color-green-800: #006c48;
--primitive-mode-1-color-green-900: #003a27;
--primitive-mode-1-color-green-1000: #000000;
--primitive-mode-1-color-navy-0: #ffffff;
--primitive-mode-1-color-navy-100: #e7f4ff;
--primitive-mode-1-color-navy-200: #d6ecff;
--primitive-mode-1-color-navy-300: #a9d1f5;
--primitive-mode-1-color-navy-400: #87b9e6;
--primitive-mode-1-color-navy-500: #659ed2;
--primitive-mode-1-color-navy-600: #438fd4;
--primitive-mode-1-color-navy-700: #2977bf;
--primitive-mode-1-color-navy-800: #125b9e;
--primitive-mode-1-color-navy-900: #054076;
--primitive-mode-1-color-navy-950: #012444;
--primitive-mode-1-color-navy-1000: #000000;
--primitive-mode-1-value-50: 0.125rem;
--primitive-mode-1-value-100: 0.25rem;
--primitive-mode-1-value-150: 0.375rem;
--primitive-mode-1-value-200: 0.5rem;
--primitive-mode-1-value-250: 0.625rem;
--primitive-mode-1-value-300: 0.75rem;
--primitive-mode-1-value-350: 0.875rem;
--primitive-mode-1-value-400: 1rem;
--primitive-mode-1-value-450: 1.125rem;
--primitive-mode-1-value-500: 1.25rem;
--primitive-mode-1-value-550: 1.375rem;
--primitive-mode-1-value-600: 1.5rem;
--primitive-mode-1-value-650: 1.625rem;
--primitive-mode-1-value-700: 1.75rem;
--primitive-mode-1-value-750: 1.875rem;
--primitive-mode-1-value-800: 2rem;
--primitive-mode-1-value-900: 2.25rem;
--primitive-mode-1-value-1000: 2.5rem;
--primitive-mode-1-value-1200: 3rem;
--primitive-mode-1-value-1400: 3.5rem;
--primitive-mode-1-value-1600: 4rem;
--primitive-mode-1-value-1800: 4.5rem;
--primitive-mode-1-value-2000: 5rem;
--primitive-mode-1-value-2400: 6rem;
--primitive-mode-1-value-2500: 6.25rem;
--primitive-mode-1-value-3000: 7.5rem;
--primitive-mode-1-value-4000: 10rem;
--primitive-mode-1-value-6000: 15rem;
--primitive-mode-1-value-8000: 20rem;
--semantic-color-mode-1-bg-dim-transparent: #00000080;
}
1 change: 0 additions & 1 deletion packages/design-tokens/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"version": "1.0.0",
"type": "module",
"exports": {
".": "./dist/js/tokens.js",
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

js 플랫폼 제거와 함께 패키지의 메인 엔트리포인트인 . export가 삭제되었습니다. 이는 이 패키지를 직접 임포트하여 사용하던 기존 프로젝트들에 영향을 주는 Breaking Change입니다. 의도된 변경인지 확인이 필요하며, 필요한 경우 소비자들에게 /css 또는 /tailwind 경로를 명시적으로 사용하도록 안내가 필요합니다.

"./tailwind": "./dist/tailwind/preset.cjs",
"./css": "./dist/css/variables.css"
},
Expand Down
26 changes: 12 additions & 14 deletions packages/design-tokens/sd.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ StyleDictionary.registerTransformGroup({
],
});

// 미해결 참조({...}) 토큰 제외
const isResolved = (token) => {
const val = String(token.value ?? '');
return !val.includes('{') && !val.includes('}');
};
Comment on lines +24 to +27
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

isResolved 함수에서 token.value가 객체인 경우(예: typography, shadow 등 복합 토큰) String() 변환 시 "[object Object]"가 되어 내부의 미해결 참조를 감지하지 못합니다. JSON.stringify()를 사용하여 값의 전체 구조를 문자열로 확인하는 것이 더 안전합니다.

const isResolved = (token) => {
  const val = JSON.stringify(token.value);
  return !!val && !val.includes('{') && !val.includes('}');
};


function setDeep(obj, path, value) {
let cur = obj;
for (let i = 0; i < path.length - 1; i++) {
Expand Down Expand Up @@ -65,6 +71,10 @@ StyleDictionary.registerFormat({
const sd = new StyleDictionary({
source: ['tokens/tokens.json'],
preprocessors: ['tokens-studio'],
log: {
verbosity: 'verbose',
errors: { brokenReferences: 'warn' },
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

brokenReferences: 'warn' 설정은 빌드 시 참조 오류가 발생해도 프로세스를 중단하지 않습니다. 이는 의도치 않게 잘못된 스타일 값이 결과물에 포함될 위험이 있으므로, 가급적 'error'로 설정하여 소스 단계에서 문제를 해결하도록 강제하는 것이 권장됩니다. 현재 filter를 통해 결과물에서 제외하고는 있으나, 근본적인 데이터 무결성 확인을 위해 검토가 필요합니다.

    errors: { brokenReferences: 'error' },

},
platforms: {
css: {
transformGroup: 'tokens-studio/css',
Expand All @@ -73,6 +83,7 @@ const sd = new StyleDictionary({
{
destination: 'variables.css',
format: 'css/variables',
filter: isResolved,
options: { selector: ':root', outputReferences: false },
},
],
Expand All @@ -84,20 +95,7 @@ const sd = new StyleDictionary({
{
destination: 'preset.cjs',
format: 'javascript/tailwind-preset',
},
],
},
js: {
transformGroup: 'tokens-studio',
buildPath: 'dist/js/',
files: [
{
destination: 'tokens.js',
format: 'javascript/es6',
},
{
destination: 'tokens.d.ts',
format: 'typescript/es6-declarations',
filter: isResolved,
},
],
},
Expand Down
Loading