refactor: make imports "type": "module" ready (#2978)

- also renamed .mocharc.js to cjs
- should reduce the noise significantly when doing the migration

packages/build-tools/src/index.ts

@@ -1,5 +1,8 @@
-export { processUrlDependencies } from './process-url-dependencies';
-export { hasImportedSideEffects, collectImportsWithSideEffects } from './has-imported-side-effects';
-export { sortModulesByDepth } from './sort-modules-by-depth';
-export { loadStylableConfig, loadStylableConfigEsm } from './load-stylable-config';
-export { CalcDepthContext, calcDepth, getCSSViewModule } from './calc-depth';
+export { processUrlDependencies } from './process-url-dependencies.js';
+export {
+    hasImportedSideEffects,
+    collectImportsWithSideEffects,
+} from './has-imported-side-effects.js';
+export { sortModulesByDepth } from './sort-modules-by-depth.js';
+export { loadStylableConfig, loadStylableConfigEsm } from './load-stylable-config.js';
+export { CalcDepthContext, calcDepth, getCSSViewModule } from './calc-depth.js';

packages/cli/src/base-generator.ts

@@ -4,8 +4,8 @@ import type { Stylable } from '@stylable/core';
 import { STSymbol } from '@stylable/core/dist/index-internal';
 import camelcase from 'lodash.camelcase';
 import upperfirst from 'lodash.upperfirst';
-import { normalizeRelative, ensureDirectory, tryRun } from './build-tools';
-import { createDefaultLogger, Log } from './logger';
+import { normalizeRelative, ensureDirectory, tryRun } from './build-tools.js';
+import { createDefaultLogger, Log } from './logger.js';
 
 export interface ReExports {
     root: string;

packages/cli/src/build-single-file.ts

@@ -8,14 +8,14 @@ import { generateDTSContent, generateDTSSourceMap } from '@stylable/module-utils
 import { StylableOptimizer } from '@stylable/optimizer';
 import type { IFileSystem } from '@file-services/types';
 import { hasImportedSideEffects, processUrlDependencies } from '@stylable/build-tools';
-import { ensureDirectory, tryRun } from './build-tools';
-import { nameTemplate } from './name-template';
-import type { Log } from './logger';
-import { DiagnosticsManager, DiagnosticsMode } from './diagnostics-manager';
-import type { CLIDiagnostic } from './report-diagnostics';
-import { errorMessages } from './messages';
-import type { ModuleFormats } from './types';
-import { fileToDataUri } from './file-to-data-uri';
+import { ensureDirectory, tryRun } from './build-tools.js';
+import { nameTemplate } from './name-template.js';
+import type { Log } from './logger.js';
+import { DiagnosticsManager, DiagnosticsMode } from './diagnostics-manager.js';
+import type { CLIDiagnostic } from './report-diagnostics.js';
+import { errorMessages } from './messages.js';
+import type { ModuleFormats } from './types.js';
+import { fileToDataUri } from './file-to-data-uri.js';
 
 export interface BuildCommonOptions {
     fullOutDir: string;

packages/cli/src/build-stylable.ts

@@ -1,18 +1,18 @@
 import { nodeFs } from '@file-services/node';
 import { Stylable, StylableConfig } from '@stylable/core';
 import { StylableResolverCache, validateDefaultConfig } from '@stylable/core/dist/index-internal';
-import { build } from './build';
-import { projectsConfig, resolveConfig } from './config/projects-config';
+import { build } from './build.js';
+import { projectsConfig, resolveConfig } from './config/projects-config.js';
 import {
     createBuildIdentifier,
     createDefaultOptions,
     hasStylableCSSOutput,
-} from './config/resolve-options';
-import { DiagnosticsManager } from './diagnostics-manager';
-import { createDefaultLogger, levels } from './logger';
-import type { BuildContext, BuildOptions } from './types';
-import { WatchHandler } from './watch-handler';
-import { createWatchService } from './watch-service';
+} from './config/resolve-options.js';
+import { DiagnosticsManager } from './diagnostics-manager.js';
+import { createDefaultLogger, levels } from './logger.js';
+import type { BuildContext, BuildOptions } from './types.js';
+import { WatchHandler } from './watch-handler.js';
+import { createWatchService } from './watch-service.js';
 
 export interface BuildStylableContext
     extends Partial<Pick<BuildContext, 'fs' | 'watch' | 'log'>>,

packages/cli/src/build.ts

@@ -1,20 +1,20 @@
 import { fixRelativeUrls, tryCollectImportsDeep } from '@stylable/core/dist/index-internal';
-import type { BuildContext, BuildOptions, ModuleFormats } from './types';
-import { IndexGenerator as BaseIndexGenerator } from './base-generator';
-import { generateManifest } from './generate-manifest';
-import { handleAssets } from './handle-assets';
-import { buildSingleFile, removeBuildProducts } from './build-single-file';
-import { DirectoryProcessService } from './directory-process-service/directory-process-service';
-import { DiagnosticsManager } from './diagnostics-manager';
-import type { CLIDiagnostic } from './report-diagnostics';
-import { tryRun } from './build-tools';
-import { errorMessages, buildMessages } from './messages';
+import type { BuildContext, BuildOptions, ModuleFormats } from './types.js';
+import { IndexGenerator as BaseIndexGenerator } from './base-generator.js';
+import { generateManifest } from './generate-manifest.js';
+import { handleAssets } from './handle-assets.js';
+import { buildSingleFile, removeBuildProducts } from './build-single-file.js';
+import { DirectoryProcessService } from './directory-process-service/directory-process-service.js';
+import { DiagnosticsManager } from './diagnostics-manager.js';
+import type { CLIDiagnostic } from './report-diagnostics.js';
+import { tryRun } from './build-tools.js';
+import { errorMessages, buildMessages } from './messages.js';
 import postcss from 'postcss';
 import { sortModulesByDepth } from '@stylable/build-tools';
 import { StylableOptimizer } from '@stylable/optimizer';
 import type { Stylable } from '@stylable/core';
 import type { IFileSystem } from '@file-services/types';
-import { createWatchService } from './watch-service';
+import { createWatchService } from './watch-service.js';
 
 export function build(
     {

packages/cli/src/cli-codemod.ts

@@ -1,16 +1,16 @@
 #!/usr/bin/env node
 
-import fs from '@file-services/node';
+import { nodeFs as fs } from '@file-services/node';
 import { resolve } from 'path';
 import yargs from 'yargs';
-import { codeMods } from './code-mods/code-mods';
+import { codeMods } from './code-mods/code-mods.js';
 import {
     loadExternalCodemods,
     loadBuiltInCodemods,
     registeredMods,
-} from './code-mods/load-codemods';
-import { createLogger } from './logger';
-import type { CodeMod } from './code-mods/types';
+} from './code-mods/load-codemods.js';
+import { createLogger } from './logger.js';
+import type { CodeMod } from './code-mods/types.js';
 
 const argv = yargs
     .option('rootDir', {

packages/cli/src/cli.ts

@@ -1,8 +1,12 @@
 #!/usr/bin/env node
 import { nodeFs as fs } from '@file-services/node';
-import { buildStylable } from './build-stylable';
-import { createDefaultOptions, getCliArguments, resolveCliOptions } from './config/resolve-options';
-import { createLogger } from './logger';
+import { buildStylable } from './build-stylable.js';
+import {
+    createDefaultOptions,
+    getCliArguments,
+    resolveCliOptions,
+} from './config/resolve-options.js';
+import { createLogger } from './logger.js';
 
 const argv = getCliArguments();
 const { resolve } = fs;

packages/cli/src/code-format.ts

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 import yargs from 'yargs';
-import fs from '@file-services/node';
+import { nodeFs as fs } from '@file-services/node';
 import { getDocumentFormatting, formatCSS } from '@stylable/code-formatter';
-import { createLogger } from './logger';
+import { createLogger } from './logger.js';
 
 const { join, writeFileSync } = fs;
 

packages/cli/src/code-mods/apply-code-mods.ts

@@ -1,6 +1,6 @@
 import { Diagnostic, Diagnostics } from '@stylable/core';
 import postcss, { parse, CssSyntaxError } from 'postcss';
-import type { CodeMod, ApplyCodeModsResult } from './types';
+import type { CodeMod, ApplyCodeModsResult } from './types.js';
 
 export function applyCodeMods(
     filePath: string,

packages/cli/src/code-mods/code-mods.ts

@@ -1,8 +1,8 @@
 import { FileSystem, findFiles } from '@stylable/node';
-import { applyCodeMods } from './apply-code-mods';
+import { applyCodeMods } from './apply-code-mods.js';
 import { relative, join } from 'path';
-import type { ApplyCodeModsResult, ApplyCodeModsSuccess, CodeMod } from './types';
-import type { Log } from '../logger';
+import type { ApplyCodeModsResult, ApplyCodeModsSuccess, CodeMod } from './types.js';
+import type { Log } from '../logger.js';
 import type { Diagnostic } from '@stylable/core';
 
 export interface CodeModsOptions {

packages/cli/src/code-mods/load-codemods.ts

@@ -1,10 +1,10 @@
-import type { CodeMod } from './types';
-import type { Log } from '../logger';
+import type { CodeMod } from './types.js';
+import type { Log } from '../logger.js';
 
 // Builtin codemods
-import { stImportToAtImport } from './st-import-to-at-import';
-import { stGlobalCustomPropertyToAtProperty } from './st-global-custom-property-to-at-property';
-import { namespaceToStNamespace } from './namespace-to-st-namespace';
+import { stImportToAtImport } from './st-import-to-at-import.js';
+import { stGlobalCustomPropertyToAtProperty } from './st-global-custom-property-to-at-property.js';
+import { namespaceToStNamespace } from './namespace-to-st-namespace.js';
 
 export const registeredMods: Map<string, CodeMod> = new Map([
     ['st-import-to-at-import', stImportToAtImport],

packages/cli/src/code-mods/namespace-to-st-namespace.ts

@@ -1,6 +1,6 @@
 import { STNamespace } from '@stylable/core/dist/index-internal';
 import type * as postcss from 'postcss';
-import type { CodeMod } from './types';
+import type { CodeMod } from './types.js';
 
 export const namespaceToStNamespace: CodeMod = ({ ast }) => {
     let changed = false;

packages/cli/src/code-mods/st-global-custom-property-to-at-property.ts

@@ -1,7 +1,7 @@
 import { CSSVarSymbol, Diagnostics, validateCustomPropertyName } from '@stylable/core';
 import { CSSCustomProperty } from '@stylable/core/dist/index-internal';
 import type { AtRule } from 'postcss';
-import type { CodeMod } from './types';
+import type { CodeMod } from './types.js';
 
 export const stGlobalCustomPropertyToAtProperty: CodeMod = ({ ast, diagnostics, postcss }) => {
     let changed = false;

packages/cli/src/code-mods/st-import-to-at-import.ts

@@ -1,5 +1,5 @@
 import { parsePseudoImport, createAtImportProps } from '@stylable/core/dist/index-internal';
-import type { CodeMod } from './types';
+import type { CodeMod } from './types.js';
 
 export const stImportToAtImport: CodeMod = ({ ast, diagnostics, postcss }) => {
     let changed = false;

packages/cli/src/config/process-projects.ts

@@ -6,8 +6,8 @@ import type {
     ProjectEntryValue,
     ProjectEntryValues,
     RawProjectEntity,
-} from '../types';
-import { createDefaultOptions, mergeBuildOptions, validateOptions } from './resolve-options';
+} from '../types.js';
+import { createDefaultOptions, mergeBuildOptions, validateOptions } from './resolve-options.js';
 
 interface ProcessProjectsOptions {
     defaultOptions?: BuildOptions;

packages/cli/src/config/projects-config.ts

@@ -1,6 +1,6 @@
 import { loadStylableConfig } from '@stylable/build-tools';
-import type { BuildOptions } from '../types';
-import { tryRun } from '../build-tools';
+import type { BuildOptions } from '../types.js';
+import { tryRun } from '../build-tools.js';
 import type {
     Configuration,
     ConfigurationProvider,
@@ -9,10 +9,10 @@ import type {
     ResolveProjectsContext,
     ResolveRequests,
     STCProjects,
-} from '../types';
-import { processProjects } from './process-projects';
-import { createDefaultOptions, mergeBuildOptions, validateOptions } from './resolve-options';
-import { resolveNpmRequests } from './resolve-requests';
+} from '../types.js';
+import { processProjects } from './process-projects.js';
+import { createDefaultOptions, mergeBuildOptions, validateOptions } from './resolve-options.js';
+import { resolveNpmRequests } from './resolve-requests.js';
 import type { StylableConfig } from '@stylable/core';
 import type { IFileSystem } from '@file-services/types';
 

packages/cli/src/config/resolve-options.ts

@@ -1,9 +1,9 @@
 import { nodeFs } from '@file-services/node';
 import type { Arguments } from 'yargs';
 import yargs from 'yargs';
-import { createGenerator } from '../build';
-import { removeUndefined } from '../helpers';
-import type { CliArguments, BuildOptions, PartialBuildOptions } from '../types';
+import { createGenerator } from '../build.js';
+import { removeUndefined } from '../helpers.js';
+import type { CliArguments, BuildOptions, PartialBuildOptions } from '../types.js';
 
 const { join } = nodeFs;
 

packages/cli/src/config/resolve-requests.ts

@@ -1,10 +1,10 @@
-import fs from '@file-services/node';
+import { nodeFs as fs } from '@file-services/node';
 import {
     INpmPackage,
     resolveWorkspacePackages,
     sortPackagesByDepth,
 } from '@wixc3/resolve-directory-context';
-import type { RawProjectEntity, ResolveRequests } from '../types';
+import type { RawProjectEntity, ResolveRequests } from '../types.js';
 
 export const resolveNpmRequests: ResolveRequests = (entities, { rootDir }) => {
     const entitiesMap = new Map<string, RawProjectEntity>();

packages/cli/src/diagnostics-manager.ts

@@ -1,5 +1,5 @@
-import { createDefaultLogger, Log } from './logger';
-import { CLIDiagnostic, DiagnosticMessages, reportDiagnostics } from './report-diagnostics';
+import { createDefaultLogger, Log } from './logger.js';
+import { CLIDiagnostic, DiagnosticMessages, reportDiagnostics } from './report-diagnostics.js';
 
 export type DiagnosticsMode = 'strict' | 'loose';
 

packages/cli/src/directory-process-service/directory-process-service.ts

@@ -1,6 +1,6 @@
 import type { IFileSystem, IWatchEvent } from '@file-services/types';
-import { createWatchEvent, type WatchService } from '../watch-service';
-import { directoryDeepChildren, DirectoryItem } from './walk-fs';
+import { createWatchEvent, type WatchService } from '../watch-service.js';
+import { directoryDeepChildren, DirectoryItem } from './walk-fs.js';
 
 export interface DirectoryProcessServiceOptions {
     processFiles?(

packages/cli/src/generate-manifest.ts

@@ -1,7 +1,7 @@
 import type { Stylable } from '@stylable/core';
 import { dirname, relative } from 'path';
-import { ensureDirectory, tryRun } from './build-tools';
-import type { Log } from './logger';
+import { ensureDirectory, tryRun } from './build-tools.js';
+import type { Log } from './logger.js';
 
 export function generateManifest(
     rootDir: string,

packages/cli/src/handle-assets.ts

@@ -1,5 +1,5 @@
 import type { IFileSystem } from '@file-services/types';
-import { ensureDirectory } from './build-tools';
+import { ensureDirectory } from './build-tools.js';
 
 export function handleAssets(
     assets: Set<string>,

packages/cli/src/index.ts

@@ -1,11 +1,11 @@
-export { build } from './build';
-export { Log, createLogger } from './logger';
+export { build } from './build.js';
+export { Log, createLogger } from './logger.js';
 export {
     IndexGenerator,
     IndexGeneratorParameters,
     ReExports,
     reExportsAllSymbols,
-} from './base-generator';
+} from './base-generator.js';
 export {
     BuildOptions,
     Configuration,
@@ -14,16 +14,16 @@ export {
     ResolveRequests,
     typedConfiguration,
     stcConfig,
-} from './types';
-export { resolveConfig } from './config/projects-config';
-export type { WatchHandler } from './watch-handler';
-export { DiagnosticsManager } from './diagnostics-manager';
+} from './types.js';
+export { resolveConfig } from './config/projects-config.js';
+export type { WatchHandler } from './watch-handler.js';
+export { DiagnosticsManager } from './diagnostics-manager.js';
 export {
     DirectoryProcessService,
     DirectoryProcessServiceOptions,
-} from './directory-process-service/directory-process-service';
-export { STCBuilder } from './stc-builder';
-export { BuildStylableContext, buildStylable } from './build-stylable';
-export { buildDTS } from './build-single-file';
-export type { CodeMod } from './code-mods/types';
-export { createWatchService, createWatchEvent, type WatchService } from './watch-service';
+} from './directory-process-service/directory-process-service.js';
+export { STCBuilder } from './stc-builder.js';
+export { BuildStylableContext, buildStylable } from './build-stylable.js';
+export { buildDTS } from './build-single-file.js';
+export type { CodeMod } from './code-mods/types.js';
+export { createWatchService, createWatchEvent, type WatchService } from './watch-service.js';

packages/cli/src/report-diagnostics.ts

@@ -1,5 +1,5 @@
 import type { Diagnostic } from '@stylable/core';
-import { levels, Log } from './logger';
+import { levels, Log } from './logger.js';
 
 export interface CLIDiagnostic extends Diagnostic {
     line?: number;

packages/cli/src/stc-builder.ts

@@ -1,17 +1,17 @@
 import { nodeFs } from '@file-services/node';
-import { buildStylable } from './build-stylable';
-import { DiagnosticsManager } from './diagnostics-manager';
-import { createLogger, Log } from './logger';
+import { buildStylable } from './build-stylable.js';
+import { DiagnosticsManager } from './diagnostics-manager.js';
+import { createLogger, Log } from './logger.js';
 import type { IFileSystem } from '@file-services/types';
-import type { DiagnosticMessages } from './report-diagnostics';
-import type { STCProjects } from './types';
-import type { WatchHandler } from './watch-handler';
+import type { DiagnosticMessages } from './report-diagnostics.js';
+import type { STCProjects } from './types.js';
+import type { WatchHandler } from './watch-handler.js';
 import {
     DiagnosticsMode,
     EmitDiagnosticsContext,
     reportDiagnostic,
 } from '@stylable/core/dist/index-internal';
-import { createWatchEvent } from './watch-service';
+import { createWatchEvent } from './watch-service.js';
 
 export type STCBuilderFileSystem = Pick<IFileSystem, 'existsSync' | 'realpathSync' | 'join'>;
 

packages/cli/src/types.ts

@@ -1,9 +1,9 @@
 import type { IFileSystem } from '@file-services/types';
 import type { Stylable } from '@stylable/core';
-import type { IndexGenerator } from './base-generator';
-import type { DiagnosticsManager, DiagnosticsMode } from './diagnostics-manager';
-import type { Log } from './logger';
-import type { WatchService } from './watch-service';
+import type { IndexGenerator } from './base-generator.js';
+import type { DiagnosticsManager, DiagnosticsMode } from './diagnostics-manager.js';
+import type { Log } from './logger.js';
+import type { WatchService } from './watch-service.js';
 
 export type PartialBuildOptions = Partial<BuildOptions>;