fix(eslint-plugin): check only the values the build reads as styles

[owjs3901]

전수조사 #682의 작업 묶음 J(#684) 중 필수 항목 TOOL-01, TOOL-02, KNOWN-14를 해결합니다.

문제

• TOOL-01, TOOL-02: 배열 규칙 3개(no-duplicate-value, no-useless-responsive, no-useless-tailing-nulls)와 typography·media 규칙 2개가 문제였습니다. devup 컴포넌트나 호출 아래에 있는 값이면 무엇이든 보고하고 autofix로 고쳤습니다.
  • 빌드가 스타일로 읽지 않는 데이터도 대상이 됐습니다. 예: <Box data-values={[5, 5]} />가 [5, null]로 바뀜, data-config={{ typography: '$x' }}의 $가 지워짐.
  • 규칙들은 "마지막으로 들어간 devup 문맥"을 변수 하나로 기억했습니다. 그래서 prop 안에 중첩된 컴포넌트를 벗어난 뒤에는 바깥 컴포넌트의 나머지 스타일을 놓쳤습니다.
  • ThemeScript, getTheme 같은 스타일과 무관한 export도 문맥으로 취급했습니다.
• KNOWN-14: 함수 안에서 선언한 const fade = keyframes(...)를 css-utils-literal-only가 보고했습니다. 빌드는 이 값을 정적으로 컴파일하므로 오탐입니다.

변경

• utils/style-position.ts: 다섯 규칙이 같이 쓰는 판별기를 추가했습니다.
  • 스타일 문맥은 Box, Flex 등 스타일 컴포넌트와 css/globalCss/keyframes입니다. namespace import(Devup.Box, Devup.css)도 포함합니다.
  • 값이 그 문맥에서 스타일 prop → 스타일 객체 값 → 반응형 배열 → 조건 분기 → spread 경로로만 이어질 때 스타일로 봅니다.
  • 빌드와 같은 기준을 씁니다. 통과 속성(on*, data-*, aria-*, HTML·React 속성)은 Rust is_special_property 목록과 같고, 둘이 어긋나면 테스트가 실패합니다. props/styleVars/styleOrder/as와 imports/fontFaces/params 아래도 제외합니다.
• 다섯 규칙이 이 판별기를 씁니다. 가장 가까운 문맥을 조상에서 찾으므로 중첩 컴포넌트 뒤의 스타일도 검사합니다. 인자가 여러 개인 css(base, { ... })도 검사합니다.
• css-utils-literal-only: css()/keyframes() 결과를 담은 const는 scope와 무관하게 정적 값으로 봅니다.
• 규칙 README 6개를 갱신하고 Patch changepack을 추가했습니다.

검증

• bun test packages/eslint-plugin: 390개 통과, 모든 파일 커버리지 100%
• 조사 재현 파일: <Box p={[1, 1]} data-values={[5, 5]} items={[1, null, null]} />에서 p와 items만 보고됩니다. items는 빌드도 스타일로 읽기 때문입니다.
• pre-commit(lint + tarpaulin + bun test) 통과

[github-actions]

Changepacks

@devup-ui/eslint-plugin@1.0.21 → 1.0.22 - packages/eslint-plugin/package.json

Patch

• no-duplicate-value, no-useless-responsive, no-useless-tailing-nulls, no-typography-token-prefix and prefer-media-shorthand only report and fix values the build reads as styles: style props of Box, Flex and the other style components and the arguments of css, globalCss and keyframes, through style objects, responsive arrays, conditions and spreads. Arrays and keys in props the component passes through (data-, aria-, event handlers, HTML attributes, props, styleVars), in arguments of other functions and under imports/fontFaces/params are left alone, where autofix used to rewrite them; styles of a component nested in another's prop are checked too. css-utils-literal-only reads a css() or keyframes() result held in a const of any scope as static, as the build does

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
...t-plugin/src/rules/css-utils-literal-only/index.ts	100.00% <100.00%> (ø)
...slint-plugin/src/rules/no-duplicate-value/index.ts	100.00% <100.00%> (ø)
...ugin/src/rules/no-typography-token-prefix/index.ts	100.00% <100.00%> (ø)
...nt-plugin/src/rules/no-useless-responsive/index.ts	100.00% <100.00%> (ø)
...plugin/src/rules/no-useless-tailing-nulls/index.ts	100.00% <100.00%> (ø)
...t-plugin/src/rules/prefer-media-shorthand/index.ts	100.00% <100.00%> (ø)
packages/eslint-plugin/src/utils/style-position.ts	100.00% <100.00%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.