auklet 0.0.1 → 0.0.3

package/dist/css/core/moduleStyleImportCollector.js

@@ -0,0 +1,285 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import ts from 'typescript';
+import { isArray } from 'aidly';
+import {
+  appendUniqueMapValue,
+  getSourceModuleDir,
+  SOURCE_DECLARATION_RE,
+  POSIX_SEPARATOR,
+  SOURCE_MODULE_RE,
+} from '#auklet/utils';
+const GLOBSTAR_TOKEN = '**';
+export class ModuleStyleImportCollector {
+  constructor(srcRoot, packageRoot, resolver, styleExtensions = ['.css']) {
+    this.srcRoot = srcRoot;
+    this.packageRoot = packageRoot;
+    this.resolver = resolver;
+    this.styleExtensions = styleExtensions;
+    this.sourceImportAliasRules = this.createSourceImportAliasRules();
+  }
+  collect(files, cssOptions) {
+    const entries = new Map();
+    const rules = this.createAutoImportRules(cssOptions);
+    for (const file of files) {
+      if (!SOURCE_MODULE_RE.test(file) || SOURCE_DECLARATION_RE.test(file)) {
+        continue;
+      }
+      const sourceRelative = path.relative(this.srcRoot, file);
+      const sourceDir = path.dirname(sourceRelative);
+      const sourceModuleDir = getSourceModuleDir(sourceRelative);
+      const code = fs.readFileSync(file, 'utf8');
+      const imports = this.getImportDeclarations(file, code);
+      for (const item of imports) {
+        this.collectSourceImportStyle(
+          entries,
+          sourceDir,
+          sourceModuleDir,
+          item,
+        );
+        const importPath = item.importPath;
+        const ruleMatches = this.matchAutoImportRules(rules, importPath);
+        if (!ruleMatches.length) continue;
+        const directSpecifiers = ruleMatches
+          .map((ruleMatch) =>
+            this.createDirectStyleSpecifier(ruleMatch.rule, importPath),
+          )
+          .filter((specifier) => Boolean(specifier));
+        if (directSpecifiers.length) {
+          for (const specifier of directSpecifiers) {
+            const cssFile = this.resolver.resolveStyleDependency(specifier);
+            if (fs.existsSync(cssFile)) {
+              appendUniqueMapValue(entries, sourceModuleDir, specifier);
+            }
+          }
+          continue;
+        }
+        for (const ruleMatch of ruleMatches) {
+          const importedNames = this.getImportedNames(file, item);
+          for (const importedName of importedNames) {
+            const specifier = this.createStyleSpecifier(
+              ruleMatch.rule,
+              ruleMatch.values,
+              importedName,
+            );
+            const cssFile = this.resolver.resolveStyleDependency(specifier);
+            if (!fs.existsSync(cssFile)) {
+              continue;
+            }
+            appendUniqueMapValue(entries, sourceModuleDir, specifier);
+          }
+        }
+      }
+    }
+    return entries;
+  }
+  getImportDeclarations(file, code) {
+    const imports = [];
+    const sourceFile = ts.createSourceFile(
+      file,
+      code,
+      ts.ScriptTarget.Latest,
+      false,
+      file.endsWith('.tsx') ? ts.ScriptKind.TSX : ts.ScriptKind.TS,
+    );
+    sourceFile.forEachChild((node) => {
+      if (
+        !ts.isImportDeclaration(node) ||
+        !ts.isStringLiteral(node.moduleSpecifier)
+      ) {
+        return;
+      }
+      imports.push({
+        importPath: node.moduleSpecifier.text,
+        importClause: node.importClause,
+      });
+    });
+    return imports;
+  }
+  collectSourceImportStyle(entries, sourceDir, sourceModuleDir, item) {
+    var _a;
+    if (
+      (_a = item.importClause) === null || _a === void 0
+        ? void 0
+        : _a.isTypeOnly
+    )
+      return;
+    const importedStyleEntry = this.resolveSourceImportStyleEntry(
+      sourceDir,
+      item.importPath,
+    );
+    if (!importedStyleEntry) return;
+    const sourceStyleDir = path.join(this.srcRoot, sourceModuleDir, 'style');
+    appendUniqueMapValue(
+      entries,
+      sourceModuleDir,
+      this.toRelativeSpecifier(sourceStyleDir, importedStyleEntry),
+    );
+  }
+  resolveSourceImportStyleEntry(sourceDir, importPath) {
+    const sourceRelativePath = this.resolveSourceImportPath(
+      sourceDir,
+      importPath,
+    );
+    if (!sourceRelativePath) return null;
+    const sourceBase = path.join(this.srcRoot, sourceRelativePath);
+    const directoryStyleEntry = path.join(sourceBase, 'style', 'index.css');
+    for (const extension of this.styleExtensions) {
+      const directorySourceStyle = path.join(sourceBase, `index${extension}`);
+      if (fs.existsSync(directorySourceStyle)) return directoryStyleEntry;
+    }
+    const hasFileSourceStyle = this.styleExtensions.some((extension) =>
+      fs.existsSync(`${sourceBase}${extension}`),
+    );
+    if (!hasFileSourceStyle) return null;
+    return path.join(sourceBase, 'style', 'index.css');
+  }
+  resolveSourceImportPath(sourceDir, importPath) {
+    if (importPath.startsWith('.')) {
+      return path.normalize(path.join(sourceDir, importPath));
+    }
+    for (const rule of this.sourceImportAliasRules) {
+      if (!importPath.startsWith(rule.prefix)) continue;
+      return importPath.slice(rule.prefix.length);
+    }
+    return null;
+  }
+  createSourceImportAliasRules() {
+    var _a;
+    const packageJsonPath = path.join(this.packageRoot, 'package.json');
+    if (!fs.existsSync(packageJsonPath)) return [];
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+    const rules = [];
+    for (const [name, target] of Object.entries(
+      (_a = packageJson.imports) !== null && _a !== void 0 ? _a : {},
+    )) {
+      if (
+        !name.endsWith(`${POSIX_SEPARATOR}*`) ||
+        typeof target !== 'string' ||
+        !target.includes('*')
+      ) {
+        continue;
+      }
+      rules.push({
+        prefix: name.slice(0, -1),
+      });
+    }
+    return rules;
+  }
+  toRelativeSpecifier(fromDir, file) {
+    const relative = path.relative(fromDir, file).split(path.sep).join('/');
+    return relative.startsWith('.') ? relative : `./${relative}`;
+  }
+  createAutoImportRules(cssOptions) {
+    var _a;
+    const rules = [];
+    for (const [packageName, dependency] of Object.entries(
+      (_a = cssOptions.cssDependencies) !== null && _a !== void 0 ? _a : {},
+    )) {
+      const dependencyPaths = isArray(dependency.component)
+        ? dependency.component
+        : [dependency.component].filter((value) => Boolean(value));
+      for (const dependencyPath of dependencyPaths) {
+        rules.push({
+          packageName,
+          outputPattern: this.joinDependencySpecifier(
+            packageName,
+            dependencyPath,
+          ),
+        });
+      }
+    }
+    return rules;
+  }
+  matchAutoImportRules(rules, importPath) {
+    const matches = [];
+    for (const rule of rules) {
+      if (
+        importPath !== rule.packageName &&
+        !importPath.startsWith(`${rule.packageName}${POSIX_SEPARATOR}`)
+      ) {
+        continue;
+      }
+      matches.push({
+        rule,
+        values: this.getImportPathValues(rule.packageName, importPath),
+      });
+    }
+    return matches;
+  }
+  getImportPathValues(packageName, importPath) {
+    return importPath
+      .slice(packageName.length)
+      .replace(new RegExp(`^${POSIX_SEPARATOR}`), '')
+      .split(POSIX_SEPARATOR)
+      .filter(Boolean);
+  }
+  createStyleSpecifier(rule, values, importedName) {
+    const pathValues = [...values];
+    return rule.outputPattern.replace(/\*\*|\*/g, (token) => {
+      const matchedValue = pathValues.shift();
+      if (matchedValue) return matchedValue;
+      if (token === GLOBSTAR_TOKEN) return importedName;
+      return matchedValue !== null && matchedValue !== void 0
+        ? matchedValue
+        : importedName;
+    });
+  }
+  createDirectStyleSpecifier(rule, importPath) {
+    const wildcardIndex = rule.outputPattern.indexOf('*');
+    if (wildcardIndex < 0) {
+      return null;
+    }
+    const wildcardLength = rule.outputPattern.startsWith(
+      GLOBSTAR_TOKEN,
+      wildcardIndex,
+    )
+      ? GLOBSTAR_TOKEN.length
+      : 1;
+    const prefix = rule.outputPattern.slice(0, wildcardIndex);
+    const suffix = rule.outputPattern.slice(wildcardIndex + wildcardLength);
+    if (!importPath.startsWith(prefix)) {
+      return null;
+    }
+    return `${importPath}${suffix}`;
+  }
+  joinDependencySpecifier(packageName, dependencyPath) {
+    if (!dependencyPath) return packageName;
+    if (dependencyPath.startsWith(POSIX_SEPARATOR)) {
+      return `${packageName}${dependencyPath}`;
+    }
+    return `${packageName}${POSIX_SEPARATOR}${dependencyPath}`;
+  }
+  getImportedNames(file, item) {
+    var _a;
+    const importClause = item.importClause;
+    if (!importClause || importClause.isTypeOnly) {
+      return [];
+    }
+    const names = [];
+    if (importClause.name) {
+      names.push(importClause.name.text);
+    }
+    const namedBindings = importClause.namedBindings;
+    if (!namedBindings) {
+      return names;
+    }
+    if (ts.isNamespaceImport(namedBindings)) {
+      throw new Error(
+        `Namespace import is not supported for CSS auto import: ${item.importPath}\n` +
+          `Use named imports instead, for example: import { Component } from '${item.importPath}'.\n` +
+          `File: ${file}`,
+      );
+    }
+    for (const element of namedBindings.elements) {
+      if (element.isTypeOnly) continue;
+      names.push(
+        ((_a = element.propertyName) !== null && _a !== void 0
+          ? _a
+          : element.name
+        ).text,
+      );
+    }
+    return names;
+  }
+}

package/dist/css/core/path.d.ts

@@ -0,0 +1,4 @@
+export declare function isWindowsAbsolutePath(file: string): boolean;
+export declare function normalizeCssFileKey(file: string): string;
+export declare function toCssFsSpecifier(file: string): string;
+export declare function toCssWatchPath(...parts: Array<string>): string;

package/dist/css/core/path.js

@@ -0,0 +1,26 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { toPosixPath } from '#auklet/utils';
+const WINDOWS_ABSOLUTE_PATH_RE = /^[a-zA-Z]:[\\/]/;
+export function isWindowsAbsolutePath(file) {
+  return WINDOWS_ABSOLUTE_PATH_RE.test(file);
+}
+export function normalizeCssFileKey(file) {
+  if (process.platform !== 'win32' && isWindowsAbsolutePath(file)) {
+    return toPosixPath(file);
+  }
+  const resolved = path.resolve(file);
+  const realpath = fs.existsSync(resolved)
+    ? fs.realpathSync.native(resolved)
+    : resolved;
+  return toPosixPath(realpath);
+}
+export function toCssFsSpecifier(file) {
+  return path.posix.join('/@fs', normalizeCssFileKey(file));
+}
+export function toCssWatchPath(...parts) {
+  if (parts[0] && isWindowsAbsolutePath(parts[0])) {
+    return toPosixPath(path.win32.join(...parts));
+  }
+  return toPosixPath(path.join(...parts));
+}

package/dist/css/core/styleEntry.d.ts

@@ -0,0 +1,45 @@
+import type { CssOptions } from '#auklet/types';
+export declare const STYLE_ENTRY = 'style.css';
+export declare const EXTERNAL_ENTRY = 'external.css';
+export declare const MODULE_ENTRY = 'module.css';
+export declare const THEMES_DIR = 'themes';
+export declare const THEMES_ENTRY_PREFIX = 'themes/';
+export type PackageStyleSpecifier = {
+  packageName: string;
+  stylePath: string;
+};
+export declare function groupStyleFilesByDir(
+  sourceRoot: string,
+  styleFiles: Array<string>,
+): Map<string, string[]>;
+export declare function getGlobalStyleDependencies(
+  cssOptions: CssOptions,
+): string[];
+export declare function getExternalStyleDependencies(
+  cssOptions: CssOptions,
+): string[];
+export declare function getThemeStyleDependencies(
+  cssOptions: CssOptions,
+  themeName: string,
+): string[];
+export declare function getThemeStyleEntries(cssOptions: CssOptions): {
+  themeName: string;
+  file: string;
+}[];
+export declare function resolveThemeStyleFiles(
+  cssOptions: CssOptions,
+  packageRoot: string,
+): Map<string, string>;
+export declare function createStyleFileKeySet(
+  styleFiles: Iterable<string>,
+): Set<string>;
+export declare function createStyleFileKey(styleFile: string): string;
+export declare function parsePackageStyleSpecifier(
+  specifier: string,
+): PackageStyleSpecifier | null;
+export declare function joinDependencySpecifier(
+  packageName: string,
+  dependencyPath: string,
+): string;
+export declare function createImportCode(specifiers: Array<string>): string;
+export declare function removeCssExtension(cssPath: string): string;

package/dist/css/core/styleEntry.js

@@ -0,0 +1,108 @@
+import path from 'node:path';
+import { isArray } from 'aidly';
+import { getSourceModuleDir } from '#auklet/utils';
+import { normalizeCssFileKey } from '#auklet/css/core/path';
+export const STYLE_ENTRY = 'style.css';
+export const EXTERNAL_ENTRY = 'external.css';
+export const MODULE_ENTRY = 'module.css';
+export const THEMES_DIR = 'themes';
+export const THEMES_ENTRY_PREFIX = 'themes/';
+export function groupStyleFilesByDir(sourceRoot, styleFiles) {
+  var _a;
+  const styleFilesByDir = new Map();
+  for (const styleFile of styleFiles) {
+    const sourceRelative = path.relative(sourceRoot, styleFile);
+    const sourceDir = getSourceModuleDir(sourceRelative);
+    const values =
+      (_a = styleFilesByDir.get(sourceDir)) !== null && _a !== void 0 ? _a : [];
+    values.push(styleFile);
+    styleFilesByDir.set(sourceDir, values);
+  }
+  return styleFilesByDir;
+}
+export function getGlobalStyleDependencies(cssOptions) {
+  var _a;
+  const dependencies = [];
+  for (const [packageName, dependency] of Object.entries(
+    (_a = cssOptions.cssDependencies) !== null && _a !== void 0 ? _a : {},
+  )) {
+    const globalDependencies = isArray(dependency.global)
+      ? dependency.global
+      : [dependency.global].filter((value) => Boolean(value));
+    for (const globalDependency of globalDependencies) {
+      dependencies.push(joinDependencySpecifier(packageName, globalDependency));
+    }
+  }
+  return dependencies;
+}
+export function getExternalStyleDependencies(cssOptions) {
+  return getGlobalStyleDependencies(cssOptions);
+}
+export function getThemeStyleDependencies(cssOptions, themeName) {
+  var _a, _b;
+  const dependencies = [];
+  for (const [packageName, dependency] of Object.entries(
+    (_a = cssOptions.cssDependencies) !== null && _a !== void 0 ? _a : {},
+  )) {
+    const themeDependency =
+      (_b = dependency.themes) === null || _b === void 0
+        ? void 0
+        : _b[themeName];
+    if (!themeDependency) continue;
+    dependencies.push(joinDependencySpecifier(packageName, themeDependency));
+  }
+  return dependencies;
+}
+export function getThemeStyleEntries(cssOptions) {
+  var _a;
+  return Object.entries(
+    (_a = cssOptions.themes) !== null && _a !== void 0 ? _a : {},
+  ).map(([themeName, file]) => ({
+    themeName,
+    file,
+  }));
+}
+export function resolveThemeStyleFiles(cssOptions, packageRoot) {
+  const themeFiles = new Map();
+  for (const { themeName, file } of getThemeStyleEntries(cssOptions)) {
+    themeFiles.set(themeName, path.resolve(packageRoot, file));
+  }
+  return themeFiles;
+}
+export function createStyleFileKeySet(styleFiles) {
+  return new Set(Array.from(styleFiles, normalizeCssFileKey));
+}
+export function createStyleFileKey(styleFile) {
+  return normalizeCssFileKey(styleFile);
+}
+export function parsePackageStyleSpecifier(specifier) {
+  var _a, _b, _c;
+  if (specifier.startsWith('.')) return null;
+  const parts = specifier.split('/');
+  const packageName = specifier.startsWith('@')
+    ? `${(_a = parts.shift()) !== null && _a !== void 0 ? _a : ''}/${
+        (_b = parts.shift()) !== null && _b !== void 0 ? _b : ''
+      }`
+    : (_c = parts.shift()) !== null && _c !== void 0
+    ? _c
+    : '';
+  if (!packageName) return null;
+  return {
+    packageName,
+    stylePath: parts.join('/'),
+  };
+}
+export function joinDependencySpecifier(packageName, dependencyPath) {
+  if (!dependencyPath) return packageName;
+  return dependencyPath.startsWith('/')
+    ? `${packageName}${dependencyPath}`
+    : `${packageName}/${dependencyPath}`;
+}
+export function createImportCode(specifiers) {
+  return Array.from(new Set(specifiers))
+    .map((specifier) => `@import "${specifier}";`)
+    .join('\n');
+}
+export function removeCssExtension(cssPath) {
+  return cssPath.slice(0, -path.extname(cssPath).length);
+}

package/dist/css/core/styleProcessor.d.ts

@@ -0,0 +1,16 @@
+import postcss, { type Root } from 'postcss';
+import type { ModuleCssBuildConfig } from '#auklet/types';
+import type { WorkspaceStyleResolver } from '#auklet/css/core/workspaceStyleResolver';
+export declare class StyleProcessor {
+  private readonly config;
+  private readonly resolver;
+  constructor(config: ModuleCssBuildConfig, resolver: WorkspaceStyleResolver);
+  createRoot(): postcss.Root;
+  appendImportRule(root: Root, specifier: string): void;
+  stringify(root: Root): string;
+  appendStyleContent(target: Root, content: string, from: string): void;
+  readStyleFile(cssPath: string, seen?: Set<string>): string;
+  collectImportedStyleFiles(styleFiles: Array<string>): Set<string>;
+  private parse;
+  private parseImportSpecifier;
+}

package/dist/css/core/styleProcessor.js

@@ -0,0 +1,123 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import postcss from 'postcss';
+import {
+  IMPORT_AT_RULE,
+  LINE_SEPARATOR,
+  RELATIVE_IMPORT_PREFIX,
+} from '#auklet/css/core/constants';
+export class StyleProcessor {
+  constructor(config, resolver) {
+    this.config = config;
+    this.resolver = resolver;
+  }
+  createRoot() {
+    return postcss.root();
+  }
+  appendImportRule(root, specifier) {
+    var _a;
+    const rule = postcss.atRule({
+      name: IMPORT_AT_RULE,
+      params: `"${specifier}"`,
+    });
+    if ((_a = root.nodes) === null || _a === void 0 ? void 0 : _a.length)
+      rule.raws.before = LINE_SEPARATOR;
+    root.append(rule);
+    root.raws.semicolon = true;
+  }
+  stringify(root) {
+    root.raws.semicolon = true;
+    return `${root}${LINE_SEPARATOR}`;
+  }
+  appendStyleContent(target, content, from) {
+    var _a, _b, _c;
+    const root = this.parse(content, from);
+    if (
+      ((_a = target.nodes) === null || _a === void 0 ? void 0 : _a.length) &&
+      ((_b = root.nodes) === null || _b === void 0 ? void 0 : _b[0])
+    ) {
+      root.nodes[0].raws.before = LINE_SEPARATOR;
+    }
+    target.append(...((_c = root.nodes) !== null && _c !== void 0 ? _c : []));
+  }
+  readStyleFile(cssPath, seen = new Set()) {
+    var _a;
+    if (!fs.existsSync(cssPath)) {
+      return '';
+    }
+    const normalizedPath = path.resolve(cssPath);
+    if (seen.has(normalizedPath)) return '';
+    seen.add(normalizedPath);
+    const css = fs.readFileSync(cssPath, 'utf8');
+    const root = this.parse(css, cssPath);
+    const imports = [];
+    root.walkAtRules(IMPORT_AT_RULE, (rule) => {
+      const specifier = this.parseImportSpecifier(rule.params);
+      if (specifier) imports.push({ rule, specifier });
+    });
+    for (const { rule, specifier } of imports) {
+      const importedPath = this.resolver.resolveStyleDependency(
+        specifier,
+        path.dirname(cssPath),
+      );
+      if (!importedPath) continue;
+      const content = this.readStyleFile(importedPath, seen);
+      if (!content.trim()) {
+        rule.remove();
+        continue;
+      }
+      rule.replaceWith(
+        ...((_a = this.parse(content, importedPath).nodes) !== null &&
+        _a !== void 0
+          ? _a
+          : []),
+      );
+    }
+    return root.toString();
+  }
+  collectImportedStyleFiles(styleFiles) {
+    const imported = new Set();
+    for (const styleFile of styleFiles) {
+      const css = fs.readFileSync(styleFile, 'utf8');
+      const root = this.parse(css, styleFile);
+      root.walkAtRules(IMPORT_AT_RULE, (rule) => {
+        const specifier = this.parseImportSpecifier(rule.params);
+        if (
+          !(specifier === null || specifier === void 0
+            ? void 0
+            : specifier.startsWith(RELATIVE_IMPORT_PREFIX)) ||
+          !this.config.styleExtensions.includes(path.extname(specifier))
+        ) {
+          return;
+        }
+        imported.add(path.resolve(path.dirname(styleFile), specifier));
+      });
+    }
+    return imported;
+  }
+  parse(code, from) {
+    // Keep parsing behind one method so future style languages can transform
+    // to CSS before PostCSS reads the final stylesheet.
+    return postcss.parse(code, { from });
+  }
+  parseImportSpecifier(params) {
+    const value = params.trim();
+    const first = value[0];
+    if (first === '"' || first === "'") {
+      const end = value.indexOf(first, 1);
+      return end > 0 ? value.slice(1, end) : null;
+    }
+    if (!value.startsWith('url(')) {
+      return null;
+    }
+    const end = value.indexOf(')', 4);
+    if (end < 0) return null;
+    const url = value.slice(4, end).trim();
+    const quote = url[0];
+    if (quote === '"' || quote === "'") {
+      const quoteEnd = url.indexOf(quote, 1);
+      return quoteEnd > 0 ? url.slice(1, quoteEnd) : null;
+    }
+    return url || null;
+  }
+}

package/dist/css/core/workspaceStyleResolver.d.ts

@@ -0,0 +1,18 @@
+import type {
+  ModuleCssBuildConfig,
+  ResolvedModuleCssBuildContext,
+} from '#auklet/types';
+export declare class WorkspaceStyleResolver {
+  private readonly config;
+  private readonly context;
+  private readonly require;
+  constructor(
+    config: ModuleCssBuildConfig,
+    context: ResolvedModuleCssBuildContext,
+  );
+  resolveStyleDependency(specifier: string, fromDir?: string): string;
+  toOutputStyleSpecifier(specifier: string, outRoot: string): string;
+  toExternalStyleSpecifier(specifier: string, outRoot: string): string;
+  private getStylePathOutputFormat;
+  private parsePackageStyleSpecifier;
+}