test: sass node package imports.

Author: knightedcodemonkey

packages/css/src/css.ts

@@ -328,8 +328,8 @@ async function compileSass(
     peerResolver,
   )
   const sass = resolveSassNamespace(sassModule)
-  const importer = createSassImporter({ cwd, resolver })
-  const legacyImporter = createLegacySassImporter({ cwd, resolver })
+  const importer = createSassImporter({ cwd, resolver, entryPath: filePath })
+  const legacyImporter = createLegacySassImporter({ cwd, resolver, entryPath: filePath })
   const loadPaths = buildSassLoadPaths(filePath)
 
   if (typeof (sass as { compileAsync?: Function }).compileAsync === 'function') {

packages/css/src/sassInternals.ts

@@ -1,6 +1,7 @@
 import path from 'node:path'
 import { existsSync, promises as fs } from 'node:fs'
 import { fileURLToPath, pathToFileURL } from 'node:url'
+import { createRequire } from 'node:module'
 
 import type { CssResolver } from './types.js'
 import { createResolverFactory, resolveWithFactory } from './moduleResolution.js'
@@ -10,9 +11,11 @@ export type { CssResolver } from './types.js'
 export function createSassImporter({
   cwd,
   resolver,
+  entryPath,
 }: {
   cwd: string
   resolver?: CssResolver
+  entryPath?: string
 }) {
   const debug = process.env.KNIGHTED_CSS_DEBUG_SASS === '1'
   const pkgResolver = createPkgResolver(cwd)
@@ -27,7 +30,7 @@ export function createSassImporter({
       }
       const containingPath = context?.containingUrl
         ? fileURLToPath(context.containingUrl)
-        : undefined
+        : entryPath
       if (resolver && shouldNormalizeSpecifier(url)) {
         const resolvedPath = await resolveAliasSpecifier(
           url,
@@ -88,9 +91,11 @@ export function createSassImporter({
 export function createLegacySassImporter({
   cwd,
   resolver,
+  entryPath,
 }: {
   cwd: string
   resolver?: CssResolver
+  entryPath?: string
 }) {
   const debug = process.env.KNIGHTED_CSS_DEBUG_SASS === '1'
   const pkgResolver = createPkgResolver(cwd)
@@ -100,7 +105,7 @@ export function createLegacySassImporter({
     prev: string,
     done?: (result: { file: string } | null) => void,
   ) => {
-    const containingPath = prev && prev !== 'stdin' ? prev : undefined
+    const containingPath = prev && prev !== 'stdin' ? prev : entryPath
     let resolvedPath: string | undefined
 
     if (resolver && shouldNormalizeSpecifier(url)) {
@@ -209,10 +214,22 @@ export function createPkgResolver(cwd: string) {
   return async (specifier: string, containingPath?: string) => {
     const importer = containingPath ?? path.join(cwd, 'index.scss')
     const resolved = resolveWithFactory(factory, specifier, importer, SASS_EXTENSIONS)
-    if (!resolved) {
+    if (resolved) {
+      return ensureSassPath(resolved) ?? resolved
+    }
+    const resolvedViaNode = resolveWithNode(specifier, importer)
+    if (!resolvedViaNode) {
       return undefined
     }
-    return ensureSassPath(resolved) ?? resolved
+    return ensureSassPath(resolvedViaNode) ?? resolvedViaNode
+  }
+}
+
+function resolveWithNode(specifier: string, importerPath: string): string | undefined {
+  try {
+    return createRequire(importerPath).resolve(specifier)
+  } catch {
+    return undefined
   }
 }
 

packages/css/test/generateTypes.test.ts

@@ -1,5 +1,6 @@
 import assert from 'node:assert/strict'
 import fs from 'node:fs/promises'
+import { createRequire } from 'node:module'
 import os from 'node:os'
 import path from 'node:path'
 import test from 'node:test'
@@ -362,13 +363,28 @@ test('generateTypes resolves hash-imports workspace package.json imports', async
   try {
     const appRoot = path.join(workspace.root, 'apps', 'hash-import-demo')
     const bridgeDir = path.join(appRoot, 'src', 'workspace-bridge')
+    const requireFromRepo = createRequire(import.meta.url)
+    const sassEntry = requireFromRepo.resolve('sass')
+    const sassPackageDir = await findPackageRoot(sassEntry)
+    const sassModuleDir = path.join(appRoot, 'node_modules', 'sass')
+    await fs.mkdir(path.dirname(sassModuleDir), { recursive: true })
+    try {
+      await fs.symlink(sassPackageDir, sassModuleDir)
+    } catch {
+      await fs.cp(sassPackageDir, sassModuleDir, { recursive: true })
+    }
+    await fs.writeFile(
+      path.join(bridgeDir, 'tokens.scss'),
+      '$accent-color: dodgerblue;\n',
+    )
     await fs.writeFile(
-      path.join(bridgeDir, 'workspace-card.css'),
-      '.knighted-demo { color: dodgerblue; }\n',
+      path.join(bridgeDir, 'workspace-card.scss'),
+      "@use 'pkg:#workspace/ui/tokens.scss' as tokens;\n\n" +
+        '.knighted-demo { color: tokens.$accent-color; }\n',
     )
     await fs.writeFile(
       path.join(appRoot, 'src', 'types-entry.ts'),
-      "import selectors from '#workspace/ui/workspace-card.css.knighted-css'\n" +
+      "import selectors from '#workspace/ui/workspace-card.scss.knighted-css'\n" +
         'console.log(selectors.demo)\n',
     )
 
@@ -378,16 +394,42 @@ test('generateTypes resolves hash-imports workspace package.json imports', async
       include: ['src'],
       outDir,
     })
-    assert.ok(result.selectorModulesWritten >= 1)
-    assert.equal(result.warnings.length, 0)
+    const unexpectedWarnings = result.warnings.filter(
+      warning =>
+        warning.includes('Unable to resolve') ||
+        warning.includes('Failed to extract CSS'),
+    )
+    assert.equal(
+      unexpectedWarnings.length,
+      0,
+      `Unexpected warnings:\n${unexpectedWarnings.join('\n')}`,
+    )
 
-    const selectorModulePath = path.join(bridgeDir, 'workspace-card.css.knighted-css.ts')
+    const selectorModulePath = path.join(bridgeDir, 'workspace-card.scss.knighted-css.ts')
     assert.equal(await pathExists(selectorModulePath), true)
   } finally {
     await workspace.cleanup()
   }
 })
 
+async function findPackageRoot(entryPath: string): Promise<string> {
+  let current = path.dirname(entryPath)
+  const { root } = path.parse(current)
+  while (true) {
+    const candidate = path.join(current, 'package.json')
+    try {
+      await fs.access(candidate)
+      return current
+    } catch {
+      // continue
+    }
+    if (current === root) {
+      throw new Error(`Unable to locate package.json for ${entryPath}`)
+    }
+    current = path.dirname(current)
+  }
+}
+
 test('generateTypes removes stale selector manifest entries when modules vanish', async () => {
   const project = await setupFixtureProject()
   try {

packages/playwright/.knighted-css-debug/selector-modules.json

@@ -0,0 +1,6 @@
+{
+  "/Users/morgan/knighted/css/packages/playwright/src/hash-imports-workspace/apps/hash-import-demo/src/workspace-bridge/hash-imports.scss": {
+    "file": "/Users/morgan/knighted/css/packages/playwright/src/hash-imports-workspace/apps/hash-import-demo/src/workspace-bridge/hash-imports.scss.knighted-css.ts",
+    "hash": "2cb05b82a4776b703d53194253d1659decddd9c7"
+  }
+}

packages/playwright/src/hash-imports-workspace/apps/hash-import-demo/src/render-hash-imports-demo.ts

@@ -1,7 +1,7 @@
 import { HASH_IMPORTS_SECTION_ID } from '../../../constants.js'
 import { createWorkspaceCard } from '#workspace/ui/workspace-card.js'
 import { knightedCss as workspaceCardCss } from '#workspace/ui/workspace-card.js?knighted-css'
-import stableSelectors from '#workspace/ui/hash-imports.css.knighted-css.js'
+import stableSelectors from '#workspace/ui/hash-imports.scss.knighted-css.js'
 
 export function renderHashImportsWorkspaceDemo(root: HTMLElement): void {
   const mount = root ?? document.body

packages/playwright/src/hash-imports-workspace/apps/hash-import-demo/src/workspace-bridge/hash-imports.scss

@@ -0,0 +1,5 @@
+@use 'pkg:#workspace/ui/tokens.scss' as tokens;
+
+.knighted-demo {
+  color: tokens.$accent-color;
+}

packages/playwright/src/hash-imports-workspace/apps/hash-import-demo/src/workspace-bridge/tokens.scss

@@ -0,0 +1 @@
+$accent-color: #1e40af;