Extract external CSS stylesheets from HAR for Baseline feature detection by smsnedden · Pull Request #317 · cloudflare/telescope

smsnedden · 2026-07-21T16:42:02Z

First slice of the --baseline CSS analysis feature. This PR adds extraction of external stylesheets from a HAR; inline <style> extraction, feature detection (css-tree), and Baseline lookup (web-features) follow in later PRs.

The extractor is intentionally not wired into the CLI or launchTest yet — it has no production caller until the detection PR consumes it, so it's exercised entirely by its unit tests. Keeping the slices separate keeps each PR small and isolates new dependencies to the PR that introduces them.

Changes

`extractCSSFromHar(harData): CSSSource[]` (`src/baselineCssExtract.ts`)

Collects external CSS a page shipped, from a parsed HAR:

Selects responses whose mimeType starts with text/css (case-insensitive, so Text/CSS; charset=utf-8 matches), using the response body as the CSS source.
Decodes base64 response bodies to UTF-8 (when HAR content.encoding === 'base64').
Returns sources in HAR order; entries with no response body are skipped.

Inline <style> blocks are out of scope here — they require parsing the HTML document, added in a follow-up PR with a dedicated parser.

Types (`src/types.ts`)

Add CSSSource ({ css, file }).
Extend HarEntry.response.content with optional text? and encoding? fields (response bodies weren't previously modeled).

Tests

Adds packages/telescope/__tests__/baselineCssExtract.test.ts — 7 pure unit tests (no browser) built from in-memory HAR fixtures:

External text/css extracted with the URL as file
text/css; charset=utf-8 still matches
base64-encoded CSS bodies are decoded
Multiple stylesheets preserve HAR order
Edge cases: empty HAR, entries with no body, and non-CSS resources (including HTML) ignored

Add extractCSSFromHar() which collects external text/css stylesheets shipped by a page from a HAR, decoding base64 response bodies and recording each source's origin file. This is the first slice of the Baseline (--baseline) CSS analysis feature. Inline <style> extraction (via a dedicated HTML parser) and CSS feature detection over these sources follow in later changes. - Add CSSSource type and extend HarEntry response content with optional text/encoding fields in types.ts - Add 7 unit tests covering external extraction, base64 decoding, charset handling, ordering, and ignored resources

sergeychernyshev · 2026-07-21T17:33:01Z

Looks good. Just minor changes in typing, also need to understand in general if HAR will always contain bodies or not and what controls it.

sergeychernyshev

Looks good - up to you if you want to do a bit more strict type checks here.

smsnedden · 2026-07-22T16:31:31Z

Looks good - up to you if you want to do a bit more strict type checks here.

Sounds good, made a small change to line 39 for a bit more strict of a type check.

sergeychernyshev

Let's use a constant and type instead of repeating the string itself.

The reason for such abstraction is to easily add other options through types, for example, without rewriting everything in the future.

It is a minor optimization, but helpful.

sergeychernyshev · 2026-07-22T21:49:41Z

+ * @param encoding - The `content.encoding` value, if present.
+ * @returns The decoded body as UTF-8 text.
+ */
+function decodeContent(text: string, encoding?: 'base64'): string {


Let's move this as a constant to types.ts and create a type and constant, something like

export const BASE64 = 'base64'; export type HARContentEncoding = typeof BASE64 | undefined;

Suggested change

function decodeContent(text: string, encoding?: 'base64'): string {

function decodeContent(text: string, encoding: HARContentEncoding): string {

sergeychernyshev · 2026-07-22T21:50:16Z

+ */
+function decodeContent(text: string, encoding?: 'base64'): string {
+  if (encoding === 'base64') {
+    return Buffer.from(text, 'base64').toString('utf8');


Suggested change

return Buffer.from(text, 'base64').toString('utf8');

return Buffer.from(text, BASE64).toString('utf8');

sergeychernyshev · 2026-07-22T21:50:28Z

+ * @returns The decoded body as UTF-8 text.
+ */
+function decodeContent(text: string, encoding?: 'base64'): string {
+  if (encoding === 'base64') {


Suggested change

if (encoding === 'base64') {

if (encoding === BASE64) {

sergeychernyshev · 2026-07-22T21:51:00Z

      size: number;
      mimeType: string;
+      text?: string;
+      encoding?: 'base64';


Suggested change

encoding?: 'base64';

encoding: HARContentEncoding;

sergeychernyshev · 2026-07-22T21:51:46Z

+}
+
+const toBase64 = (value: string) =>
+  Buffer.from(value, 'utf8').toString('base64');


Suggested change

Buffer.from(value, 'utf8').toString('base64');

Buffer.from(value, 'utf8').toString(BASE64);

sergeychernyshev · 2026-07-22T21:52:03Z

+  it('decodes base64-encoded CSS bodies', () => {
+    const css = '.a { color: blue; }';
+    const har = makeHar([
+      makeEntry('https://x.test/a.css', 'text/css', toBase64(css), 'base64'),


Suggested change

makeEntry('https://x.test/a.css', 'text/css', toBase64(css), 'base64'),

makeEntry('https://x.test/a.css', 'text/css', toBase64(css), BASE64),

smsnedden added 2 commits July 20, 2026 16:33

fixup: use case-insensitive startsWith for CSS MIME type matching

935972f

sergeychernyshev requested changes Jul 21, 2026

View reviewed changes

Comment thread packages/telescope/src/types.ts

Comment thread packages/telescope/src/types.ts Outdated

Comment thread packages/telescope/src/baselineCssExtract.ts

fixup: restrict encoding type to 'base64' literal

2fd8e4d

sergeychernyshev previously approved these changes Jul 21, 2026

View reviewed changes

fixup: narrow decodeContent encoding param to 'base64' literal

feb03eb

smsnedden dismissed sergeychernyshev’s stale review via feb03eb July 22, 2026 16:29

sergeychernyshev reviewed Jul 22, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Extract external CSS stylesheets from HAR for Baseline feature detection#317

Extract external CSS stylesheets from HAR for Baseline feature detection#317
smsnedden wants to merge 4 commits into
cloudflare:mainfrom
smsnedden:baseline-css-extract

smsnedden commented Jul 21, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sergeychernyshev commented Jul 21, 2026

Uh oh!

sergeychernyshev left a comment

Uh oh!

smsnedden commented Jul 22, 2026

Uh oh!

sergeychernyshev left a comment •

edited

Loading

Uh oh!

sergeychernyshev Jul 22, 2026

Uh oh!

sergeychernyshev Jul 22, 2026

Uh oh!

sergeychernyshev Jul 22, 2026

Uh oh!

sergeychernyshev Jul 22, 2026

Uh oh!

sergeychernyshev Jul 22, 2026

Uh oh!

sergeychernyshev Jul 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	function decodeContent(text: string, encoding?: 'base64'): string {
	function decodeContent(text: string, encoding: HARContentEncoding): string {

	return Buffer.from(text, 'base64').toString('utf8');
	return Buffer.from(text, BASE64).toString('utf8');

	Buffer.from(value, 'utf8').toString('base64');
	Buffer.from(value, 'utf8').toString(BASE64);

	makeEntry('https://x.test/a.css', 'text/css', toBase64(css), 'base64'),
	makeEntry('https://x.test/a.css', 'text/css', toBase64(css), BASE64),

Uh oh!

Conversation

smsnedden commented Jul 21, 2026

Changes

extractCSSFromHar(harData): CSSSource[] (src/baselineCssExtract.ts)

Types (src/types.ts)

Tests

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sergeychernyshev commented Jul 21, 2026

Uh oh!

sergeychernyshev left a comment

Choose a reason for hiding this comment

Uh oh!

smsnedden commented Jul 22, 2026

Uh oh!

sergeychernyshev left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sergeychernyshev Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

sergeychernyshev Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

sergeychernyshev Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

sergeychernyshev Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

sergeychernyshev Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

sergeychernyshev Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

`extractCSSFromHar(harData): CSSSource[]` (`src/baselineCssExtract.ts`)

Types (`src/types.ts`)

sergeychernyshev left a comment •

edited

Loading