Feat/#23 Option external stylesheets

.changeset/eager-moles-grin.md

@@ -0,0 +1,5 @@
+---
+"@lightpanda/browser": minor
+---
+
+Feat/#23 Option external stylesheets

packages/browser/package.json

@@ -9,13 +9,13 @@
   "scripts": {
     "dev": "tsup index.ts --target node22 --format cjs,esm --dts --watch",
     "build:index": "tsup index.ts --target node22 --format cjs,esm --minify terser",
-    "build:decl": "yarn dlx --package=typescript tsc --emitDeclarationOnly --declaration",
+    "build:decl": "npx tsc --emitDeclarationOnly --declaration",
     "build:cli": "tsup cli/main.ts --target node22 --format cjs,esm --minify terser -d dist/cli",
     "build:postinstall": "tsup scripts/postinstall.ts --target node22 --format cjs,esm --minify terser -d dist/scripts",
     "build": "yarn build:index && yarn build:decl && yarn build:cli && yarn build:postinstall",
     "postinstall": "node dist/scripts/postinstall.js || true",
     "lint": "biome ci . --diagnostic-level=error",
-    "typecheck": "yarn dlx --package=typescript tsc --noEmit"
+    "typecheck": "npx tsc --noEmit"
   },
   "bin": {
     "lightpanda": "./dist/cli/main.js"
@@ -50,4 +50,4 @@
   "dependencies": {
     "yargs": "^18.0.0"
   }
-}
+}

packages/browser/src/fetch.ts

@@ -29,6 +29,7 @@ import { getExecutablePath, validateUrl } from './utils.js'
 export type LightpandaFetchOptions = {
   disableHostVerification?: boolean
   obeyRobots?: boolean
+  enableExternalStylesheets?: boolean
   httpProxy?: string
   dump?: boolean
   dumpOptions?: { type?: 'html' | 'markdown' }
@@ -46,7 +47,14 @@ const defaultOptions: LightpandaFetchOptions = {
  * @returns {Promise<Buffer | string>}
  */
 export const fetch = (url: string, options: LightpandaFetchOptions = defaultOptions) => {
-  const { dump, dumpOptions, disableHostVerification, obeyRobots, httpProxy } = options
+  const {
+    dump,
+    dumpOptions,
+    disableHostVerification,
+    obeyRobots,
+    enableExternalStylesheets,
+    httpProxy,
+  } = options
   validateUrl(url)
 
   if (httpProxy) {
@@ -60,6 +68,7 @@ export const fetch = (url: string, options: LightpandaFetchOptions = defaultOpti
         { flag: `--dump ${dumpOptions?.type ?? 'html'}`, condition: dump },
         { flag: '--insecure-disable-tls-host-verification', condition: disableHostVerification },
         { flag: '--obey-robots', condition: obeyRobots },
+        { flag: '--enable-external-stylesheets', condition: enableExternalStylesheets },
         { flag: `--http-proxy ${httpProxy}`, condition: httpProxy },
       ]
         .map(f => (f.condition ? f.flag : ''))

packages/browser/src/serve.ts

@@ -23,13 +23,15 @@ import { getExecutablePath, validatePort, validateUrl } from './utils.js'
  * @property {string} port - Port of the CDP server
  * @property {boolean} disableHostVerification - Disables host verification on all HTTP requests
  * @property {boolean} obeyRobots - Fetches and obeys the robots.txt (if available) of the web pages we make requests towards.
+ * @property {boolean} enableExternalStylesheets - Fetch external <link rel=stylesheet> resources so their rules contribute to computed styles (and therefore to visibility checks like display, visibility, opacity, pointer-events). Defaults to false, except in agent mode with an LLM, where it is on.
  * @property {string} httpProxy - The HTTP proxy to use for all HTTP requests
  */
 export type LightpandaServeOptions = {
   host?: string
   port?: number
   disableHostVerification?: boolean
   obeyRobots?: boolean
+  enableExternalStylesheets?: boolean
   httpProxy?: string
 }
 
@@ -44,7 +46,8 @@ const defaultOptions: LightpandaServeOptions = {
  * @returns {Promise<ChildProcessWithoutNullStreams>}
  */
 export const serve = (options: LightpandaServeOptions = defaultOptions) => {
-  const { host, port, disableHostVerification, obeyRobots, httpProxy } = options
+  const { host, port, disableHostVerification, obeyRobots, enableExternalStylesheets, httpProxy } =
+    options
 
   if (port) {
     validatePort(port)
@@ -68,6 +71,11 @@ export const serve = (options: LightpandaServeOptions = defaultOptions) => {
         value: obeyRobots,
         flagOnly: true,
       },
+      {
+        flag: '--enable-external-stylesheets',
+        value: enableExternalStylesheets,
+        flagOnly: true,
+      },
       { flag: '--http-proxy', value: httpProxy },
     ]
       .flatMap(f => (f.value ? [f.flag, !f.flagOnly ? f.value.toString() : ''] : ''))