@wular/pnext 0.0.3 → 0.0.6

package/src/compat/css/sass.ts

@@ -16,66 +16,67 @@
 // `sass` is an optionalDependency; when absent the module degrades to core's behavior (empty CSS, empty
 // map) so a non-sass app is never broken by loading compat.
 
-import { createRequire } from 'node:module';
-import { existsSync, readFileSync } from 'node:fs';
-import path from 'node:path';
-import { resolveImport } from '../../resolve/imports';
-import { nextCssSource } from './modules';
+import { createRequire } from 'node:module'
+import { existsSync, readFileSync } from 'node:fs'
+import path from 'node:path'
+import { resolveImport } from '../../resolve/imports'
+import { nextCssSource } from './modules'
+import { escapeRegex } from '../../utils/code'
 
 // Structural typing of the slice of the Dart Sass JS API we use. Avoids a hard
 // type dependency on the optional `sass` package (mirrors how css.ts/runtime.ts
 // type postcss/sharp via local structural shapes).
 interface SassCompileOptions {
-  loadPaths?: string[];
-  style?: 'expanded' | 'compressed';
-  syntax?: 'scss' | 'indented' | 'css';
-  sourceMap?: boolean;
+  loadPaths?: string[]
+  style?: 'expanded' | 'compressed'
+  syntax?: 'scss' | 'indented' | 'css'
+  sourceMap?: boolean
 }
 interface SassCompileResult {
-  css: string;
+  css: string
 }
 interface SassApi {
-  compile: (path: string, options?: SassCompileOptions) => SassCompileResult;
-  compileString: (source: string, options?: SassCompileOptions) => SassCompileResult;
+  compile: (path: string, options?: SassCompileOptions) => SassCompileResult
+  compileString: (source: string, options?: SassCompileOptions) => SassCompileResult
 }
 
-const sassApis = new Map<string, SassApi | null>();
+const sassApis = new Map<string, SassApi | null>()
 
 /** Resolve the optional `sass` package once, from the project root. */
 function loadSass(root: string): SassApi | undefined {
-  const cacheKey = path.resolve(root);
-  if (sassApis.has(cacheKey)) return sassApis.get(cacheKey) ?? undefined;
+  const cacheKey = path.resolve(root)
+  if (sassApis.has(cacheKey)) return sassApis.get(cacheKey) ?? undefined
   // eslint-disable-next-line turbo/no-undeclared-env-vars
   const roots = [root, path.resolve(import.meta.dirname, '../../..'), process.env.PNEXT_NEXTJS_REPO]
     .filter(
       (candidate): candidate is string => typeof candidate === 'string' && candidate.length > 0,
     )
-    .map(candidate => path.join(path.resolve(candidate), 'package.json'));
+    .map(candidate => path.join(path.resolve(candidate), 'package.json'))
 
   for (const packageJson of roots) {
     try {
-      const appRequire = createRequire(packageJson);
-      const sass = appRequire('sass') as SassApi;
-      sassApis.set(cacheKey, sass);
-      return sass;
+      const appRequire = createRequire(packageJson)
+      const sass = appRequire('sass') as SassApi
+      sassApis.set(cacheKey, sass)
+      return sass
     } catch {
       // Try the next resolution root.
     }
   }
 
   // Not installed / not resolvable — degrade to core's empty-module behavior.
-  sassApis.set(cacheKey, null);
-  return undefined;
+  sassApis.set(cacheKey, null)
+  return undefined
 }
 
 /** True for `.scss` / `.sass` (module or global). */
 export function isSassFile(file: string): boolean {
-  return /\.(?:scss|sass)$/.test(file);
+  return /\.(?:scss|sass)$/.test(file)
 }
 
 /** True for `.module.scss` / `.module.sass`. */
 export function isSassModuleFile(file: string): boolean {
-  return /\.module\.(?:scss|sass)$/.test(file);
+  return /\.module\.(?:scss|sass)$/.test(file)
 }
 
 /**
@@ -88,17 +89,17 @@ export function isSassModuleFile(file: string): boolean {
  * empty-module behavior) so the bundle still succeeds.
  */
 export function compileSassCss(file: string, root: string, includePaths: string[] = []): string {
-  file = nextCssSource(file, root);
-  const sass = loadSass(root);
-  if (!sass) return '';
+  file = nextCssSource(file, root)
+  const sass = loadSass(root)
+  if (!sass) return ''
   const compiled = sass.compile(file, {
     loadPaths: [path.dirname(file), ...includePaths],
     style: 'expanded',
     syntax: file.endsWith('.sass') ? 'indented' : 'scss',
-  }).css;
+  }).css
 
-  if (!isSassModuleFile(file)) return compiled;
-  return transformCssModule(compiled, file, root, includePaths);
+  if (!isSassModuleFile(file)) return compiled
+  return transformCssModule(compiled, file, root, includePaths)
 }
 
 /**
@@ -112,16 +113,16 @@ export function sassModuleMapping(
   root: string,
   includePaths: string[] = [],
 ): Record<string, string> {
-  file = nextCssSource(file, root);
-  const sass = loadSass(root);
-  if (!sass) return {};
+  file = nextCssSource(file, root)
+  const sass = loadSass(root)
+  if (!sass) return {}
   const compiled = sass.compile(file, {
     loadPaths: [path.dirname(file), ...includePaths],
     style: 'expanded',
     syntax: file.endsWith('.sass') ? 'indented' : 'scss',
-  }).css;
+  }).css
 
-  return cssModuleMappingFromSource(compiled, file, root, includePaths);
+  return cssModuleMappingFromSource(compiled, file, root, includePaths)
 }
 
 // ---------------------------------------------------------------------------
@@ -129,14 +130,14 @@ export function sassModuleMapping(
 // ---------------------------------------------------------------------------
 
 interface ComposeRef {
-  names: string[];
-  from?: string;
+  names: string[]
+  from?: string
 }
 
 interface CssModuleInfo {
-  classes: Set<string>;
-  composes: Map<string, ComposeRef[]>;
-  dependencies: string[];
+  classes: Set<string>
+  composes: Map<string, ComposeRef[]>
+  dependencies: string[]
 }
 
 function cssModuleMappingFromSource(
@@ -145,15 +146,15 @@ function cssModuleMappingFromSource(
   root: string,
   includePaths: string[],
 ): Record<string, string> {
-  const cache = new Map<string, CssModuleInfo>();
-  const info = moduleInfoFromSource(source, file, root);
-  cache.set(path.resolve(file), info);
+  const cache = new Map<string, CssModuleInfo>()
+  const info = moduleInfoFromSource(source, file, root)
+  cache.set(path.resolve(file), info)
   return Object.fromEntries(
     [...info.classes].map(className => [
       className,
       classValue(file, className, root, includePaths, cache, new Set()),
     ]),
-  );
+  )
 }
 
 function transformCssModule(
@@ -162,10 +163,10 @@ function transformCssModule(
   root: string,
   _includePaths: string[],
 ): string {
-  const info = moduleInfoFromSource(source, file, root);
-  const imports = info.dependencies.map(dep => `@import ${JSON.stringify(dep)};`).join('\n');
-  const css = scopeKeyframes(rewriteModuleSelectors(stripComposes(source), file), file);
-  return [imports, css].filter(Boolean).join('\n');
+  const info = moduleInfoFromSource(source, file, root)
+  const imports = info.dependencies.map(dep => `@import ${JSON.stringify(dep)};`).join('\n')
+  const css = scopeKeyframes(rewriteModuleSelectors(stripComposes(source), file), file)
+  return [imports, css].filter(Boolean).join('\n')
 }
 
 function moduleInfo(
@@ -174,56 +175,56 @@ function moduleInfo(
   includePaths: string[],
   cache: Map<string, CssModuleInfo>,
 ): CssModuleInfo {
-  const key = path.resolve(file);
-  const cached = cache.get(key);
-  if (cached) return cached;
+  const key = path.resolve(file)
+  const cached = cache.get(key)
+  if (cached) return cached
   const source = isSassFile(key)
     ? compileSassCssSource(key, root, includePaths)
-    : readFileSync(key, 'utf8');
-  const info = moduleInfoFromSource(source, key, root);
-  cache.set(key, info);
-  return info;
+    : readFileSync(key, 'utf8')
+  const info = moduleInfoFromSource(source, key, root)
+  cache.set(key, info)
+  return info
 }
 
 function compileSassCssSource(file: string, root: string, includePaths: string[]): string {
-  const sass = loadSass(root);
-  if (!sass) return '';
+  const sass = loadSass(root)
+  if (!sass) return ''
   return sass.compile(file, {
     loadPaths: [path.dirname(file), ...includePaths],
     style: 'expanded',
     syntax: file.endsWith('.sass') ? 'indented' : 'scss',
-  }).css;
+  }).css
 }
 
 function moduleInfoFromSource(source: string, file: string, root: string): CssModuleInfo {
-  const classes = cssClassNames(source);
-  const composes = new Map<string, ComposeRef[]>();
-  const dependencies: string[] = [];
-  const seenDependencies = new Set<string>();
-  const rulePattern = /(^|})([^{}]+)\{([^{}]*)\}/g;
-  let match: RegExpExecArray | null;
+  const classes = cssClassNames(source)
+  const composes = new Map<string, ComposeRef[]>()
+  const dependencies: string[] = []
+  const seenDependencies = new Set<string>()
+  const rulePattern = /(^|})([^{}]+)\{([^{}]*)\}/g
+  let match: RegExpExecArray | null
 
   while ((match = rulePattern.exec(source))) {
-    const [, , selector, body] = match;
-    if (!selector || !body) continue;
-    const localClasses = selectorClassNames(selector).filter(className => classes.has(className));
-    if (localClasses.length === 0) continue;
+    const [, , selector, body] = match
+    if (!selector || !body) continue
+    const localClasses = selectorClassNames(selector).filter(className => classes.has(className))
+    if (localClasses.length === 0) continue
 
     for (const ref of composeRefs(body)) {
       for (const localClass of localClasses) {
-        const refs = composes.get(localClass) ?? [];
-        refs.push(ref);
-        composes.set(localClass, refs);
+        const refs = composes.get(localClass) ?? []
+        refs.push(ref)
+        composes.set(localClass, refs)
       }
-      if (!ref.from || ref.from === 'global') continue;
-      const dependency = resolveCssModuleImport(root, file, ref.from);
-      if (!dependency || seenDependencies.has(dependency)) continue;
-      dependencies.push(dependency);
-      seenDependencies.add(dependency);
+      if (!ref.from || ref.from === 'global') continue
+      const dependency = resolveCssModuleImport(root, file, ref.from)
+      if (!dependency || seenDependencies.has(dependency)) continue
+      dependencies.push(dependency)
+      seenDependencies.add(dependency)
     }
   }
 
-  return { classes, composes, dependencies };
+  return { classes, composes, dependencies }
 }
 
 function classValue(
@@ -234,139 +235,140 @@ function classValue(
   cache: Map<string, CssModuleInfo>,
   stack: Set<string>,
 ): string {
-  const key = `${path.resolve(file)}\0${className}`;
-  if (stack.has(key)) return cssModuleClassName(file, className);
-  stack.add(key);
+  const key = `${path.resolve(file)}\0${className}`
+  if (stack.has(key)) return cssModuleClassName(file, className)
+  stack.add(key)
 
-  const info = moduleInfo(file, root, includePaths, cache);
-  const parts = [cssModuleClassName(file, className)];
+  const info = moduleInfo(file, root, includePaths, cache)
+  const parts = [cssModuleClassName(file, className)]
   for (const ref of info.composes.get(className) ?? []) {
     if (ref.from === 'global') {
-      parts.push(...ref.names);
-      continue;
+      parts.push(...ref.names)
+      continue
     }
-    const refFile = ref.from ? resolveCssModuleImport(root, file, ref.from) : file;
-    if (!refFile) continue;
-    const refInfo = moduleInfo(refFile, root, includePaths, cache);
+    const refFile = ref.from ? resolveCssModuleImport(root, file, ref.from) : file
+    if (!refFile) continue
+    const refInfo = moduleInfo(refFile, root, includePaths, cache)
     for (const name of ref.names) {
-      if (!refInfo.classes.has(name)) continue;
-      parts.push(...classValue(refFile, name, root, includePaths, cache, stack).split(/\s+/));
+      if (!refInfo.classes.has(name)) continue
+      parts.push(...classValue(refFile, name, root, includePaths, cache, stack).split(/\s+/))
     }
   }
 
-  stack.delete(key);
-  return [...new Set(parts)].join(' ');
+  stack.delete(key)
+  return [...new Set(parts)].join(' ')
 }
 
 function composeRefs(body: string): ComposeRef[] {
-  const refs: ComposeRef[] = [];
-  const pattern = /\bcomposes\s*:\s*([^;]+);/g;
-  let match: RegExpExecArray | null;
+  const refs: ComposeRef[] = []
+  const pattern = /\bcomposes\s*:\s*([^;]+);/g
+  let match: RegExpExecArray | null
 
   while ((match = pattern.exec(body))) {
-    const value = match[1]?.trim();
-    if (!value) continue;
-    const fromMatch = /^(.+?)\s+from\s+(['"]?)([^'"]+)\2$/.exec(value);
-    const names = (fromMatch?.[1] ?? value).split(/\s+/).filter(Boolean);
-    if (names.length === 0) continue;
-    refs.push({ names, ...(fromMatch?.[3] ? { from: fromMatch[3] } : {}) });
+    const value = match[1]?.trim()
+    if (!value) continue
+    const fromMatch = /^(.+?)\s+from\s+(['"]?)([^'"]+)\2$/.exec(value)
+    const names = (fromMatch?.[1] ?? value).split(/\s+/).filter(Boolean)
+    if (names.length === 0) continue
+    refs.push({ names, ...(fromMatch?.[3] ? { from: fromMatch[3] } : {}) })
   }
 
-  return refs;
+  return refs
 }
 
-function resolveCssModuleImport(root: string, fromFile: string, specifier: string): string | undefined {
-  const resolved = resolveImport(root, fromFile, specifier);
-  if (resolved && isCssModuleFile(resolved)) return path.resolve(resolved);
-  if (specifier.startsWith('.') || path.isAbsolute(specifier)) return undefined;
-
-  const sibling = path.resolve(path.dirname(fromFile), specifier);
-  return existsSync(sibling) && isCssModuleFile(sibling) ? sibling : undefined;
+function resolveCssModuleImport(
+  root: string,
+  fromFile: string,
+  specifier: string,
+): string | undefined {
+  const resolved = resolveImport(root, fromFile, specifier)
+  if (resolved && isCssModuleFile(resolved)) return path.resolve(resolved)
+  if (specifier.startsWith('.') || path.isAbsolute(specifier)) return undefined
+
+  const sibling = path.resolve(path.dirname(fromFile), specifier)
+  return existsSync(sibling) && isCssModuleFile(sibling) ? sibling : undefined
 }
 
 function isCssModuleFile(file: string): boolean {
-  return /\.module\.(?:css|scss|sass)$/.test(file);
+  return /\.module\.(?:css|scss|sass)$/.test(file)
 }
 
 function stripComposes(source: string): string {
-  return source.replace(/\s*composes\s*:[^;{}]+;/g, '');
+  return source.replace(/\s*composes\s*:[^;{}]+;/g, '')
 }
 
 function rewriteModuleSelectors(css: string, file: string): string {
   return css.replace(/(^|})([^{}]+)\{/g, (match, boundary: string, selector: string) => {
-    if (selector.trimStart().startsWith('@')) return match;
-    let out = selector;
+    if (selector.trimStart().startsWith('@')) return match
+    let out = selector
     for (const className of selectorClassNames(selector)) {
-      out = rewriteClassSelector(out, cssModuleClassName(file, className), className);
+      out = rewriteClassSelector(out, cssModuleClassName(file, className), className)
     }
-    return `${boundary}${out}{`;
-  });
+    return `${boundary}${out}{`
+  })
 }
 
 function cssClassNames(source: string): Set<string> {
-  return new Set(selectorClassNames(source.replace(/\{[^{}]*\}/g, '{')));
+  return new Set(selectorClassNames(source.replace(/\{[^{}]*\}/g, '{')))
 }
 
 function selectorClassNames(selector: string): string[] {
-  const classNames: string[] = [];
-  const classPattern = /(^|[\s,>+~])\.(-?[_a-zA-Z][\w-]*)/g;
-  let match: RegExpExecArray | null;
+  const classNames: string[] = []
+  const classPattern = /(^|[\s,>+~])\.(-?[_a-zA-Z][\w-]*)/g
+  let match: RegExpExecArray | null
   while ((match = classPattern.exec(selector))) {
-    if (match[2]) classNames.push(match[2]);
+    if (match[2]) classNames.push(match[2])
   }
-  return classNames;
+  return classNames
 }
 
 function cssModuleClassName(file: string, className: string): string {
   const base = path
     .basename(file)
     .replace(/\.module\.(?:css|scss|sass)$/, '')
-    .replace(/[^_a-zA-Z0-9]/g, '_');
-  const hash = pathHash(cssModuleScopePath(file));
-  return `${base}_${className}_${hash}`;
+    .replace(/[^_a-zA-Z0-9]/g, '_')
+  const hash = pathHash(cssModuleScopePath(file))
+  return `${base}_${className}_${hash}`
 }
 
 function scopeKeyframes(css: string, file: string): string {
-  let out = css;
+  let out = css
   for (const name of keyframeNames(css)) {
-    const scoped = cssModuleClassName(file, name);
+    const scoped = cssModuleClassName(file, name)
     out = out.replace(
       new RegExp(`(@(?:-webkit-)?keyframes\\s+)${escapeRegex(name)}(?![-_a-zA-Z0-9])`, 'g'),
       `$1${scoped}`,
-    );
+    )
     out = out.replace(
-      new RegExp(
-        `(animation-name\\s*:\\s*)${escapeRegex(name)}(?![-_a-zA-Z0-9])`,
-        'g',
-      ),
+      new RegExp(`(animation-name\\s*:\\s*)${escapeRegex(name)}(?![-_a-zA-Z0-9])`, 'g'),
       `$1${scoped}`,
-    );
+    )
     out = out.replace(
       new RegExp(
         `(animation\\s*:[^;{}]*?(?<![-_a-zA-Z0-9]))${escapeRegex(name)}(?![-_a-zA-Z0-9])`,
         'g',
       ),
       `$1${scoped}`,
-    );
+    )
   }
-  return out;
+  return out
 }
 
 function keyframeNames(css: string): Set<string> {
-  const names = new Set<string>();
-  const pattern = /@(?:-webkit-)?keyframes\s+(-?[_a-zA-Z][\w-]*)/g;
-  let match: RegExpExecArray | null;
+  const names = new Set<string>()
+  const pattern = /@(?:-webkit-)?keyframes\s+(-?[_a-zA-Z][\w-]*)/g
+  let match: RegExpExecArray | null
   while ((match = pattern.exec(css))) {
-    if (match[1]) names.add(match[1]);
+    if (match[1]) names.add(match[1])
   }
-  return names;
+  return names
 }
 
 function cssModuleScopePath(file: string): string {
-  const normalized = file.split(path.sep).join('/');
-  const appIndex = normalized.lastIndexOf('/app/');
-  if (appIndex !== -1) return normalized.slice(appIndex + 1);
-  return normalized.split('/').slice(-3).join('/');
+  const normalized = file.split(path.sep).join('/')
+  const appIndex = normalized.lastIndexOf('/app/')
+  if (appIndex !== -1) return normalized.slice(appIndex + 1)
+  return normalized.split('/').slice(-3).join('/')
 }
 
 function rewriteClassSelector(
@@ -377,16 +379,12 @@ function rewriteClassSelector(
   const esbuildNamePattern = new RegExp(
     `\\.${escapeRegex(originalClassName)}(?![-_a-zA-Z0-9])`,
     'g',
-  );
-  return css.replace(esbuildNamePattern, `.${scopedClassName}`);
+  )
+  return css.replace(esbuildNamePattern, `.${scopedClassName}`)
 }
 
 function pathHash(file: string): string {
-  let hash = 5381;
-  for (const char of file) hash = ((hash << 5) + hash) ^ char.charCodeAt(0);
-  return (hash >>> 0).toString(36).slice(0, 5);
-}
-
-function escapeRegex(value: string): string {
-  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  let hash = 5381
+  for (const char of file) hash = ((hash << 5) + hash) ^ char.charCodeAt(0)
+  return (hash >>> 0).toString(36).slice(0, 5)
 }

package/src/compat/css/styled-jsx-runtime.ts

@@ -7,27 +7,27 @@
 //     the registry and renders nothing; the app flushes `registry.styles()` through
 //     useServerInsertedHTML so the rules land in the streamed document head. On the client the registry
 //     mirrors new rules into document.head imperatively, matching styled-jsx's client runtime.
-import { createContext, h, type ComponentChildren } from 'preact';
-import { useContext } from 'preact/hooks';
+import { createContext, h, type ComponentChildren } from 'preact'
+import { useContext } from 'preact/hooks'
 
 interface StyleProps {
-  id: string;
-  children?: ComponentChildren;
+  id: string
+  children?: ComponentChildren
 }
 
 export class PNextStyleRegistry {
-  private rules = new Map<string, string>();
+  private rules = new Map<string, string>()
 
   add(id: string, css: string): void {
-    if (this.rules.has(id)) return;
-    this.rules.set(id, css);
+    if (this.rules.has(id)) return
+    this.rules.set(id, css)
     if (typeof document !== 'undefined') {
-      const domId = `__jsx-${id}`;
+      const domId = `__jsx-${id}`
       if (!document.getElementById(domId)) {
-        const element = document.createElement('style');
-        element.id = domId;
-        element.textContent = css;
-        document.head.appendChild(element);
+        const element = document.createElement('style')
+        element.id = domId
+        element.textContent = css
+        document.head.appendChild(element)
       }
     }
   }
@@ -36,45 +36,45 @@ export class PNextStyleRegistry {
   styles() {
     return [...this.rules.entries()].map(([id, css]) =>
       h('style', { id: `__jsx-${id}`, key: `__jsx-${id}` }, css),
-    );
+    )
   }
 
   flush(): void {
-    this.rules.clear();
+    this.rules.clear()
   }
 }
 
-const StyleRegistryContext = createContext<PNextStyleRegistry | undefined>(undefined);
+const StyleRegistryContext = createContext<PNextStyleRegistry | undefined>(undefined)
 
 export function createStyleRegistry(): PNextStyleRegistry {
-  return new PNextStyleRegistry();
+  return new PNextStyleRegistry()
 }
 
 export function StyleRegistry({
   registry,
   children,
 }: {
-  registry?: PNextStyleRegistry;
-  children?: ComponentChildren;
+  registry?: PNextStyleRegistry
+  children?: ComponentChildren
 }) {
-  return h(StyleRegistryContext.Provider, { value: registry ?? createStyleRegistry() }, children);
+  return h(StyleRegistryContext.Provider, { value: registry ?? createStyleRegistry() }, children)
 }
 
 export function useStyleRegistry(): PNextStyleRegistry | undefined {
-  return useContext(StyleRegistryContext);
+  return useContext(StyleRegistryContext)
 }
 
 export function style({ id, children }: StyleProps) {
-  const registry = useContext(StyleRegistryContext);
+  const registry = useContext(StyleRegistryContext)
   if (registry) {
-    registry.add(id, childrenToCss(children));
-    return null;
+    registry.add(id, childrenToCss(children))
+    return null
   }
-  return h('style', { id: `__jsx-${id}` }, children);
+  return h('style', { id: `__jsx-${id}` }, children)
 }
 
 function childrenToCss(children: ComponentChildren): string {
-  if (typeof children === 'string' || typeof children === 'number') return String(children);
-  if (Array.isArray(children)) return children.map(childrenToCss).join('');
-  return '';
+  if (typeof children === 'string' || typeof children === 'number') return String(children)
+  if (Array.isArray(children)) return children.map(childrenToCss).join('')
+  return ''
 }