From ebfc2a3717651ddd993e80de616d1c1b387adafe Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Wed, 21 Jan 2026 09:01:42 -0600
Subject: [PATCH 1/5] fix: walk dependency graph in combined imports to collect
 transitive styles.

---
 packages/css/package.json                     |  2 +-
 packages/css/src/loaderBridge.ts              | 78 ++++++++++++++++++-
 .../components/button.module.scss             |  3 +
 .../bridge-graph/components/button.tsx        |  3 +
 .../css/test/fixtures/bridge-graph/entry.tsx  |  3 +
 packages/css/test/loaderBridge.test.ts        | 29 +++++++
 packages/playwright/package.json              |  2 +-
 7 files changed, 114 insertions(+), 6 deletions(-)
 create mode 100644 packages/css/test/fixtures/bridge-graph/components/button.module.scss
 create mode 100644 packages/css/test/fixtures/bridge-graph/components/button.tsx
 create mode 100644 packages/css/test/fixtures/bridge-graph/entry.tsx

diff --git a/packages/css/package.json b/packages/css/package.json
index b1c75fd..40f6bc1 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@knighted/css",
-  "version": "1.1.0-rc.6",
+  "version": "1.1.0-rc.7",
   "description": "A build-time utility that traverses JavaScript/TypeScript module dependency graphs to extract, compile, and optimize all imported CSS into a single, in-memory string.",
   "type": "module",
   "main": "./dist/css.js",
diff --git a/packages/css/src/loaderBridge.ts b/packages/css/src/loaderBridge.ts
index f5d2d06..827598a 100644
--- a/packages/css/src/loaderBridge.ts
+++ b/packages/css/src/loaderBridge.ts
@@ -14,6 +14,7 @@ import {
   shouldEmitCombinedDefault,
   TYPES_QUERY_FLAG,
 } from './loaderInternals.js'
+import { collectStyleImports } from './moduleGraph.js'
 
 export interface KnightedCssBridgeLoaderOptions {
   emitCssModules?: boolean
@@ -25,6 +26,12 @@ type BridgeModuleLike = {
 }
 
 const DEFAULT_EXPORT_NAME = 'knightedCss'
+const CSS_MODULE_EXTENSIONS = [
+  '.module.css',
+  '.module.scss',
+  '.module.sass',
+  '.module.less',
+]
 
 const loader: LoaderDefinitionFunction<KnightedCssBridgeLoaderOptions> = function loader(
   source,
@@ -42,10 +49,8 @@ export const pitch: PitchLoaderDefinitionFunction<KnightedCssBridgeLoaderOptions
         return createCombinedJsBridgeModuleSync(resolvedRemainingRequest)
       }
       readResourceSource(this)
-        .then(source => {
-          const cssRequests = collectCssModuleRequests(source).map(request =>
-            buildBridgeCssRequest(request),
-          )
+        .then(async source => {
+          const cssRequests = await collectCombinedCssRequests(this, source)
           const upstreamRequest = buildUpstreamRequest(resolvedRemainingRequest)
           callback(
             null,
@@ -124,6 +129,71 @@ function readResourceSource(
   })
 }
 
+async function collectCombinedCssRequests(
+  ctx: LoaderContext<KnightedCssBridgeLoaderOptions>,
+  source: string,
+): Promise<string[]> {
+  const directSpecifiers = collectCssModuleRequests(source)
+  const graphImports = await collectCssModuleImports(ctx)
+  const graphRequests = graphImports.map(filePath => buildBridgeCssRequest(filePath))
+  const graphPaths = new Set(graphImports.map(filePath => path.resolve(filePath)))
+  const directRequests = directSpecifiers
+    .map(specifier => {
+      const [resource, query] = specifier.split('?')
+      if (query) {
+        return buildBridgeCssRequest(specifier)
+      }
+      const resolved = resolveCssModuleSpecifier(resource, ctx.resourcePath)
+      if (resolved && graphPaths.has(resolved)) {
+        return undefined
+      }
+      return buildBridgeCssRequest(specifier)
+    })
+    .filter((request): request is string => Boolean(request))
+  return dedupeRequests([...graphRequests, ...directRequests])
+}
+
+async function collectCssModuleImports(
+  ctx: LoaderContext<KnightedCssBridgeLoaderOptions>,
+): Promise<string[]> {
+  const cwd = ctx.rootContext ?? path.dirname(ctx.resourcePath)
+  const filter = (filePath: string) => !filePath.includes('node_modules')
+  try {
+    return await collectStyleImports(ctx.resourcePath, {
+      cwd,
+      styleExtensions: CSS_MODULE_EXTENSIONS,
+      filter,
+    })
+  } catch {
+    return []
+  }
+}
+
+function resolveCssModuleSpecifier(
+  specifier: string,
+  importer: string,
+): string | undefined {
+  if (!specifier) return undefined
+  if (specifier.startsWith('.')) {
+    return path.resolve(path.dirname(importer), specifier)
+  }
+  if (path.isAbsolute(specifier)) {
+    return path.resolve(specifier)
+  }
+  return undefined
+}
+
+function dedupeRequests(requests: string[]): string[] {
+  const seen = new Set<string>()
+  const output: string[] = []
+  for (const request of requests) {
+    if (seen.has(request)) continue
+    seen.add(request)
+    output.push(request)
+  }
+  return output
+}
+
 function collectCssModuleRequests(source: string): string[] {
   const matches = new Set<string>()
   const importPattern =
diff --git a/packages/css/test/fixtures/bridge-graph/components/button.module.scss b/packages/css/test/fixtures/bridge-graph/components/button.module.scss
new file mode 100644
index 0000000..dcffeaa
--- /dev/null
+++ b/packages/css/test/fixtures/bridge-graph/components/button.module.scss
@@ -0,0 +1,3 @@
+.button {
+  background: hotpink;
+}
diff --git a/packages/css/test/fixtures/bridge-graph/components/button.tsx b/packages/css/test/fixtures/bridge-graph/components/button.tsx
new file mode 100644
index 0000000..814d6e2
--- /dev/null
+++ b/packages/css/test/fixtures/bridge-graph/components/button.tsx
@@ -0,0 +1,3 @@
+import styles from './button.module.scss'
+
+export const Button = () => <button className={styles.button}>Go</button>
diff --git a/packages/css/test/fixtures/bridge-graph/entry.tsx b/packages/css/test/fixtures/bridge-graph/entry.tsx
new file mode 100644
index 0000000..33e32f9
--- /dev/null
+++ b/packages/css/test/fixtures/bridge-graph/entry.tsx
@@ -0,0 +1,3 @@
+import { Button } from './components/button.js'
+
+export const Entry = () => <Button />
diff --git a/packages/css/test/loaderBridge.test.ts b/packages/css/test/loaderBridge.test.ts
index 88756ca..7b405b9 100644
--- a/packages/css/test/loaderBridge.test.ts
+++ b/packages/css/test/loaderBridge.test.ts
@@ -1,4 +1,5 @@
 import assert from 'node:assert/strict'
+import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import test from 'node:test'
@@ -247,6 +248,34 @@ test('pitch handles combined js modules and collects css modules', async () => {
   assert.match(result, /other\.module\.scss\?inline&knighted-css/)
 })
 
+test('pitch combined js collects css modules from dependency graph', async () => {
+  const entryPath = path.resolve(__dirname, 'fixtures/bridge-graph/entry.tsx')
+  const ctx = createMockContext({
+    resourcePath: entryPath,
+    resourceQuery: '?knighted-css&combined',
+  }) as LoaderContext<KnightedCssBridgeLoaderOptions> & {
+    fs: LoaderContext<KnightedCssBridgeLoaderOptions>['fs']
+    async: () => (error: Error | null, result?: string) => void
+  }
+
+  const result = await new Promise<string>((resolve, reject) => {
+    ctx.fs = {
+      readFile: (filePath: string, cb: (err: Error | null, data?: Buffer) => void) =>
+        fs.readFile(filePath, cb),
+    } as unknown as LoaderContext<KnightedCssBridgeLoaderOptions>['fs']
+    ctx.async = () => (error, output) => {
+      if (error) {
+        reject(error)
+        return
+      }
+      resolve(String(output ?? ''))
+    }
+    callPitch(ctx, './entry.tsx?knighted-css&combined')
+  })
+
+  assert.match(result, /button\.module\.scss\?knighted-css/)
+})
+
 test('pitch combined js returns sync module when async callback is missing', async () => {
   const ctx = createMockContext({
     resourcePath: path.resolve(__dirname, 'fixtures/bridge/bridge-card.tsx'),
diff --git a/packages/playwright/package.json b/packages/playwright/package.json
index 18dc014..034b9a3 100644
--- a/packages/playwright/package.json
+++ b/packages/playwright/package.json
@@ -27,7 +27,7 @@
     "pretest": "npm run types && npm run build"
   },
   "dependencies": {
-    "@knighted/css": "1.1.0-rc.6",
+    "@knighted/css": "1.1.0-rc.7",
     "@knighted/jsx": "^1.7.3",
     "lit": "^3.2.1",
     "react": "^19.0.0",

From bd716dadf690bfcc457b9e17bf17ee77ae2055e9 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Wed, 21 Jan 2026 09:47:30 -0600
Subject: [PATCH 2/5] fix: walk graph and collect transitive styles for
 non-combined loader bridge.

---
 packages/css/src/loaderBridge.ts       | 157 +++++++++----
 packages/css/src/moduleGraph.ts        |   2 +-
 packages/css/src/styleGraph.ts         | 293 +++++++++++++++++++++++++
 packages/css/test/loaderBridge.test.ts |   5 +-
 packages/css/test/styleGraph.test.ts   | 201 +++++++++++++++++
 packages/playwright/package.json       |   1 +
 6 files changed, 618 insertions(+), 41 deletions(-)
 create mode 100644 packages/css/src/styleGraph.ts
 create mode 100644 packages/css/test/styleGraph.test.ts

diff --git a/packages/css/src/loaderBridge.ts b/packages/css/src/loaderBridge.ts
index 827598a..ad153e3 100644
--- a/packages/css/src/loaderBridge.ts
+++ b/packages/css/src/loaderBridge.ts
@@ -14,7 +14,7 @@ import {
   shouldEmitCombinedDefault,
   TYPES_QUERY_FLAG,
 } from './loaderInternals.js'
-import { collectStyleImports } from './moduleGraph.js'
+import { collectTransitiveStyleImports } from './styleGraph.js'
 
 export interface KnightedCssBridgeLoaderOptions {
   emitCssModules?: boolean
@@ -26,12 +26,7 @@ type BridgeModuleLike = {
 }
 
 const DEFAULT_EXPORT_NAME = 'knightedCss'
-const CSS_MODULE_EXTENSIONS = [
-  '.module.css',
-  '.module.scss',
-  '.module.sass',
-  '.module.less',
-]
+const BRIDGE_STYLE_EXTENSIONS = ['.css', '.scss', '.sass', '.less', '.css.ts']
 
 const loader: LoaderDefinitionFunction<KnightedCssBridgeLoaderOptions> = function loader(
   source,
@@ -44,13 +39,13 @@ export const pitch: PitchLoaderDefinitionFunction<KnightedCssBridgeLoaderOptions
     const resolvedRemainingRequest = resolveRemainingRequest(this, remainingRequest)
 
     if (isJsLikeResource(this.resourcePath) && hasCombinedQuery(this.resourceQuery)) {
-      const callback = this.async()
+      const callback = getAsyncCallback(this)
       if (!callback) {
         return createCombinedJsBridgeModuleSync(resolvedRemainingRequest)
       }
       readResourceSource(this)
         .then(async source => {
-          const cssRequests = await collectCombinedCssRequests(this, source)
+          const cssRequests = await collectBridgeStyleRequests(this, source)
           const upstreamRequest = buildUpstreamRequest(resolvedRemainingRequest)
           callback(
             null,
@@ -64,6 +59,41 @@ export const pitch: PitchLoaderDefinitionFunction<KnightedCssBridgeLoaderOptions
         .catch(error => callback(error as Error))
       return
     }
+    const callback = getAsyncCallback(this)
+    if (!callback) {
+      const localsRequest = buildProxyRequest(this)
+      const upstreamRequest = buildUpstreamRequest(resolvedRemainingRequest)
+      const { emitCssModules } = resolveLoaderOptions(this)
+      const combined = hasCombinedQuery(this.resourceQuery)
+      const skipSyntheticDefault = hasNamedOnlyQueryFlag(this.resourceQuery)
+
+      if (hasQueryFlag(this.resourceQuery, TYPES_QUERY_FLAG)) {
+        emitKnightedWarning(
+          this,
+          'The bridge loader does not generate stableSelectors. Remove the "types" query flag.',
+        )
+      }
+
+      const emitDefault = combined
+        ? shouldEmitCombinedDefault({
+            detection: 'unknown',
+            request: localsRequest,
+            skipSyntheticDefault,
+          })
+        : false
+
+      const resolvedUpstream = upstreamRequest || localsRequest
+      const resolvedLocals = upstreamRequest || localsRequest
+
+      return createBridgeModule({
+        localsRequest: resolvedLocals,
+        upstreamRequest: resolvedUpstream,
+        combined,
+        emitDefault,
+        emitCssModules,
+      })
+    }
+
     const localsRequest = buildProxyRequest(this)
     const upstreamRequest = buildUpstreamRequest(resolvedRemainingRequest)
     const { emitCssModules } = resolveLoaderOptions(this)
@@ -88,13 +118,27 @@ export const pitch: PitchLoaderDefinitionFunction<KnightedCssBridgeLoaderOptions
     const resolvedUpstream = upstreamRequest || localsRequest
     const resolvedLocals = upstreamRequest || localsRequest
 
-    return createBridgeModule({
-      localsRequest: resolvedLocals,
-      upstreamRequest: resolvedUpstream,
-      combined,
-      emitDefault,
-      emitCssModules,
-    })
+    const collectSource = isJsLikeResource(this.resourcePath)
+      ? readResourceSource(this)
+      : Promise.resolve(undefined)
+
+    collectSource
+      .then(async source => {
+        const cssRequests = await collectBridgeStyleRequests(this, source)
+        callback(
+          null,
+          createBridgeModule({
+            localsRequest: resolvedLocals,
+            upstreamRequest: resolvedUpstream,
+            combined,
+            emitDefault,
+            emitCssModules,
+            cssRequests,
+          }),
+        )
+      })
+      .catch(error => callback(error as Error))
+    return
   }
 ;(loader as LoaderDefinitionFunction & { pitch?: typeof pitch }).pitch = pitch
 
@@ -111,6 +155,12 @@ function resolveLoaderOptions(
   }
 }
 
+function getAsyncCallback(
+  ctx: LoaderContext<KnightedCssBridgeLoaderOptions>,
+): ((error: Error | null, result?: string) => void) | undefined {
+  return typeof ctx.async === 'function' ? ctx.async() : undefined
+}
+
 function readResourceSource(
   ctx: LoaderContext<KnightedCssBridgeLoaderOptions>,
 ): Promise<string> {
@@ -129,39 +179,47 @@ function readResourceSource(
   })
 }
 
-async function collectCombinedCssRequests(
+async function collectBridgeStyleRequests(
   ctx: LoaderContext<KnightedCssBridgeLoaderOptions>,
-  source: string,
+  source?: string,
 ): Promise<string[]> {
-  const directSpecifiers = collectCssModuleRequests(source)
-  const graphImports = await collectCssModuleImports(ctx)
-  const graphRequests = graphImports.map(filePath => buildBridgeCssRequest(filePath))
+  const graphImports = await collectStyleGraphImports(ctx)
   const graphPaths = new Set(graphImports.map(filePath => path.resolve(filePath)))
+  const graphRequests = graphImports
+    .filter(filePath => path.resolve(filePath) !== path.resolve(ctx.resourcePath))
+    .map(filePath => buildBridgeCssRequest(filePath))
+
+  if (!source) {
+    return dedupeRequests(graphRequests)
+  }
+
+  const directSpecifiers = collectStyleImportSpecifiers(source)
   const directRequests = directSpecifiers
     .map(specifier => {
       const [resource, query] = specifier.split('?')
       if (query) {
         return buildBridgeCssRequest(specifier)
       }
-      const resolved = resolveCssModuleSpecifier(resource, ctx.resourcePath)
+      const resolved = resolveStyleSpecifier(resource, ctx.resourcePath)
       if (resolved && graphPaths.has(resolved)) {
         return undefined
       }
       return buildBridgeCssRequest(specifier)
     })
     .filter((request): request is string => Boolean(request))
+
   return dedupeRequests([...graphRequests, ...directRequests])
 }
 
-async function collectCssModuleImports(
+async function collectStyleGraphImports(
   ctx: LoaderContext<KnightedCssBridgeLoaderOptions>,
 ): Promise<string[]> {
   const cwd = ctx.rootContext ?? path.dirname(ctx.resourcePath)
   const filter = (filePath: string) => !filePath.includes('node_modules')
   try {
-    return await collectStyleImports(ctx.resourcePath, {
+    return await collectTransitiveStyleImports(ctx.resourcePath, {
       cwd,
-      styleExtensions: CSS_MODULE_EXTENSIONS,
+      styleExtensions: BRIDGE_STYLE_EXTENSIONS,
       filter,
     })
   } catch {
@@ -169,10 +227,7 @@ async function collectCssModuleImports(
   }
 }
 
-function resolveCssModuleSpecifier(
-  specifier: string,
-  importer: string,
-): string | undefined {
+function resolveStyleSpecifier(specifier: string, importer: string): string | undefined {
   if (!specifier) return undefined
   if (specifier.startsWith('.')) {
     return path.resolve(path.dirname(importer), specifier)
@@ -194,10 +249,10 @@ function dedupeRequests(requests: string[]): string[] {
   return output
 }
 
-function collectCssModuleRequests(source: string): string[] {
+function collectStyleImportSpecifiers(source: string): string[] {
   const matches = new Set<string>()
   const importPattern =
-    /(?:import|export)\s+(?:[^'"\n]+\s+from\s+)?['"]([^'"\n]+?\.module\.(?:css|scss|sass|less)(?:\?[^'"\n]+)?)['"]/g
+    /(?:import|export)\s+(?:[^'"\n]+\s+from\s+)?['"]([^'"\n]+?\.(?:css|scss|sass|less|css\.ts)(?:\?[^'"\n]+)?)['"]/g
   let match: RegExpExecArray | null
   while ((match = importPattern.exec(source))) {
     if (match[1]) {
@@ -237,11 +292,15 @@ function createCombinedJsBridgeModule(options: CombinedJsBridgeOptions): string
   const upstreamLiteral = JSON.stringify(options.upstreamRequest)
   const cssImports = options.cssRequests.map((request, index) => {
     const literal = JSON.stringify(request)
-    return `import { knightedCss as __knightedCss${index}, knightedCssModules as __knightedCssModules${index} } from ${literal};`
+    return `import * as __knightedStyle${index} from ${literal};`
   })
-  const cssValues = options.cssRequests.map((_, index) => `__knightedCss${index}`)
-  const cssModulesValues = options.cssRequests.map(
-    (_, index) => `__knightedCssModules${index}`,
+  const cssValues = options.cssRequests.map(
+    (_, index) => `__knightedStyle${index}.knightedCss`,
+  )
+  const cssModulesValues = options.cssRequests.map((request, index) =>
+    isCssModuleRequest(request)
+      ? `__knightedStyle${index}.knightedCssModules`
+      : 'undefined',
   )
   const lines = [
     `import * as __knightedUpstream from ${upstreamLiteral};`,
@@ -329,26 +388,42 @@ interface BridgeModuleOptions {
   combined: boolean
   emitDefault: boolean
   emitCssModules: boolean
+  cssRequests?: string[]
 }
 
 function createBridgeModule(options: BridgeModuleOptions): string {
   const localsLiteral = JSON.stringify(options.localsRequest)
   const upstreamLiteral = JSON.stringify(options.upstreamRequest)
+  const cssRequests = options.cssRequests ?? []
+  const cssImports = cssRequests.map((request, index) => {
+    const literal = JSON.stringify(request)
+    return `import * as __knightedStyle${index} from ${literal};`
+  })
+  const cssValues = cssRequests.map((_, index) => `__knightedStyle${index}.knightedCss`)
+  const cssModulesValues = cssRequests.map((request, index) =>
+    isCssModuleRequest(request)
+      ? `__knightedStyle${index}.knightedCssModules`
+      : 'undefined',
+  )
   const lines = [
     `import * as __knightedLocals from ${localsLiteral};`,
     `import * as __knightedUpstream from ${upstreamLiteral};`,
+    ...cssImports,
     `const __knightedDefault =\ntypeof __knightedUpstream.default !== 'undefined'\n  ? __knightedUpstream.default\n  : __knightedUpstream;`,
     `const __knightedResolveCss = ${resolveCssText.toString()};`,
     `const __knightedResolveCssModules = ${resolveCssModules.toString()};`,
     `const __knightedUpstreamLocals =\n  __knightedResolveCssModules(__knightedUpstream, __knightedUpstream);`,
     `const __knightedLocalsExport =\n  __knightedUpstreamLocals ??\n  __knightedResolveCssModules(__knightedLocals, __knightedLocals) ??\n  __knightedLocals;`,
-    `const __knightedCss = __knightedResolveCss(__knightedDefault, __knightedUpstream);`,
+    `const __knightedBaseCss = __knightedResolveCss(__knightedDefault, __knightedUpstream);`,
+    `const __knightedCss = [__knightedBaseCss, ${cssValues.join(', ')}].filter(Boolean).join('\\n');`,
     `export const ${DEFAULT_EXPORT_NAME} = __knightedCss;`,
   ]
 
   if (options.emitCssModules) {
     lines.push(
-      `const __knightedCssModules = __knightedLocalsExport ?? __knightedResolveCssModules(\n  __knightedDefault,\n  __knightedUpstream,\n);`,
+      `const __knightedCssModules = Object.assign({}, ...[__knightedLocalsExport ?? __knightedResolveCssModules(\n  __knightedDefault,\n  __knightedUpstream,\n), ${cssModulesValues.join(
+        ', ',
+      )}].filter(Boolean));`,
       'export const knightedCssModules = __knightedCssModules;',
     )
   }
@@ -375,6 +450,12 @@ function buildUpstreamRequest(remainingRequest?: string): string {
   return request
 }
 
+function isCssModuleRequest(request: string): boolean {
+  const [resource] = request.split('?')
+  const lower = resource.toLowerCase()
+  return /\.module\.(css|scss|sass|less|css\.ts)$/.test(lower)
+}
+
 function buildProxyRequest(ctx: LoaderContext<KnightedCssBridgeLoaderOptions>): string {
   const sanitizedQuery = buildSanitizedQuery(ctx.resourceQuery)
   const rawRequest = getRawRequest(ctx)
@@ -519,7 +600,7 @@ function emitKnightedWarning(
 }
 
 export const __loaderBridgeInternals = {
-  collectCssModuleRequests,
+  collectStyleImportSpecifiers,
   buildBridgeCssRequest,
   createCombinedJsBridgeModule,
   isJsLikeResource,
diff --git a/packages/css/src/moduleGraph.ts b/packages/css/src/moduleGraph.ts
index 2c435e8..df2d925 100644
--- a/packages/css/src/moduleGraph.ts
+++ b/packages/css/src/moduleGraph.ts
@@ -278,7 +278,7 @@ function extractModuleSpecifiers(
   return specifiers
 }
 
-function normalizeSpecifier(raw: string): string {
+export function normalizeSpecifier(raw: string): string {
   if (!raw) return ''
   const trimmed = raw.trim()
   if (!trimmed || trimmed.startsWith('\0')) {
diff --git a/packages/css/src/styleGraph.ts b/packages/css/src/styleGraph.ts
new file mode 100644
index 0000000..d3daf2e
--- /dev/null
+++ b/packages/css/src/styleGraph.ts
@@ -0,0 +1,293 @@
+import path from 'node:path'
+import { promises as fs } from 'node:fs'
+
+import type { CssResolver } from './types.js'
+import {
+  collectStyleImports,
+  normalizeSpecifier,
+  type ModuleGraphOptions,
+} from './moduleGraph.js'
+import {
+  createResolverFactory,
+  findExistingFile,
+  normalizeResolverResult,
+  resolveWithFactory,
+} from './moduleResolution.js'
+import {
+  createPkgResolver,
+  ensureSassPath,
+  resolveAliasSpecifier,
+  shouldNormalizeSpecifier,
+} from './sassInternals.js'
+
+const DEFAULT_STYLE_EXTENSIONS = ['.css', '.scss', '.sass', '.less', '.css.ts']
+
+export interface StyleGraphOptions {
+  cwd: string
+  styleExtensions?: string[]
+  filter?: (filePath: string) => boolean
+  resolver?: CssResolver
+  moduleGraph?: ModuleGraphOptions
+}
+
+export async function collectTransitiveStyleImports(
+  entryPath: string,
+  options: StyleGraphOptions,
+): Promise<string[]> {
+  const cwd = path.resolve(options.cwd)
+  const extensions = normalizeExtensions(
+    options.styleExtensions ?? DEFAULT_STYLE_EXTENSIONS,
+  )
+  const filter =
+    typeof options.filter === 'function'
+      ? options.filter
+      : (filePath: string) => !filePath.includes('node_modules')
+
+  const entryIsStyle = isStyleExtension(entryPath, extensions)
+  let initialStyles: string[]
+
+  if (entryIsStyle) {
+    initialStyles = [path.resolve(entryPath)]
+  } else {
+    initialStyles = await collectStyleImports(entryPath, {
+      cwd,
+      styleExtensions: extensions,
+      filter,
+      resolver: options.resolver,
+      graphOptions: options.moduleGraph,
+    })
+  }
+
+  const queue = [...initialStyles]
+  const ordered: string[] = []
+  const seen = new Set<string>()
+
+  for (const file of initialStyles) {
+    const resolved = path.resolve(file)
+    if (seen.has(resolved)) continue
+    seen.add(resolved)
+    ordered.push(resolved)
+  }
+
+  const resolverFactory = createResolverFactory(cwd, extensions, extensions, {
+    conditions: options.moduleGraph?.conditions,
+    tsconfig: options.moduleGraph?.tsConfig,
+  })
+  const sassResolver = createPkgResolver(cwd)
+
+  while (queue.length > 0) {
+    const filePath = queue.shift()
+    if (!filePath) continue
+    const absolutePath = path.resolve(filePath)
+    let source: string
+    try {
+      source = await fs.readFile(absolutePath, 'utf8')
+    } catch {
+      continue
+    }
+    const dialect = getStyleDialect(absolutePath)
+    if (!dialect) continue
+    const specifiers = collectStyleSpecifiers(source, dialect)
+
+    for (const raw of specifiers) {
+      const normalized = normalizeSpecifier(raw)
+      if (!normalized) continue
+      if (isExternalSpecifier(normalized)) continue
+
+      const resolved = await resolveStyleSpecifier({
+        specifier: normalized,
+        importer: absolutePath,
+        dialect,
+        extensions,
+        cwd,
+        resolver: options.resolver,
+        resolverFactory,
+        sassResolver,
+      })
+
+      if (!resolved) continue
+      const normalizedResolved = path.resolve(resolved)
+      if (!filter(normalizedResolved)) continue
+      if (seen.has(normalizedResolved)) continue
+      seen.add(normalizedResolved)
+      ordered.push(normalizedResolved)
+      queue.push(normalizedResolved)
+    }
+  }
+
+  return ordered
+}
+
+function normalizeExtensions(extensions: string[]): string[] {
+  const result = new Set<string>()
+  for (const ext of extensions) {
+    if (!ext) continue
+    const normalized = ext.startsWith('.') ? ext.toLowerCase() : `.${ext.toLowerCase()}`
+    result.add(normalized)
+  }
+  return Array.from(result)
+}
+
+function isStyleExtension(filePath: string, extensions: string[]): boolean {
+  const lower = filePath.toLowerCase()
+  return extensions.some(ext => lower.endsWith(ext))
+}
+
+type StyleDialect = 'css' | 'sass' | 'less'
+
+function getStyleDialect(filePath: string): StyleDialect | undefined {
+  const lower = filePath.toLowerCase()
+  if (lower.endsWith('.scss') || lower.endsWith('.sass')) return 'sass'
+  if (lower.endsWith('.less')) return 'less'
+  if (lower.endsWith('.css')) return 'css'
+  return undefined
+}
+
+function collectStyleSpecifiers(source: string, dialect: StyleDialect): string[] {
+  if (dialect === 'sass') {
+    return collectSassSpecifiers(source)
+  }
+  if (dialect === 'less') {
+    return collectLessSpecifiers(source)
+  }
+  return collectCssSpecifiers(source)
+}
+
+function collectCssSpecifiers(source: string): string[] {
+  const results: string[] = []
+  const rx = /@import\s+(?:url\(\s*)?(?:['"])([^'"\n\r]+)(?:['"])\s*\)?/gi
+  let match: RegExpExecArray | null
+  while ((match = rx.exec(source)) !== null) {
+    if (match[1]) results.push(match[1])
+  }
+  return results
+}
+
+function collectLessSpecifiers(source: string): string[] {
+  const results: string[] = []
+  const rx =
+    /@import\s*(?:\([^)]*\)\s*)?(?:url\(\s*)?(?:['"])([^'"\n\r]+)(?:['"])\s*\)?/gi
+  let match: RegExpExecArray | null
+  while ((match = rx.exec(source)) !== null) {
+    if (match[1]) results.push(match[1])
+  }
+  return results
+}
+
+function collectSassSpecifiers(source: string): string[] {
+  const results: string[] = []
+  const rx = /@(?:use|forward)\s+(?:['"])([^'"\n\r]+)(?:['"])/gi
+  let match: RegExpExecArray | null
+  while ((match = rx.exec(source)) !== null) {
+    if (match[1]) results.push(match[1])
+  }
+  const importRx = /@import\s+([^;]+);/gi
+  while ((match = importRx.exec(source)) !== null) {
+    const chunk = match[1]
+    if (!chunk) continue
+    const quoted = chunk.match(/['"]([^'"]+)['"]/g) ?? []
+    for (const entry of quoted) {
+      const cleaned = entry.slice(1, -1)
+      if (cleaned) results.push(cleaned)
+    }
+  }
+  return results
+}
+
+function isExternalSpecifier(specifier: string): boolean {
+  return /^(?:https?:|data:|blob:)/i.test(specifier)
+}
+
+async function resolveStyleSpecifier({
+  specifier,
+  importer,
+  dialect,
+  extensions,
+  cwd,
+  resolver,
+  resolverFactory,
+  sassResolver,
+}: {
+  specifier: string
+  importer: string
+  dialect: StyleDialect
+  extensions: string[]
+  cwd: string
+  resolver?: CssResolver
+  resolverFactory: ReturnType<typeof createResolverFactory>
+  sassResolver: ReturnType<typeof createPkgResolver>
+}): Promise<string | undefined> {
+  if (dialect === 'sass') {
+    return resolveSassSpecifier({
+      specifier,
+      importer,
+      cwd,
+      resolver,
+      sassResolver,
+    })
+  }
+
+  const resolvedByResolver = await resolveWithCustomResolver(
+    specifier,
+    importer,
+    cwd,
+    resolver,
+    extensions,
+  )
+  if (resolvedByResolver) return resolvedByResolver
+
+  if (specifier.startsWith('.')) {
+    return findExistingFile(path.resolve(path.dirname(importer), specifier), extensions)
+  }
+  if (path.isAbsolute(specifier)) {
+    return findExistingFile(specifier, extensions)
+  }
+  return resolveWithFactory(resolverFactory, specifier, importer, extensions)
+}
+
+async function resolveWithCustomResolver(
+  specifier: string,
+  importer: string,
+  cwd: string,
+  resolver: CssResolver | undefined,
+  extensions: string[],
+): Promise<string | undefined> {
+  if (!resolver) return undefined
+  const resolved = normalizeResolverResult(
+    await resolver(specifier, { cwd, from: importer }),
+    cwd,
+  )
+  if (!resolved) return undefined
+  return findExistingFile(resolved, extensions) ?? resolved
+}
+
+async function resolveSassSpecifier({
+  specifier,
+  importer,
+  cwd,
+  resolver,
+  sassResolver,
+}: {
+  specifier: string
+  importer: string
+  cwd: string
+  resolver?: CssResolver
+  sassResolver: ReturnType<typeof createPkgResolver>
+}): Promise<string | undefined> {
+  if (resolver && shouldNormalizeSpecifier(specifier)) {
+    const resolved = await resolveAliasSpecifier(specifier, resolver, cwd, importer)
+    if (resolved) return resolved
+  }
+  if (specifier.startsWith('pkg:')) {
+    const resolved = await sassResolver(specifier.slice(4), importer)
+    return resolved ? (ensureSassPath(resolved) ?? resolved) : undefined
+  }
+  if (specifier.startsWith('.')) {
+    return ensureSassPath(path.resolve(path.dirname(importer), specifier))
+  }
+  if (path.isAbsolute(specifier)) {
+    return ensureSassPath(specifier)
+  }
+  const resolved = await sassResolver(specifier, importer)
+  return resolved ? (ensureSassPath(resolved) ?? resolved) : undefined
+}
diff --git a/packages/css/test/loaderBridge.test.ts b/packages/css/test/loaderBridge.test.ts
index 7b405b9..64a4eed 100644
--- a/packages/css/test/loaderBridge.test.ts
+++ b/packages/css/test/loaderBridge.test.ts
@@ -163,15 +163,16 @@ test('pitch warns when types query is used', async () => {
   assert.match(ctx.warnings[0] ?? '', /does not generate stableSelectors/)
 })
 
-test('collectCssModuleRequests finds css module imports', () => {
+test('collectStyleImportSpecifiers finds style imports', () => {
   const source = `
     import styles from './card.module.css'
     import './other.module.scss?inline'
     export { tokens } from "./tokens.module.less"
     import './global.css'
   `
-  assert.deepEqual(__loaderBridgeInternals.collectCssModuleRequests(source).sort(), [
+  assert.deepEqual(__loaderBridgeInternals.collectStyleImportSpecifiers(source).sort(), [
     './card.module.css',
+    './global.css',
     './other.module.scss?inline',
     './tokens.module.less',
   ])
diff --git a/packages/css/test/styleGraph.test.ts b/packages/css/test/styleGraph.test.ts
new file mode 100644
index 0000000..5ace19e
--- /dev/null
+++ b/packages/css/test/styleGraph.test.ts
@@ -0,0 +1,201 @@
+import assert from 'node:assert/strict'
+import fs from 'node:fs/promises'
+import os from 'node:os'
+import path from 'node:path'
+import test from 'node:test'
+import { pathToFileURL } from 'node:url'
+
+import { collectTransitiveStyleImports } from '../src/styleGraph.ts'
+import type { CssResolver } from '../src/types.js'
+
+interface Project {
+  root: string
+  file: (rel: string) => string
+  writeFile: (rel: string, contents: string) => Promise<string>
+  cleanup: () => Promise<void>
+}
+
+async function createProject(prefix: string): Promise<Project> {
+  const root = await fs.mkdtemp(path.join(os.tmpdir(), prefix))
+  const writeFile = async (rel: string, contents: string): Promise<string> => {
+    const target = path.join(root, rel)
+    await fs.mkdir(path.dirname(target), { recursive: true })
+    await fs.writeFile(target, contents, 'utf8')
+    return target
+  }
+  return {
+    root,
+    file: rel => path.join(root, rel),
+    writeFile,
+    cleanup: () => fs.rm(root, { recursive: true, force: true }),
+  }
+}
+
+async function realpathAll(paths: string[]): Promise<string[]> {
+  return Promise.all(paths.map(filePath => fs.realpath(filePath)))
+}
+
+test('collectTransitiveStyleImports walks css @import chain', async () => {
+  const project = await createProject('knighted-css-style-graph-css-')
+  try {
+    await project.writeFile(
+      'styles/main.css',
+      `@import './partials/reset.css';
+@import url("./partials/theme.css");
+@import 'https://example.com/skip.css';
+@import 'data:text/css;base64,AAAA';
+body { color: red; }
+`,
+    )
+    await project.writeFile(
+      'styles/partials/reset.css',
+      `@import './deep/inner.css';
+.reset { color: #111; }
+`,
+    )
+    await project.writeFile('styles/partials/theme.css', '.theme { color: #222; }\n')
+    await project.writeFile('styles/partials/deep/inner.css', '.inner { color: #333; }\n')
+
+    const result = await collectTransitiveStyleImports(project.file('styles/main.css'), {
+      cwd: project.root,
+    })
+
+    const expected = [
+      project.file('styles/main.css'),
+      project.file('styles/partials/reset.css'),
+      project.file('styles/partials/theme.css'),
+      project.file('styles/partials/deep/inner.css'),
+    ]
+
+    assert.deepEqual(await realpathAll(result), await realpathAll(expected))
+  } finally {
+    await project.cleanup()
+  }
+})
+
+test('collectTransitiveStyleImports uses resolver and filter', async () => {
+  const project = await createProject('knighted-css-style-graph-resolver-')
+  try {
+    await project.writeFile(
+      'styles/entry.css',
+      `@import '@alias/theme.css';
+@import '@skip/skip.css';
+`,
+    )
+    await project.writeFile('styles/theme.css', '.theme { color: #444; }\n')
+    await project.writeFile('node_modules/skip/skip.css', '.skip { color: #555; }\n')
+
+    const resolver: CssResolver = async specifier => {
+      if (specifier === '@alias/theme.css') {
+        return pathToFileUrl(project.file('styles/theme.css'))
+      }
+      if (specifier === '@skip/skip.css') {
+        return project.file('node_modules/skip/skip.css')
+      }
+      return undefined
+    }
+
+    const result = await collectTransitiveStyleImports(project.file('styles/entry.css'), {
+      cwd: project.root,
+      resolver,
+      filter: filePath => !filePath.includes('node_modules'),
+    })
+
+    const expected = [project.file('styles/entry.css'), project.file('styles/theme.css')]
+    assert.deepEqual(await realpathAll(result), await realpathAll(expected))
+  } finally {
+    await project.cleanup()
+  }
+})
+
+test('collectTransitiveStyleImports supports sass and pkg specifiers', async () => {
+  const project = await createProject('knighted-css-style-graph-sass-')
+  try {
+    await project.writeFile(
+      'styles/entry.scss',
+      `@use 'fake';
+@forward './partials/colors.scss';
+@import './tokens.scss', './partials/mixins.scss';
+@import 'http://example.com/skip.css';
+`,
+    )
+    await project.writeFile('styles/partials/_colors.scss', '$brand: #111;\n')
+    await project.writeFile('styles/partials/_mixins.scss', '@mixin button {}\n')
+    await project.writeFile('styles/_tokens.scss', '$token: #222;\n')
+
+    await project.writeFile(
+      'node_modules/fake/package.json',
+      JSON.stringify(
+        {
+          name: 'fake',
+          version: '1.0.0',
+          sass: 'index.scss',
+          style: 'index.scss',
+          main: 'index.scss',
+        },
+        null,
+        2,
+      ),
+    )
+    await project.writeFile('node_modules/fake/index.scss', '$fake: #333;\n')
+
+    const result = await collectTransitiveStyleImports(
+      project.file('styles/entry.scss'),
+      {
+        cwd: project.root,
+        filter: () => true,
+      },
+    )
+
+    const expected = [
+      project.file('styles/entry.scss'),
+      project.file('node_modules/fake/index.scss'),
+      project.file('styles/partials/_colors.scss'),
+      project.file('styles/_tokens.scss'),
+      project.file('styles/partials/_mixins.scss'),
+    ]
+
+    assert.deepEqual(await realpathAll(result), await realpathAll(expected))
+  } finally {
+    await project.cleanup()
+  }
+})
+
+test('collectTransitiveStyleImports supports less imports', async () => {
+  const project = await createProject('knighted-css-style-graph-less-')
+  try {
+    await project.writeFile(
+      'styles/entry.less',
+      `@import (reference) './theme.less';
+`,
+    )
+    await project.writeFile(
+      'styles/theme.less',
+      `@import './nested.less';
+.theme { color: #666; }
+`,
+    )
+    await project.writeFile('styles/nested.less', '.nested { color: #777; }\n')
+
+    const result = await collectTransitiveStyleImports(
+      project.file('styles/entry.less'),
+      {
+        cwd: project.root,
+      },
+    )
+
+    const expected = [
+      project.file('styles/entry.less'),
+      project.file('styles/theme.less'),
+      project.file('styles/nested.less'),
+    ]
+
+    assert.deepEqual(await realpathAll(result), await realpathAll(expected))
+  } finally {
+    await project.cleanup()
+  }
+})
+
+function pathToFileUrl(filePath: string): string {
+  return pathToFileURL(filePath).toString()
+}
diff --git a/packages/playwright/package.json b/packages/playwright/package.json
index 034b9a3..e52b7fa 100644
--- a/packages/playwright/package.json
+++ b/packages/playwright/package.json
@@ -16,6 +16,7 @@
     "build:bridge:webpack": "webpack --config webpack.bridge.config.js",
     "precheck-types": "npm run types",
     "check-types": "tsc --noEmit",
+    "prebuild": " npm run build -w @knighted/css",
     "preview": "npm run build && http-server . -p 4174",
     "preview:auto-stable": "npm run build:auto-stable && http-server . -p 4175",
     "preview:bridge": "npm run build:bridge:rspack && http-server . -p 4176 -o /bridge.html",

From e0a6b71f7ba80ec938ac062d3f780720bf1b8aca Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Wed, 21 Jan 2026 09:51:16 -0600
Subject: [PATCH 3/5] docs: distinction between loaders.

---
 docs/loader.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/docs/loader.md b/docs/loader.md
index 81b14a9..5b6554d 100644
--- a/docs/loader.md
+++ b/docs/loader.md
@@ -63,6 +63,15 @@ When you want `knightedCss` to reflect the **hashed class names produced by your
 CSS Modules pipeline**, use the companion loader `@knighted/css/loader-bridge`. It runs
 after your Sass/CSS modules loaders and simply wraps their output (no reprocessing).
 
+The key distinction:
+
+- `@knighted/css/loader` works from **source styles** (pre-hash). It resolves imports,
+  compiles CSS dialects, and emits `knightedCss` before any downstream CSS Modules
+  hashing/compilation happens.
+- `@knighted/css/loader-bridge` works from **compiled output** (post-hash). It assumes your
+  CSS Modules pipeline already ran and therefore must be chained _after_ loaders like
+  `css-loader`, `sass-loader`, or `less-loader`.
+
 ```js
 // rspack.config.js or webpack.config.js
 export default {

From f29a124fd53742891b954caf92bd99504e427a59 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Wed, 21 Jan 2026 09:53:15 -0600
Subject: [PATCH 4/5] test: add d.ts for fixture.

---
 .../fixtures/bridge-graph/components/button.module.scss.d.ts | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/css/test/fixtures/bridge-graph/components/button.module.scss.d.ts

diff --git a/packages/css/test/fixtures/bridge-graph/components/button.module.scss.d.ts b/packages/css/test/fixtures/bridge-graph/components/button.module.scss.d.ts
new file mode 100644
index 0000000..7e38105
--- /dev/null
+++ b/packages/css/test/fixtures/bridge-graph/components/button.module.scss.d.ts
@@ -0,0 +1,5 @@
+declare const classes: {
+  readonly [key: string]: string
+}
+
+export default classes

From 7c08b1fb40e1e696a1b48a32c3e5591de7a9e9aa Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:25:29 +0000
Subject: [PATCH 5/5] Initial plan