evolit 0.1.2 → 0.1.4

package/README.md

@@ -46,6 +46,22 @@ Generated applications declare `"@/*": ["./*"]` in `jsconfig.json`, so editors a
 use the same convention. An explicit `@/*` mapping in `jsconfig.json` or `tsconfig.json` takes
 priority when an application needs a different source root.
 
+### Package CSS and static assets
+
+Applications can import stylesheets exposed through package `exports` in the same way as local
+stylesheets:
+
+```js
+import "@scope/design-system/tokens.css";
+import "@scope/design-system/theme.css";
+```
+
+Evolit resolves package subpaths with ESM `import` conditions, emits exported CSS through the
+route static-asset pipeline, and adds the resulting stylesheet URLs to the rendered document.
+Relative `@import` rules and `url(...)` references inside package CSS are emitted and rewritten
+from their location within `node_modules`. Bare package imports that resolve to JavaScript continue
+to use the shared vendor runtime; CSS and other static assets do not enter vendor chunks.
+
 ## Commands
 
 ```sh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evolit",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A convention-driven application framework for LitSX and web components.",
   "type": "module",
   "packageManager": "yarn@4.10.3",
@@ -42,7 +42,7 @@
     "start": "node ./src/cli.js start",
     "test": "node --test test/*.test.js",
     "test:browser": "playwright test",
-    "typecheck": "litsx-tsc -p jsconfig.json --noEmit",
+    "typecheck": "tsc -p jsconfig.json --noEmit",
     "release:check": "yarn test && yarn typecheck && yarn pack --dry-run"
   },
   "keywords": [
@@ -59,10 +59,9 @@
   },
   "dependencies": {
     "@jridgewell/remapping": "^2.3.5",
-    "@litsx/compiler": "1.0.0-next.8",
-    "@litsx/core": "1.0.0-next.5",
-    "@litsx/ssr": "1.0.0-next.3",
-    "@litsx/typescript": "^0.9.0",
+    "@litsx/compiler": "1.0.0-next.12",
+    "@litsx/core": "1.0.0-next.8",
+    "@litsx/ssr": "1.0.0-next.5",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "lit": "^3.3.3",

package/src/client-assets.js

@@ -144,11 +144,36 @@ export async function resolvePackageRoot(packageName, options = {}) {
   }
 
   const pendingResolution = (async () => {
-    let packageEntryPath;
-    try {
-      packageEntryPath = createRequire(path.join(resolveFrom, "package.json")).resolve(packageName);
-    } catch {
-      packageEntryPath = requireFromHere.resolve(packageName);
+    const resolvers = [
+      createRequire(path.join(resolveFrom, "package.json")),
+      requireFromHere,
+    ];
+
+    for (const resolver of resolvers) {
+      try {
+        const packageJsonPath = resolver.resolve(`${packageName}/package.json`);
+        const packageJson = JSON.parse(await fs.readFile(packageJsonPath, "utf8"));
+        if (packageJson?.name === packageName) {
+          return { packageRoot: path.dirname(packageJsonPath), packageJson };
+        }
+      } catch {
+        // Some packages intentionally do not export package.json. Resolve the
+        // entrypoint below and walk back to its owning manifest instead.
+      }
+    }
+
+    let packageEntryPath = null;
+    let resolutionError = null;
+    for (const resolver of resolvers) {
+      try {
+        packageEntryPath = resolver.resolve(packageName);
+        break;
+      } catch (error) {
+        resolutionError = error;
+      }
+    }
+    if (!packageEntryPath) {
+      throw resolutionError ?? new Error(`Unable to resolve package entry for ${packageName}`);
     }
     let currentPath = path.dirname(packageEntryPath);
 
@@ -190,6 +215,14 @@ function pickBrowserExportTarget(target) {
     return target;
   }
 
+  if (Array.isArray(target)) {
+    for (const candidate of target) {
+      const resolved = pickBrowserExportTarget(candidate);
+      if (resolved) return resolved;
+    }
+    return null;
+  }
+
   if (!target || typeof target !== "object") {
     return null;
   }
@@ -202,6 +235,33 @@ function pickBrowserExportTarget(target) {
     ?? null;
 }
 
+function resolveBrowserPackageExport(exportsField, exportKey) {
+  if (typeof exportsField === "string" || Array.isArray(exportsField)) {
+    return exportKey === "." ? pickBrowserExportTarget(exportsField) : null;
+  }
+  if (!exportsField || typeof exportsField !== "object") {
+    return null;
+  }
+  if (!Object.keys(exportsField).some((key) => key.startsWith("."))) {
+    return exportKey === "." ? pickBrowserExportTarget(exportsField) : null;
+  }
+  if (exportsField[exportKey] != null) {
+    return pickBrowserExportTarget(exportsField[exportKey]);
+  }
+
+  for (const [pattern, target] of Object.entries(exportsField)) {
+    const wildcardIndex = pattern.indexOf("*");
+    if (wildcardIndex < 0) continue;
+    const prefix = pattern.slice(0, wildcardIndex);
+    const suffix = pattern.slice(wildcardIndex + 1);
+    if (!exportKey.startsWith(prefix) || !exportKey.endsWith(suffix)) continue;
+    const wildcard = exportKey.slice(prefix.length, exportKey.length - suffix.length);
+    const resolved = pickBrowserExportTarget(target);
+    if (resolved) return resolved.replace("*", wildcard);
+  }
+  return null;
+}
+
 export async function resolveBrowserSpecifierFilePath(specifier, options = {}) {
   if (!isBareSpecifier(specifier)) {
     return null;
@@ -222,17 +282,15 @@ export async function resolveBrowserSpecifierFilePath(specifier, options = {}) {
     const { packageName, subpath } = parsedSpecifier;
     const { packageRoot, packageJson } = await resolvePackageRoot(packageName, { projectRoot: resolveFrom });
     const exportKey = subpath.length > 0 ? `./${subpath}` : ".";
-    const exportsField = packageJson.exports;
-    const exportTarget = pickBrowserExportTarget(
-      exportsField && typeof exportsField === "object" && Object.keys(exportsField).some((key) => key.startsWith("."))
-        ? exportsField[exportKey]
-        : exportKey === "." ? exportsField : null,
-    );
-    const fallbackTarget = subpath.length > 0
-      ? `./${subpath}`
-      : typeof packageJson.browser === "string"
-        ? packageJson.browser
-        : packageJson.module ?? packageJson.main ?? null;
+    const hasExports = packageJson.exports != null;
+    const exportTarget = resolveBrowserPackageExport(packageJson.exports, exportKey);
+    const fallbackTarget = hasExports
+      ? null
+      : subpath.length > 0
+        ? `./${subpath}`
+        : typeof packageJson.browser === "string"
+          ? packageJson.browser
+          : packageJson.module ?? packageJson.main ?? null;
     let resolvedTarget = exportTarget ?? fallbackTarget;
     if (resolvedTarget && packageJson.browser && typeof packageJson.browser === "object") {
       const normalizedTarget = resolvedTarget.startsWith("./")

package/src/compiler.js

@@ -19,6 +19,7 @@ import { ensureDirectory } from "./fs-utils.js";
 
 const MODULE_SPECIFIER_PATTERN =
   /\b(?:import|export)\s+(?:[^"']*?\s+from\s+)?["']([^"']+)["']|\bimport\s*\(\s*["']([^"']+)["']\s*\)/g;
+const CSS_DEPENDENCY_PATTERN = /(?:@import\s+(?:url\(\s*)?["']([^"']+)["']\s*\)?|url\(\s*["']?([^"')]+)["']?\s*\))/g;
 const RESOLVABLE_IMPORT_EXTENSIONS = [
   ...MODULE_EXTENSIONS,
   ...STATIC_ASSET_EXTENSIONS,
@@ -497,7 +498,8 @@ function createStaticAssetStubSource(relativeAssetPath, mode, target = "server",
 }
 
 async function resolveImportPath(importerPath, specifier) {
-  const basePath = path.resolve(path.dirname(importerPath), specifier);
+  const cleanSpecifier = String(specifier).split("?")[0].split("#")[0];
+  const basePath = path.resolve(path.dirname(importerPath), cleanSpecifier);
   const candidates = [basePath];
 
   if (!hasResolvableImportExtension(basePath)) {
@@ -521,6 +523,29 @@ async function resolveImportPath(importerPath, specifier) {
   return null;
 }
 
+async function collectStaticAssetGraph(entryPath, collected = new Set()) {
+  const normalizedEntryPath = path.resolve(entryPath);
+  if (collected.has(normalizedEntryPath) || !isStaticAssetPath(normalizedEntryPath)) {
+    return collected;
+  }
+
+  collected.add(normalizedEntryPath);
+  if (!isStyleAssetPath(normalizedEntryPath)) {
+    return collected;
+  }
+
+  const source = await fs.readFile(normalizedEntryPath, "utf8");
+  for (const match of source.matchAll(CSS_DEPENDENCY_PATTERN)) {
+    const specifier = match[1] ?? match[2];
+    if (!specifier || !isRelativeSpecifier(specifier)) continue;
+    const resolvedPath = await resolveImportPath(normalizedEntryPath, specifier);
+    if (resolvedPath && isStaticAssetPath(resolvedPath)) {
+      await collectStaticAssetGraph(resolvedPath, collected);
+    }
+  }
+  return collected;
+}
+
 async function loadProjectPathAliases(projectRoot) {
   if (projectPathAliasesCache.has(projectRoot)) return projectPathAliasesCache.get(projectRoot);
   const pending = (async () => {
@@ -660,12 +685,15 @@ async function resolveProjectPackageImport(projectRoot, importerPath, specifier)
     try {
       const packageJson = JSON.parse(await fs.readFile(path.join(packageRoot, "package.json"), "utf8"));
       const exportKey = parsed.subpath ? `./${parsed.subpath}` : ".";
+      const hasExports = packageJson.exports != null;
       let target = resolvePackageExports(packageJson.exports, exportKey)
-        ?? (parsed.subpath
-          ? `./${parsed.subpath}`
-          : typeof packageJson.browser === "string"
-            ? packageJson.browser
-            : packageJson.module ?? packageJson.main);
+        ?? (hasExports
+          ? null
+          : parsed.subpath
+            ? `./${parsed.subpath}`
+            : typeof packageJson.browser === "string"
+              ? packageJson.browser
+              : packageJson.module ?? packageJson.main);
       if (target && packageJson.browser && typeof packageJson.browser === "object") {
         const normalizedTarget = target.startsWith("./") ? target : `./${target}`;
         const browserTarget = packageJson.browser[normalizedTarget]
@@ -828,8 +856,19 @@ async function rewriteRelativeSpecifiers({
     const aliasedImportPath = isBareSpecifier(specifier)
       ? await resolveProjectMappedImport(projectRoot, sourcePath, specifier)
       : null;
+    const packageImportPath = isBareSpecifier(specifier) && !aliasedImportPath
+      ? await resolveProjectPackageImport(projectRoot, sourcePath, specifier)
+      : null;
+    const packageAssetPath = packageImportPath && isStaticAssetPath(packageImportPath)
+      ? packageImportPath
+      : null;
 
-    if (target === "client" && isBareSpecifier(specifier) && !aliasedImportPath) {
+    if (
+      target === "client"
+      && isBareSpecifier(specifier)
+      && !aliasedImportPath
+      && !packageAssetPath
+    ) {
       const sourceMetadata = moduleMetadata.get(sourcePath) ?? {
         moduleImports: new Set(),
         vendorImports: new Set(),
@@ -841,11 +880,13 @@ async function rewriteRelativeSpecifiers({
       continue;
     }
 
-    if (!isRelativeSpecifier(specifier) && !aliasedImportPath) {
+    if (!isRelativeSpecifier(specifier) && !aliasedImportPath && !packageAssetPath) {
       continue;
     }
 
-    const resolvedImportPath = aliasedImportPath ?? await resolveImportPath(sourcePath, specifier);
+    const resolvedImportPath = packageAssetPath
+      ?? aliasedImportPath
+      ?? await resolveImportPath(sourcePath, specifier);
     if (!resolvedImportPath) {
       continue;
     }
@@ -875,7 +916,10 @@ async function rewriteRelativeSpecifiers({
         );
       }
     } else if (isStaticAssetPath(resolvedImportPath)) {
-      staticAssetFiles?.add(resolvedImportPath);
+      const staticAssetGraph = await collectStaticAssetGraph(resolvedImportPath);
+      for (const staticAssetPath of staticAssetGraph) {
+        staticAssetFiles?.add(staticAssetPath);
+      }
       const relativeAssetPath = toOutputRelativePath(projectRoot, resolvedImportPath);
       const assetOutputPath = path.join(outputRoot, relativeAssetPath);
       const stubOutputPath = `${assetOutputPath}.mjs`;
@@ -888,8 +932,14 @@ async function rewriteRelativeSpecifiers({
       );
 
       if (target === "client") {
-        await ensureDirectory(path.dirname(assetOutputPath));
-        await fs.copyFile(resolvedImportPath, assetOutputPath);
+        for (const staticAssetPath of staticAssetGraph) {
+          const staticAssetOutputPath = path.join(
+            outputRoot,
+            toOutputRelativePath(projectRoot, staticAssetPath),
+          );
+          await ensureDirectory(path.dirname(staticAssetOutputPath));
+          await fs.copyFile(staticAssetPath, staticAssetOutputPath);
+        }
         const sourceMetadata = moduleMetadata.get(sourcePath) ?? {
           moduleImports: new Set(),
           vendorImports: new Set(),
@@ -1239,8 +1289,6 @@ export async function compileModuleGraph(entryPath, options = {}) {
   }
 }
 
-const CSS_DEPENDENCY_PATTERN = /(?:@import\s+(?:url\(\s*)?["']([^"']+)["']\s*\)?|url\(\s*["']?([^"')]+)["']?\s*\))/g;
-
 function normalizeProjectRelativePath(projectRoot, filePath) {
   return toOutputRelativePath(projectRoot, filePath).split(path.sep).join("/");
 }
@@ -1406,8 +1454,13 @@ export async function emitClientStaticAssets(assetPaths, options = {}) {
   const outputRoot = getTypedOutputRoot(projectRoot, mode, "client");
   const emitted = [];
 
+  const expandedAssetPaths = new Set();
   for (const assetPath of new Set(assetPaths ?? [])) {
     if (!isStaticAssetPath(assetPath)) continue;
+    await collectStaticAssetGraph(assetPath, expandedAssetPaths);
+  }
+
+  for (const assetPath of expandedAssetPaths) {
     const relativePath = normalizeProjectRelativePath(projectRoot, assetPath);
     const outputPath = path.join(outputRoot, relativePath.split("/").join(path.sep));
     await ensureDirectory(path.dirname(outputPath));

package/src/scaffold.js

@@ -23,14 +23,13 @@ async function writeSitePackageJson(targetDirectory, siteName) {
       dev: "evolit dev",
       build: "evolit build",
       start: "evolit start",
-      typecheck: "litsx-tsc -p jsconfig.json --noEmit",
+      typecheck: "tsc -p jsconfig.json --noEmit",
     },
     dependencies: {
-      "@litsx/core": "1.0.0-next.5",
+      "@litsx/core": "1.0.0-next.8",
       evolit: frameworkVersion,
     },
     devDependencies: {
-      "@litsx/typescript": "^0.9.0",
       "typescript": "^6.0.0",
     },
   };

package/templates/default/jsconfig.json

@@ -13,12 +13,7 @@
       "@/*": [
         "./*"
       ]
-    },
-    "plugins": [
-      {
-        "name": "@litsx/typescript"
-      }
-    ]
+    }
   },
   "include": [
     "app/**/*",