skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-11 21:57:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #653 from pbakaus/fix/652-root-relative-stylesheets

Browse Source 
Fix: resolve root-relative linked stylesheets in static detect (#652)
This commit is contained in:
Abdul Wahab
2026-08-26 10:30:46 +05:00
committed by GitHub
parent fcd7622cd2 daae1d4117
commit 8f416aa760
2 changed files with 113 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cli/engine/engines/static-html/css-cascade.mjs
+38 -5
View File
@@ -964,8 +964,34 @@ function buildStaticWindow(staticDoc) {
};
}
function resolveLinkedCssPath(fileDir, href) {
const stripped = href.split(/[?#]/)[0];
const rootRelative = stripped.startsWith('/') && !stripped.startsWith('//');
if (!rootRelative) return path.resolve(fileDir, stripped);
// Drop "." and reject ".." so /../outside.css cannot walk out of dir.
const segments = stripped.replace(/^\/+/, '').split(/[/\\]/).filter(p => p && p !== '.');
if (segments.some(p => p === '..')) return path.join(fileDir, segments.filter(p => p !== '..').join(path.sep));
const rel = segments.join(path.sep);
let dir = fileDir;
for (;;) {
const parent = path.dirname(dir);
if (parent === dir) break; // never use the filesystem root as document root
try {
const candidate = path.join(dir, rel);
if (fs.statSync(candidate).isFile()) return candidate;
} catch { /* missing or unreadable candidate */ }
// Stop at the project root so a coincidental ~/static/app.css cannot win.
try {
if (fs.existsSync(path.join(dir, 'package.json')) || fs.existsSync(path.join(dir, '.git'))) break;
} catch { /* unreadable marker */ }
dir = parent;
}
return path.join(fileDir, rel);
}
function collectStaticCssText(root, fileDir, profile, filePath, modules) {
const styleTexts = [];
const warnedMissingStylesheets = new Set();
for (const styleEl of modules.selectAll('style', root.children || [])) {
styleTexts.push(modules.domutils.textContent(styleEl));
}
@@ -974,10 +1000,10 @@ function collectStaticCssText(root, fileDir, profile, filePath, modules) {
const rel = link.attribs?.rel || '';
const href = link.attribs?.href || '';
if (!/\bstylesheet\b/i.test(rel) || !href || /^(https?:)?\/\//i.test(href)) continue;
// Cache-busting hrefs (styles.css?v=3) resolve to the file, not to a
// literal path with the query in it; a versioned link otherwise made the
// whole stylesheet invisible to every element-level check.
const cssPath = path.resolve(fileDir, href.split(/[?#]/)[0]);
// Cache-busting (styles.css?v=3) and root-relative (/static/app.css) hrefs
// must not resolve as OS-absolute paths; otherwise the whole stylesheet is
// invisible to every element-level check.
const cssPath = resolveLinkedCssPath(fileDir, href);
try {
const css = profileStep(profile, {
engine: 'static-html',
@@ -987,7 +1013,14 @@ function collectStaticCssText(root, fileDir, profile, filePath, modules) {
detail: href,
}, () => fs.readFileSync(cssPath, 'utf-8'));
styleTexts.push(css);
} catch { /* skip unreadable */ }
} catch {
if (!warnedMissingStylesheets.has(cssPath)) {
warnedMissingStylesheets.add(cssPath);
process.stderr.write(
`impeccable detect: could not read linked stylesheet ${href} (resolved to ${cssPath}); color and custom-property rules will be incomplete\n`
);
}
}
}
return styleTexts.join('\n');
}
tests/detect-antipatterns.test.js
+75
View File
@@ -1321,6 +1321,81 @@ describe('detectHtml — static HTML/CSS engine', () => {
expect(findingIds(f)).toContain('side-tab');
});
test('resolves root-relative linked stylesheets with cache-busting query', async () => {
await withStaticFixture({
'index.html': `<!DOCTYPE html><html><head>
<link rel="stylesheet" href="/static/app.css?v=3">
</head><body><div class="card">Card</div></body></html>`,
'static/app.css': '.card { border-left: 5px solid #3b82f6; border-radius: 4px; }',
}, async ({ file }) => {
const f = await detectHtml(file);
expect(findingIds(f)).toContain('side-tab');
});
});
test('resolves root-relative linked stylesheets from nested pages via ancestor walk', async () => {
await withStaticFixture({
'pages/about.html': `<!DOCTYPE html><html><head>
<link rel="stylesheet" href="/static/app.css">
</head><body><div class="card">Card</div></body></html>`,
'static/app.css': '.card { border-left: 5px solid #3b82f6; border-radius: 4px; }',
}, async ({ dir }) => {
const f = await detectHtml(path.join(dir, 'pages', 'about.html'));
expect(findingIds(f)).toContain('side-tab');
});
});
test('does not resolve root-relative sheets above the project root', async () => {
await withStaticFixture({
'project/package.json': '{}',
'project/index.html': `<!DOCTYPE html><html><head>
<link rel="stylesheet" href="/static/app.css">
</head><body><div class="card">Card</div></body></html>`,
'static/app.css': '.card { border-left: 5px solid #3b82f6; border-radius: 4px; }',
}, async ({ dir }) => {
const f = await detectHtml(path.join(dir, 'project', 'index.html'));
expect(findingIds(f)).not.toContain('side-tab');
});
});
test('does not follow root-relative .. segments out of the page directory', async () => {
await withStaticFixture({
'project/package.json': '{}',
'project/index.html': `<!DOCTYPE html><html><head>
<link rel="stylesheet" href="/../outside.css">
</head><body><div class="card">Card</div></body></html>`,
'outside.css': '.card { border-left: 5px solid #3b82f6; border-radius: 4px; }',
}, async ({ dir }) => {
const f = await detectHtml(path.join(dir, 'project', 'index.html'));
expect(findingIds(f)).not.toContain('side-tab');
});
});
test('warns when a linked stylesheet cannot be read', async () => {
const writes = [];
const origWrite = process.stderr.write.bind(process.stderr);
process.stderr.write = (chunk, ...args) => {
writes.push(String(chunk));
return origWrite(chunk, ...args);
};
try {
await withStaticFixture({
'index.html': `<!DOCTYPE html><html><head>
<link rel="stylesheet" href="/missing/app.css">
</head><body><div>Page</div></body></html>`,
}, async ({ file, dir }) => {
await detectHtml(file);
await detectHtml(file);
const msg = writes.join('');
const hits = msg.split('could not read linked stylesheet /missing/app.css').length - 1;
expect(hits).toBe(2);
expect(msg).toContain(`resolved to ${path.join(dir, 'missing', 'app.css')}`);
});
} finally {
process.stderr.write = origWrite;
}
});
test('gradient-text: a style="" attribute alone carries the page-level flag', async () => {
await withStaticFixture({
'index.html': `<!DOCTYPE html><html><head><title>t</title></head><body>