@servicetitan/startup 36.3.1 → 36.4.0

package/src/webpack/__tests__/create-webpack-config-shared-dependencies.test.ts

@@ -11,19 +11,18 @@ import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 import yargs from 'yargs';
+import { getLaunchDarklySdkVersion } from '../../core';
 import {
     getFolders,
     getPackageData,
     getPackages,
     getTsConfig,
-    isCustomStyleRules,
     isExposeSharedDependencies,
     loadSharedDependencies,
     log,
     pick,
 } from '../../utils';
 import { miniCssPluginStyleRules } from '../__mocks__';
-import { getLaunchDarklySdkVersion } from '../configs/utils/get-launchdarkly-sdk-version';
 import { createWebpackConfig } from '../index';
 import { getModuleEntryPath } from '../utils';
 
@@ -50,11 +49,17 @@ jest.mock('../../utils', () => ({
     getPackageData: jest.fn(),
     getPackages: jest.fn(),
     getTsConfig: jest.fn(),
-    isCustomStyleRules: jest.fn(),
     isExposeSharedDependencies: jest.fn(),
     loadSharedDependencies: jest.fn(),
 }));
-jest.mock('../configs/utils/get-launchdarkly-sdk-version');
+/*
+ * Mock get-version (not core) because internal modules import from get-version
+ * directly. Mocking the core barrel doesn't intercept those internal imports.
+ */
+jest.mock('../../core/get-version', () => ({
+    ...jest.requireActual('../../core/get-version'),
+    getLaunchDarklySdkVersion: jest.fn(),
+}));
 jest.mock('../utils', () => ({
     ...jest.requireActual('../utils'),
     getCallerFile: jest.fn(),
@@ -91,7 +96,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     }
 
     beforeEach(() => {
-        overrides = { plugins: { MiniCssExtractPlugin: { attributes: { foo: 'bar' } } } };
+        overrides = {
+            configuration: { mode: 'development' },
+            plugins: { MiniCssExtractPlugin: { attributes: { foo: 'bar' } } },
+        };
         options = { name: 'app' };
 
         jest.resetAllMocks();
@@ -120,6 +128,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         jest.mocked(getPackageManager).mockReturnValue({
             command: 'npm',
             lockFileName: 'package-lock.json',
+            getLockFilePath: jest.fn().mockReturnValue(undefined),
             getResolvedVersion: jest.fn().mockReturnValue(undefined),
             getWorkspacePackage: jest.fn().mockReturnValue(''),
         } as any);
@@ -207,7 +216,13 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         });
 
         describe('when package has custom style rules', () => {
-            beforeEach(() => jest.mocked(isCustomStyleRules).mockReturnValue(true));
+            beforeEach(() => {
+                vol.fromJSON({
+                    'package.json': JSON.stringify({
+                        cli: { webpack: { 'custom-style-rules': true } },
+                    }),
+                });
+            });
 
             test('does not configure MiniCssExtractPlugin plugin', () => {
                 expect(subject().plugins).not.toContainEqual(
@@ -258,7 +273,13 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             test('configures HtmlWebpackTagsPlugin plug', () => {
                 expect(subject().plugins).toContainEqual(
                     new HtmlWebpackTagsPlugin({
-                        tags: [...entryPoints.css, ...entryPoints.js].map(name => `shared/${name}`),
+                        tags: [
+                            ...entryPoints.css.map(name => ({
+                                path: `shared/${name}`,
+                                attributes: { crossorigin: 'anonymous' },
+                            })),
+                            ...entryPoints.js.map(name => `shared/${name}`),
+                        ],
                         append: false,
                     })
                 );
@@ -289,9 +310,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 expect(plugins).toContainEqual(
                     new VirtualModulesPlugin({
                         [(entry as EntryObject)?.['design-system'] as string]: [
-                            `@import '~@servicetitan/tokens/core/tokens.css';`,
-                            `@import '~@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';`,
-                            `@import '~@servicetitan/design-system/dist/system.min.css';`,
+                            `@import '@servicetitan/tokens/core/tokens.css';`,
+                            `@import '@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';`,
+                            `@import '@servicetitan/design-system/dist/system.min.css';`,
                         ].join('\n'),
                     })
                 );
@@ -329,12 +350,12 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             });
 
             describe('with custom "output.path"', () => {
-                const output = { path: path.resolve(process.cwd(), 'foo') };
+                const outputBasePath = path.resolve(process.cwd(), 'foo');
 
-                beforeEach(() => (options = { emitExposedDependencies: { output } }));
+                beforeEach(() => (options!.outputBasePath = outputBasePath));
 
                 test('use custom "output.path"', () => {
-                    expect(subject().output?.path).toBe(path.join(output.path, 'shared'));
+                    expect(subject().output?.path).toBe(path.join(outputBasePath, 'shared'));
                 });
             });
 
@@ -374,7 +395,12 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             });
 
             describe('with package-lock.json', () => {
-                beforeEach(() => volumeFromJSON({ '../package-lock.json': {} }));
+                beforeEach(() => {
+                    volumeFromJSON({ '../package-lock.json': {} });
+                    jest.mocked(getPackageManager().getLockFilePath).mockReturnValue(
+                        path.resolve('../package-lock.json')
+                    );
+                });
 
                 test('configures "cache.buildDependencies"', () => {
                     expect(subject().cache).toEqual(

package/src/webpack/__tests__/create-webpack-config-web-component.test.ts

@@ -6,7 +6,7 @@ import { DefinePlugin } from 'webpack';
 import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 import yargs from 'yargs';
-import { webpackDevConfigFileName, webpackProdConfigFileName } from '../../cli/utils';
+import { generateMetadata } from '../../core';
 import {
     getFolders,
     getPackageData,
@@ -16,7 +16,7 @@ import {
     isWebComponent,
 } from '../../utils';
 import { miniCssPluginStyleRules } from '../__mocks__';
-import { generateMetadata } from '../configs/utils';
+import { webpackDevConfigFileName, webpackProdConfigFileName } from '../create-webpack-config';
 import { createWebpackConfig } from '../index';
 import { getCallerFile, splitByEntry } from '../utils';
 
@@ -42,7 +42,7 @@ jest.mock('../../utils', () => ({
     isLegacyRoot: jest.fn(),
     isWebComponent: jest.fn(),
 }));
-jest.mock('../configs/utils/generate-metadata');
+jest.mock('../../core/metadata/generate-metadata');
 jest.mock('../utils', () => ({
     ...jest.requireActual('../utils'),
     getCallerFile: jest.fn(),
@@ -57,22 +57,22 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     const tsConfig = 'tsconfig.build.json';
     const designSystemPath = () => path.join(process.cwd(), `${destination}/design-system.css`);
     const designSystemCode = [
-        `@import '~@servicetitan/tokens/core/tokens.css';`,
-        `@import '~@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';`,
-        `@import '~@servicetitan/design-system/dist/system.min.css';`,
+        `@import '@servicetitan/tokens/core/tokens.css';`,
+        `@import '@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';`,
+        `@import '@servicetitan/design-system/dist/system.min.css';`,
     ].join('\n');
 
     const indexPath = () => path.join(process.cwd(), `${destination}/index`);
     const indexCode = ({
-        embed = false,
+        light = false,
         legacyRoot = false,
         designSystem,
-    }: { embed?: boolean; legacyRoot?: boolean; designSystem?: boolean } = {}) =>
+    }: { light?: boolean; legacyRoot?: boolean; designSystem?: boolean } = {}) =>
         [
-            ...(designSystem ? [`require('./design-system.css');`] : []),
+            ...(designSystem ? [`import './design-system.css';`] : []),
             `import { register } from '@servicetitan/web-components';`,
             `import { App } from './app';`,
-            `register(App, ${embed}, { legacyRoot: ${legacyRoot}, sharedDependenciesNames: ${JSON.stringify(Object.keys(sharedDependencies))} });`,
+            `register(App, ${light}, { legacyRoot: ${legacyRoot}, sharedDependenciesNames: ${JSON.stringify(Object.keys(sharedDependencies))} });`,
         ].join('\n');
 
     let overrides: Parameters<typeof createWebpackConfig>[0];
@@ -86,6 +86,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
     beforeEach(() => {
         overrides = {
+            configuration: { mode: 'development' },
             plugins: {
                 HtmlWebpackPlugin: { favicon: 'foo' },
                 MiniCssExtractPlugin: { attributes: { foo: 'bar' } },
@@ -331,13 +332,13 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             });
         });
 
-        describe('when embed option is set to true', () => {
-            beforeEach(() => (options.embed = true));
+        describe('when light option is set to true', () => {
+            beforeEach(() => (options.light = true));
 
-            test(`omits design system and registers App with embed set to true`, () => {
+            test(`omits design system and registers App with light set to true`, () => {
                 expect(subject().plugins).toContainEqual(
                     new VirtualModulesPlugin({
-                        [indexPath()]: indexCode({ designSystem: false, embed: true }),
+                        [indexPath()]: indexCode({ designSystem: false, light: true }),
                     })
                 );
             });
@@ -366,7 +367,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                     expect(subject().plugins).toContainEqual(
                         new VirtualModulesPlugin({
                             [designSystemPath()]: designSystemCode,
-                            [indexPath()]: indexCode({ designSystem: true, embed: true }),
+                            [indexPath()]: indexCode({ designSystem: true, light: true }),
                         })
                     );
                 });
@@ -380,7 +381,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 expect(subject().plugins).toContainEqual(
                     new VirtualModulesPlugin({
                         [indexPath()]: [
-                            "import { registerHeadless } from '@servicetitan/web-components';",
+                            "import { registerHeadless } from '@servicetitan/web-components/register-headless';",
                             "import { connectedCallback, disconnectedCallback } from './headless';",
                             'registerHeadless(connectedCallback, disconnectedCallback);',
                         ].join('\n'),

package/src/webpack/__tests__/create-webpack-config.test.ts

@@ -20,7 +20,6 @@ import {
     getPackages,
     getTsConfig,
     getWebpackConfiguration,
-    isCustomStyleRules,
     isDevServerDisabled,
     isWebComponent,
     loadSharedDependencies,
@@ -62,7 +61,6 @@ jest.mock('../../utils', () => ({
     getPackages: jest.fn(),
     getTsConfig: jest.fn(),
     getWebpackConfiguration: jest.fn(),
-    isCustomStyleRules: jest.fn(),
     isDevServerDisabled: jest.fn(),
     isExposeSharedDependencies: jest.fn(),
     isWebComponent: jest.fn(),
@@ -110,6 +108,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         argv = {};
         packages = [];
         overrides = {
+            configuration: { mode: 'development' },
             plugins: {
                 HtmlWebpackPlugin: { favicon: 'foo' },
                 MiniCssExtractPlugin: { attributes: { foo: 'bar' } },
@@ -420,7 +419,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     });
 
     describe('when package has custom style rules', () => {
-        beforeEach(() => jest.mocked(isCustomStyleRules).mockReturnValue(true));
+        beforeEach(() => {
+            configuration.webpack = { 'custom-style-rules': true };
+        });
 
         Object.entries(styleRules).forEach(([extension, rule]) => {
             test(`omits "${extension}" rules`, () => {
@@ -487,9 +488,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     });
 
     test('configures IgnorePlugin plugin', () => {
-        expect(subject().plugins).toContainEqual(
-            new IgnorePlugin({ checkResource: expect.any(Function) })
-        );
+        expect(subject().plugins).toContainEqual({
+            IgnorePlugin: { checkResource: expect.any(Function) },
+        });
     });
 
     describe('when buildStat option is set to true', () => {
@@ -540,8 +541,8 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 );
             });
 
-            describe('when embed option is set to true', () => {
-                beforeEach(() => setOptions({ embed: true }));
+            describe('when light option is set to true', () => {
+                beforeEach(() => setOptions({ light: true }));
 
                 test('adds "light" to reportFilename and reportTitle', () => {
                     expect(subject().plugins).toContainEqual(

package/src/webpack/bundle-webpack.ts

@@ -0,0 +1,107 @@
+import { getPortPromise } from 'portfinder';
+import webpack, { Configuration } from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import { isDevServerDisabled, isExposeSharedDependencies, isWebComponent, log } from '../utils';
+import { createWebpackConfigs } from './create-webpack-configs';
+
+interface Options {
+    buildStat?: boolean;
+    codeCoverage?: boolean;
+    config?: string;
+    emitExposedDependencies?: boolean;
+    useWatchConfig?: boolean;
+    watch?: boolean;
+}
+
+export async function bundleWebpack(options: Options = {}) {
+    const { emitExposedDependencies, watch } = options;
+
+    if (emitExposedDependencies) {
+        if (watch) {
+            throw new Error('cannot bundle exposed dependencies in watch mode');
+        }
+        if (!isExposeSharedDependencies()) {
+            return;
+        }
+    }
+
+    log.info(`Bundling ${emitExposedDependencies ? 'exposed dependencies' : 'package'}...`);
+
+    const { full, light, headless } = createWebpackConfigs(options);
+
+    // Standalone app — only the full config is needed
+    if (!isWebComponent()) {
+        return watch ? runDevServer(full) : run(full);
+    }
+
+    if (watch) {
+        return Promise.all([
+            runDevServer(full),
+            light && runWatch(light),
+            headless && runWatch(headless),
+        ]);
+    }
+
+    return Promise.all([run(full), light && run(light), headless && run(headless)]);
+}
+
+async function runDevServer(config: Configuration) {
+    return isDevServerDisabled() ? runWatch(config) : runServe(config);
+}
+
+async function run(config: Configuration) {
+    const compiler = createWebpackCompiler(config);
+
+    const stats = await new Promise<webpack.Stats>((resolve, reject) => {
+        compiler.run((error, stats) => {
+            if (!stats || error) {
+                return reject(error ?? new Error('Something went wrong.'));
+            }
+
+            if (stats.hasErrors()) {
+                return reject(new Error(stats.toString('errors-only')));
+            }
+
+            compiler.close(() => resolve(stats));
+        });
+    });
+
+    process.stdout.write(stats.toString(config.stats) + '\n');
+}
+
+async function runServe({ devServer = {}, ...config }: Configuration) {
+    const compiler = createWebpackCompiler(config);
+    const host = devServer.host ?? 'localhost';
+    const port = await getPortPromise({
+        port: Number(process.env.PORT) || Number(devServer.port) || 8080,
+        host,
+    });
+
+    return new Promise<void>((_0, reject) => {
+        const server = new WebpackDevServer({ ...devServer, host, port }, compiler);
+        server.startCallback(e => {
+            if (e) {
+                server.stopCallback(() => {
+                    reject(e);
+                });
+            }
+        });
+    });
+}
+
+async function runWatch(config: Configuration) {
+    const compiler = createWebpackCompiler(config);
+    return new Promise<void>((_0, reject) => {
+        const watching = compiler.watch({}, e => {
+            if (e) {
+                watching?.close(() => {
+                    reject(e);
+                });
+            }
+        });
+    });
+}
+
+function createWebpackCompiler(config: Configuration) {
+    return webpack(config);
+}

package/src/webpack/configs/amd-config.ts

@@ -1,8 +1,9 @@
 import { Configuration } from 'webpack';
-import { Context, Overrides } from './types';
+import { BuildContext } from '../../core';
+import { Overrides } from '../types';
 
 type Result = Pick<Configuration, 'amd'>;
 
-export function amdConfig(_context: Context, _: Overrides): Result {
+export function amdConfig(_context: BuildContext, _: Overrides): Result {
     return { amd: false };
 }

package/src/webpack/configs/cache-config.ts

@@ -1,25 +1,24 @@
-import fs from 'fs';
-import path from 'path';
 import { Configuration } from 'webpack';
-import { findUp } from '../../utils';
-import { Context, Overrides } from './types';
+import { BuildContext } from '../../core';
+import { Overrides } from '../types';
 
 type Config = Configuration['cache'];
 type Result = Pick<Configuration, 'cache' | 'infrastructureLogging'> | undefined;
 
 const CACHE_VERSION = '1';
 
-export function cacheConfig(context: Context, _overrides: Overrides): Result {
-    const { emitExposedDependencies, packageManager } = context;
+export function cacheConfig(context: BuildContext, _overrides: Overrides): Result {
+    const { emitExposedDependencies } = context.build;
+    const { packageManager } = context.package;
     if (!emitExposedDependencies) {
         return;
     }
 
-    const packageLock = findPackageLock(packageManager.lockFileName);
+    const lockFilePath = packageManager.getLockFilePath();
     const cache: Config = {
         type: 'filesystem',
         version: CACHE_VERSION,
-        ...(packageLock ? { buildDependencies: { packageLock: [packageLock] } } : {}),
+        ...(lockFilePath ? { buildDependencies: { packageLock: [lockFilePath] } } : {}),
     };
 
     return {
@@ -28,10 +27,3 @@ export function cacheConfig(context: Context, _overrides: Overrides): Result {
         infrastructureLogging: { level: 'error' },
     };
 }
-
-function findPackageLock(lockFileName: string) {
-    return findUp(directory => {
-        const lockFile = path.resolve(path.join(directory), lockFileName);
-        return fs.existsSync(lockFile) ? lockFile : undefined;
-    });
-}

package/src/webpack/configs/dev-server-config.ts

@@ -1,21 +1,19 @@
 import fs from 'fs';
 import path from 'path';
 import { Configuration } from 'webpack';
-import {
-    allowedWebpackDevServerOptions,
-    getWebpackConfiguration,
-    isDevServerDisabled,
-    log,
-    pick,
-} from '../../utils';
+import { allowedWebpackDevServerOptions, isDevServerDisabled, log, pick } from '../../utils';
+import { Overrides, WebpackBuildContext } from '../types';
 import { statsConfig } from './stats-config';
-import { Context, Overrides } from './types';
 
 type DevServerConfig = NonNullable<Configuration['devServer']>;
 type Result = Pick<Configuration, 'devServer'> | undefined;
 
-export function devServerConfig(context: Context, overrides: Overrides): Result {
-    if (context.isProduction || context.emitExposedDependencies || isDevServerDisabled()) {
+export function devServerConfig(context: WebpackBuildContext, overrides: Overrides): Result {
+    if (
+        context.build.isProduction ||
+        context.build.emitExposedDependencies ||
+        isDevServerDisabled()
+    ) {
         return;
     }
 
@@ -40,7 +38,7 @@ export function devServerConfig(context: Context, overrides: Overrides): Result
 
             return middlewares;
         },
-        ...getDevServerConfig(),
+        ...getDevServerConfig(context),
     };
 
     /* istanbul ignore next: debug only */
@@ -48,12 +46,13 @@ export function devServerConfig(context: Context, overrides: Overrides): Result
     return { devServer };
 }
 
-function getDevServerConfig() {
-    const webpack = getWebpackConfiguration();
+function getDevServerConfig(context: WebpackBuildContext) {
+    const { bundlerConfig } = context;
+
     /* istanbul ignore next: debug only */
-    log.debug('dev-server-config', () => JSON.stringify({ webpack }, null, 2));
+    log.debug('dev-server-config', () => JSON.stringify({ webpack: bundlerConfig }, null, 2));
 
-    const result = pick(webpack, allowedWebpackDevServerOptions);
+    const result = pick(bundlerConfig, allowedWebpackDevServerOptions);
     if (typeof result.proxy === 'string') {
         if (fs.existsSync(result.proxy)) {
             result.proxy = require(path.resolve(result.proxy));
@@ -63,7 +62,7 @@ function getDevServerConfig() {
     }
 
     if (result.static === undefined) {
-        const contentBase = webpack.contentBase;
+        const contentBase = bundlerConfig.contentBase;
         if (contentBase !== undefined) {
             log.warning(CONTENT_BASE_DEPRECATION_WARNING);
             if (typeof contentBase !== 'number') {
@@ -74,7 +73,7 @@ function getDevServerConfig() {
         }
     }
 
-    return { ...result, ...webpack.devServer } as Partial<DevServerConfig>;
+    return { ...result, ...bundlerConfig.devServer } as Partial<DevServerConfig>;
 }
 
 const CONTENT_BASE_DEPRECATION_WARNING = `

package/src/webpack/configs/devtool-config.ts

@@ -1,11 +1,12 @@
 import { Configuration } from 'webpack';
-import { Context, Overrides } from './types';
+import { BuildContext } from '../../core';
+import { Overrides } from '../types';
 
 type Config = Configuration['devtool'];
 type Result = Pick<Configuration, 'devtool'>;
 
-export function devtoolConfig(context: Context, _: Overrides): Result {
-    const { isProduction } = context;
+export function devtoolConfig(context: BuildContext, _: Overrides): Result {
+    const { isProduction } = context.build;
     let devtool: Config;
 
     if (isProduction) {

package/src/webpack/configs/entry.config.ts

@@ -1,29 +1,30 @@
 import fs from 'fs';
 import { Configuration } from 'webpack';
+import { BuildContext, getDesignSystemPath } from '../../core';
+import { Overrides } from '../types';
 import { getModuleEntryPath } from '../utils';
-import { getDesignSystemPath } from './plugins';
-import { Context, Overrides } from './types';
 
 type Config = Configuration['entry'];
 type Result = Pick<Configuration, 'entry'>;
 
-export function entryConfig(context: Context, _: Overrides): Result {
-    const entry: Config = context.emitExposedDependencies
+export function entryConfig(context: BuildContext, _: Overrides): Result {
+    const entry: Config = context.build.emitExposedDependencies
         ? getSharedEntryPoints(context)
         : getIndexEntryPoint(context);
 
     return { entry };
 }
 
-function getIndexEntryPoint({ source, destination }: Context): Config {
+function getIndexEntryPoint(context: BuildContext): Config {
+    const { source, destination } = context.package;
     const index = fs.existsSync(`./${source}/index.js`)
         ? `./${source}/index`
         : `./${destination}/index`;
     return { main: [index] };
 }
 
-function getSharedEntryPoints(context: Context): Config {
-    const { sharedDependencies } = context;
+function getSharedEntryPoints(context: BuildContext): Config {
+    const { sharedDependencies } = context.package;
     return {
         shared: Object.keys(sharedDependencies).map(getModuleEntryPath),
         ...(sharedDependencies['@servicetitan/design-system']

package/src/webpack/configs/externals-config.ts

@@ -1,26 +1,10 @@
 import { Configuration } from 'webpack';
-import { Context, Overrides } from './types';
+import { BuildContext, getExternals } from '../../core';
+import { Overrides } from '../types';
 
-type Config = Configuration['externals'];
 type Result = Pick<Configuration, 'externals'> | undefined;
 
-export function externalsConfig(context: Context, _: Overrides): Result {
-    if (!needsExternals(context)) {
-        return;
-    }
-
-    const { sharedDependencies } = context;
-    const name = context.name || context.packageData.name;
-    const externals: Config = Object.fromEntries(
-        Object.entries(sharedDependencies).map(([dependency, variable]) => [
-            dependency,
-            `${variable}['${name}']`,
-        ])
-    );
-
-    return { externals };
-}
-
-function needsExternals({ embed, emitExposedDependencies, isExposeSharedDependencies }: Context) {
-    return !!embed || (isExposeSharedDependencies && !emitExposedDependencies);
+export function externalsConfig(context: BuildContext, _: Overrides): Result {
+    const externals = getExternals(context);
+    return externals ? { externals } : undefined;
 }

package/src/webpack/configs/index.ts

@@ -12,5 +12,4 @@ export * from './plugins-config';
 export * from './resolve-config';
 export * from './rules-config';
 export * from './stats-config';
-export type * from './types';
 export * from './watch-options-config';

package/src/webpack/configs/loaders/css-loader.ts

@@ -1,7 +1,9 @@
-import { Context } from '../types';
+import { BuildContext, bundleConstants } from '../../../core';
 import { LoaderOptions } from './types';
 
-export function cssLoader({ isProduction }: Context, { esModule }: LoaderOptions = {}) {
+export function cssLoader(context: BuildContext, { esModule }: LoaderOptions = {}) {
+    const { isProduction } = context.build;
+    const { classnameTemplate } = bundleConstants.cssModules;
     const loader = 'css-loader';
     return esModule
         ? {
@@ -9,7 +11,9 @@ export function cssLoader({ isProduction }: Context, { esModule }: LoaderOptions
               options: {
                   esModule,
                   modules: {
-                      ...(isProduction ? { localIdentName: '[local]__[hash:base64:5]' } : {}),
+                      localIdentName: isProduction
+                          ? classnameTemplate.production
+                          : classnameTemplate.development,
                       exportLocalsConvention: 'camelCaseOnly',
                       namedExport: true,
                   },

package/src/webpack/configs/loaders/style-loader.ts

@@ -1,11 +1,10 @@
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { Context } from '../types';
+import { BuildContext } from '../../../core';
 import { LoaderOptions } from './types';
 
-export function styleLoader(
-    { isProduction, isWebComponent, emitExposedDependencies }: Context,
-    { esModule }: LoaderOptions = {}
-) {
+export function styleLoader(context: BuildContext, { esModule }: LoaderOptions = {}) {
+    const { isProduction, emitExposedDependencies } = context.build;
+    const { isWebComponent } = context.package;
     const loader =
         isProduction || isWebComponent || emitExposedDependencies
             ? MiniCssExtractPlugin.loader