skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-19 17:46:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #554 from pbakaus/fix/548-layout-transition-quoted-values

Browse Source 
Fix: layout-transition false positives on JSX quoted transition values (#548)
This commit is contained in:
Paul Bakaus
2026-08-13 17:01:23 -04:00
committed by GitHub
parent 7d907bbb14 d23fa1c882
commit fde4a3ee71
2 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cli/engine/engines/regex/detect-text.mjs
+11 -8
View File
@@ -425,25 +425,28 @@ const REGEX_MATCHERS = [
},
fmt: (m) => `cubic-bezier(${m[1]}, ${m[2]}, ${m[3]}, ${m[4]})` },
// --- Layout property transition ---
{ id: 'layout-transition', regex: /transition\s*:\s*([^;{}]+)/gi,
// JSX inline style objects use comma-delimited quoted values, not semicolons (issue #548).
{ id: 'layout-transition', regex: /transition\s*:\s*(?:(['"])((?:(?!\1)[^\\]|\\.)*)\1|([^;{}]+))/gi,
test: (m) => {
const val = m[1].toLowerCase();
const val = (m[2] ?? m[3] ?? '').toLowerCase();
if (/\ball\b/.test(val)) return false;
return /\b(?:(?:max|min)-)?(?:width|height)\b|\bpadding\b|\bmargin\b/.test(val);
},
fmt: (m) => {
const found = m[1].match(/\b(?:(?:max|min)-)?(?:width|height)\b|\bpadding(?:-(?:top|right|bottom|left))?\b|\bmargin(?:-(?:top|right|bottom|left))?\b/gi);
return `transition: ${found ? found.join(', ') : m[1].trim()}`;
const raw = m[2] ?? m[3] ?? '';
const found = raw.match(/\b(?:(?:max|min)-)?(?:width|height)\b|\bpadding(?:-(?:top|right|bottom|left))?\b|\bmargin(?:-(?:top|right|bottom|left))?\b/gi);
return `transition: ${found ? found.join(', ') : raw.trim()}`;
} },
{ id: 'layout-transition', regex: /transition-property\s*:\s*([^;{}]+)/gi,
{ id: 'layout-transition', regex: /transition-property\s*:\s*(?:(['"])((?:(?!\1)[^\\]|\\.)*)\1|([^;{}]+))/gi,
test: (m) => {
const val = m[1].toLowerCase();
const val = (m[2] ?? m[3] ?? '').toLowerCase();
if (/\ball\b/.test(val)) return false;
return /\b(?:(?:max|min)-)?(?:width|height)\b|\bpadding\b|\bmargin\b/.test(val);
},
fmt: (m) => {
const found = m[1].match(/\b(?:(?:max|min)-)?(?:width|height)\b|\bpadding(?:-(?:top|right|bottom|left))?\b|\bmargin(?:-(?:top|right|bottom|left))?\b/gi);
return `transition-property: ${found ? found.join(', ') : m[1].trim()}`;
const raw = m[2] ?? m[3] ?? '';
const found = raw.match(/\b(?:(?:max|min)-)?(?:width|height)\b|\bpadding(?:-(?:top|right|bottom|left))?\b|\bmargin(?:-(?:top|right|bottom|left))?\b/gi);
return `transition-property: ${found ? found.join(', ') : raw.trim()}`;
} },
// --- Broken image: src="" or src="#" or src=" " ---
{ id: 'broken-image', regex: /<img\b[^>]*?\bsrc\s*=\s*(?:""|''|"\s+"|'\s+'|"#"|'#')/gi,
tests/detect-antipatterns.test.js
+20
View File
@@ -854,6 +854,26 @@ describe('detectText — motion', () => {
const f = detectText('.btn { transition: opacity 0.2s ease; }', 'test.css');
expect(f.filter(r => r.antipattern === 'layout-transition')).toHaveLength(0);
});
test('passes JSX quoted paint-only transition with later layout prop', () => {
const f = detectText("<div style={{ transition: 'border-color 200ms ease', height: '100%' }} />", 'test.jsx');
expect(f.filter(r => r.antipattern === 'layout-transition')).toHaveLength(0);
});
test('passes JSX grid-template-rows transition with later padding and width', () => {
const f = detectText("<div style={{ transition: 'grid-template-rows 0.32s ease', paddingLeft: '23px', width: '100%' }} />", 'test.jsx');
expect(f.filter(r => r.antipattern === 'layout-transition')).toHaveLength(0);
});
test('detects JSX quoted width transition', () => {
const f = detectText("<div style={{ transition: 'width 0.3s ease' }} />", 'test.jsx');
expect(f.some(r => r.antipattern === 'layout-transition')).toBe(true);
});
test('skips JSX quoted transition: all', () => {
const f = detectText("<div style={{ transition: 'all 0.3s ease' }} />", 'test.jsx');
expect(f.filter(r => r.antipattern === 'layout-transition')).toHaveLength(0);
});
});
// ---------------------------------------------------------------------------