Fallow discovers .html files and extracts edges from <script src> and <link> tags. This is especially useful for projects that use HTML entry points (such as Parcel or vanilla setups).What’s supported:
<script src="./main.js"> script references<link rel="stylesheet" href="./styles.css"> stylesheet references<link rel="modulepreload" href="./vendor.js"> module preload references- Root-relative paths (e.g.,
<script src="/src/main.tsx">) are resolved against the project root, matching the convention used by Vite, Parcel, and similar dev servers. Root-relative resolution also applies when the reference comes from a JSX/TSX/JS/TS source file (see the JSX templates tab).
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./styles/main.css" />
<link rel="modulepreload" href="./vendor/lodash.js" />
</head>
<body>
<div id="app"></div>
<script src="./src/main.ts"></script>
</body>
</html>
./styles/main.css, ./vendor/lodash.js, and ./src/main.ts.The Parcel plugin automatically adds index.html as an entry pattern, so HTML entry files are picked up without any extra config.
.html files referenced via templateUrl and inline @Component({ template: \…` })literals both contribute synthetic<template>complexity findings tofallow health. The scanner recognises control-flow blocks (@if, @for, @switch, @case, @defer (when …), @let), legacy structural directives (*ngIf, *ngFor), bound attributes ([x], (x), bind-x, on-x), and interpolations. Inline-template findings anchor at the@Componentdecorator line and suppress with// fallow-ignore-next-line complexitydirectly above the decorator; external-template findings suppress with<!— fallow-ignore-file complexity —>at the top of the.html` file. SSR frameworks like Hono render HTML from layout components using either JSX or a tagged template literal (html`...`). Fallow treats <script src="..."> and <link rel="stylesheet|modulepreload" href="..."> inside both forms the same way it treats them in plain HTML: as asset references that keep the target file reachable.What’s supported:
<script src="./app.js"> inside JSX/TSX layouts and html`...` tagged templates<link rel="stylesheet" href="./global.css"> inside JSX/TSX layouts and html`...` tagged templates<link rel="modulepreload" href="./vendor.js"> inside JSX/TSX layouts and html`...` tagged templates- Root-relative paths (
<link href="/static/style.css">) resolve against the source file’s parent directory first, then the project root, matching how Vite/Parcel/Hono serve static assets
export const Layout = () => (
<html>
<head>
<link rel="stylesheet" href="/static/style.css" />
<script src="/static/app.js"></script>
</head>
<body>
<h1>Hello from Hono</h1>
</body>
</html>
);
import { html } from 'hono/html'
export const Layout = ({ title, body }: { title: string; body: string }) => html`
<!doctype html>
<html>
<head>
<title>${title}</title>
<link rel="stylesheet" href="/static/style.css" />
<script defer src="/static/app.js"></script>
</head>
<body>${body}</body>
</html>
`
/static/style.css and /static/app.js, so sibling files in static/ are correctly marked reachable.In JSX, only lowercase intrinsic elements (<script>, <link>) and plain string literals (src="foo.css") are tracked. Capitalized React-style components (<Script>, <Link>) and expression containers (href={someVar}) are intentionally skipped because they have component-specific semantics that fallow can’t statically resolve.In tagged templates, only the bare identifier tag html is matched. Other tags like css, sql, and gql are left alone. Asset references split across an interpolation boundary (html`<script src="${base}/app.js">`) are skipped rather than producing garbled specifiers.
Plain JavaScript files can reference TypeScript types through JSDoc import() expressions. Fallow extracts these references and marks the referenced types as used, so untyped JS files don’t produce false unused-export reports./**
* @param cfg {import('./types.ts').Config}
* @returns {import('./types.ts').Result}
*/
function boot(cfg) {
return { ok: true };
}
Config and Result types from ./types.ts as used, even though no import statement binds them. This works across all JSDoc tag contexts (@param, @returns, @type, @typedef, @callback) and supports union annotations with multiple import() expressions ({import('./a').A | import('./b').B}), nested member access, bare package specifiers, and parent-relative paths.Only /** */ JSDoc blocks are scanned. Single-star /* */ comments are not JSDoc and are ignored, matching the TypeScript compiler’s behavior.
GraphQL document files can reference fragments from nearby .graphql and .gql files with #import comments. Fallow extracts those relative document links and keeps imported fragment files reachable.What’s supported:
#import "./fragment.graphql" relative imports# import '../shared/fields.gql' with optional whitespace after #- Extensionless relative imports such as
#import "./fragment", resolved through .graphql and .gql
#import "./fragments/user-fields"
query CurrentUser {
currentUser {
...UserFields
}
}
fragments/user-fields.graphql
fragment UserFields on User {
id
name
}
query.graphql as referencing ./fragments/user-fields, probes .graphql and .gql when no extension is present, and marks fragments/user-fields.graphql as reachable.Only relative #import specifiers starting with ./ or ../ are tracked. Package specifiers and schema-loader syntax are intentionally ignored because they do not map to a local source document in the module graph.
Fallow tracks CSS and SCSS module files (.module.css and .module.scss) by extracting class names as named exports. When a component imports styles from a CSS module, fallow knows which classes exist..root {
display: flex;
}
.primary {
background: blue;
}
.disabled {
opacity: 0.5;
}
root, primary, and disabled as named exports.CSS features fallow tracks:| Feature | Description |
|---|
@import | CSS import statements create edges in the module graph |
@use | Sass @use rules are resolved as module imports |
@forward | Sass @forward rules are treated as re-exports |
@apply / @tailwind | Detected as Tailwind CSS dependency usage |
@plugin | Tailwind v4 plugin sources are extracted as default imports (package or relative) |
When Tailwind is in your package.json, fallow recognizes @apply and @tailwind directives as evidence that the tailwindcss dependency is used, preventing false “unused dependency” reports. Tailwind v4 @plugin "pkg" directives credit their package or local plugin file directly.
