@openedx/frontend-base 1.0.0-alpha.9 → 1.0.0

package/dist/tools/cli/utils/translations/prepare.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareAllPackageMessages = prepareAllPackageMessages;
+exports.prepareSiteMessages = prepareSiteMessages;
+exports.prepare = prepare;
+const fs_1 = __importDefault(require("fs"));
+const camelCase_1 = __importDefault(require("lodash/camelCase"));
+const path_1 = __importDefault(require("path"));
+const messagesObject_1 = require("./messagesObject");
+function packageVarName(packagePath) {
+    const name = packagePath.split('/').pop();
+    return `${(0, camelCase_1.default)(name)}Messages`;
+}
+function getPackageMessages(messagesDir, packagePath) {
+    return (0, messagesObject_1.generateMessagesObject)(path_1.default.join(messagesDir, packagePath));
+}
+function getPackagePaths(messagesDir) {
+    const directoryEntries = fs_1.default.readdirSync(messagesDir, { withFileTypes: true })
+        .filter(e => e.isDirectory());
+    const packagePaths = [];
+    for (const entry of directoryEntries) {
+        const directory = fs_1.default.readdirSync(path_1.default.join(messagesDir, entry.name), { withFileTypes: true });
+        if (!directory.some(e => e.isDirectory())) {
+            // no subdirectories, this is a package dir
+            packagePaths.push(entry.name);
+            continue;
+        }
+        // this is a scope dir, subdirs are packages
+        const packageDirs = directory.filter(e => e.isDirectory());
+        for (const pkg of packageDirs) {
+            packagePaths.push(`${entry.name}/${pkg.name}`);
+        }
+    }
+    return packagePaths;
+}
+function getAllPackageMessages(messagesDir) {
+    if (!fs_1.default.existsSync(messagesDir)) {
+        // directory doesn't exist
+        return new Map();
+    }
+    const directory = fs_1.default.readdirSync(messagesDir, { withFileTypes: true });
+    if (!directory.some(e => e.isDirectory())) {
+        // directory exists but has no subdirectories
+        return new Map();
+    }
+    const packagePaths = getPackagePaths(messagesDir);
+    const result = new Map();
+    for (const packagePath of packagePaths) {
+        const messagesObject = getPackageMessages(messagesDir, packagePath);
+        if (messagesObject) {
+            result.set(packagePath, messagesObject);
+        }
+    }
+    return result;
+}
+function prepareAllPackageMessages(messagesDir) {
+    const packageMessages = getAllPackageMessages(messagesDir);
+    const importLines = [];
+    const exportItems = [];
+    for (const [packagePath, messagesObject] of packageMessages) {
+        (0, messagesObject_1.writeMessagesObjectToFile)(path_1.default.join(messagesDir, packagePath), messagesObject);
+        const varName = packageVarName(packagePath);
+        importLines.push(`import ${varName} from './messages/${packagePath}';`);
+        exportItems.push(`  ${varName},`);
+    }
+    return [importLines, exportItems];
+}
+function prepareSiteMessages(siteMessagesDir) {
+    const siteMessages = fs_1.default.existsSync(siteMessagesDir)
+        ? (0, messagesObject_1.generateMessagesObject)(siteMessagesDir)
+        : null;
+    if (!siteMessages) {
+        return [[], []];
+    }
+    (0, messagesObject_1.writeMessagesObjectToFile)(siteMessagesDir, siteMessages);
+    return [
+        [`import siteMessages from './site-messages';`],
+        [`  siteMessages,`],
+    ];
+}
+function prepare({ siteRoot }) {
+    const i18nDir = path_1.default.join(siteRoot, 'src', 'i18n');
+    const messagesDir = path_1.default.join(i18nDir, 'messages');
+    const siteMessagesDir = path_1.default.join(i18nDir, 'site-messages');
+    const [packageImportLines, packageExportItems] = prepareAllPackageMessages(messagesDir);
+    const [siteImportLines, siteExportItems] = prepareSiteMessages(siteMessagesDir);
+    const importLines = [...packageImportLines, ...siteImportLines];
+    const exportItems = [...packageExportItems, ...siteExportItems];
+    const hasMessages = importLines.length > 0 && exportItems.length > 0;
+    const messagesContent = hasMessages
+        ? `${importLines.join('\n')}\n\nexport default [\n${exportItems.join('\n')}\n];\n`
+        : 'export default [];\n';
+    fs_1.default.mkdirSync(i18nDir, { recursive: true });
+    fs_1.default.writeFileSync(path_1.default.join(i18nDir, 'messages.ts'), messagesContent);
+}

package/dist/tools/cli/utils/translations/pull.d.ts

@@ -0,0 +1,6 @@
+export declare function pull({ siteRoot, execFileSync, shouldPrepare, atlasOptions, }: {
+    siteRoot: string;
+    execFileSync: (file: string, args: string[]) => void;
+    shouldPrepare: boolean;
+    atlasOptions?: string;
+}): void;

package/dist/tools/cli/utils/translations/pull.js

@@ -0,0 +1,102 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pull = pull;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const prepare_1 = require("./prepare");
+function validateSiteTranslationsConfig(siteRoot) {
+    const pkgJsonPath = path_1.default.join(siteRoot, 'package.json');
+    let config;
+    try {
+        config = JSON.parse(fs_1.default.readFileSync(pkgJsonPath, { encoding: 'utf8' }));
+    }
+    catch {
+        throw new Error(`translations:pull: Could not read ${pkgJsonPath}`);
+    }
+    if (!config.atlasTranslations) {
+        throw new Error(`translations:pull: No atlasTranslations field in ${pkgJsonPath}. `
+            + 'Add an atlasTranslations config to enable translation pulling.');
+    }
+    if (config.atlasTranslations.path && !config.name) {
+        throw new Error(`translations:pull: atlasTranslations.path is set in ${pkgJsonPath} but there is no name field. `
+            + 'A name field is required to identify this package as a translation source.');
+    }
+}
+function readTranslationsConfig(pkgJsonPath, nodeModulesBase) {
+    const packageName = path_1.default.relative(nodeModulesBase, path_1.default.dirname(pkgJsonPath));
+    if (!fs_1.default.existsSync(pkgJsonPath)) {
+        console.warn(`translations:pull: Package ${packageName} not found in node_modules, skipping.`);
+        return null;
+    }
+    let config;
+    try {
+        config = JSON.parse(fs_1.default.readFileSync(pkgJsonPath, { encoding: 'utf8' }));
+    }
+    catch {
+        console.warn(`translations:pull: Error reading package.json for ${packageName}, skipping.`);
+        return null;
+    }
+    const resolvedPackageName = config.name ?? packageName;
+    if (!config.atlasTranslations) {
+        console.warn(`translations:pull: No atlasTranslations config in ${resolvedPackageName}, skipping.`);
+        return null;
+    }
+    return { packageName: resolvedPackageName, config };
+}
+function resolveTranslationMappings(pkgJsonPath, nodeModulesBase) {
+    const visited = new Set();
+    function resolve(pkgJsonPath, ancestors) {
+        const read = readTranslationsConfig(pkgJsonPath, nodeModulesBase);
+        if (!read)
+            return [];
+        const { packageName, config } = read;
+        if (ancestors.includes(packageName)) {
+            console.warn(`translations:pull: Circular dependency detected: ${[...ancestors, packageName].join(' → ')}, skipping.`);
+            return [];
+        }
+        if (visited.has(packageName)) {
+            return [];
+        }
+        visited.add(packageName);
+        const results = [];
+        const mapping = config.atlasTranslations?.path
+            ? { from: config.atlasTranslations.path, to: packageName }
+            : null;
+        if (mapping) {
+            results.push(mapping);
+        }
+        const dependencies = config.atlasTranslations?.dependencies ?? [];
+        for (const dep of dependencies) {
+            results.push(...resolve(path_1.default.join(nodeModulesBase, dep, 'package.json'), [...ancestors, packageName]));
+        }
+        return results;
+    }
+    return resolve(pkgJsonPath, []);
+}
+function clearMessages(messagesDir) {
+    if (fs_1.default.existsSync(messagesDir)) {
+        fs_1.default.rmSync(messagesDir, { recursive: true });
+    }
+    fs_1.default.mkdirSync(messagesDir, { recursive: true });
+}
+function pull({ siteRoot, execFileSync, shouldPrepare, atlasOptions = '', }) {
+    validateSiteTranslationsConfig(siteRoot);
+    // only interact with messages dir, not site-messages
+    const messagesDir = path_1.default.join(siteRoot, 'src', 'i18n', 'messages');
+    const nodeModulesBase = path_1.default.join(siteRoot, 'node_modules');
+    clearMessages(messagesDir);
+    const mappings = resolveTranslationMappings(path_1.default.join(siteRoot, 'package.json'), nodeModulesBase);
+    if (!mappings.length) {
+        if (shouldPrepare)
+            (0, prepare_1.prepare)({ siteRoot });
+        return;
+    }
+    const atlasOptionsArgs = atlasOptions.trim().split(/\s+/).filter(Boolean);
+    const atlasMappingArgs = mappings.map(m => `${m.from}:src/i18n/messages/${m.to}`);
+    execFileSync('atlas', ['pull', ...atlasOptionsArgs, ...atlasMappingArgs]);
+    if (shouldPrepare)
+        (0, prepare_1.prepare)({ siteRoot });
+}

package/dist/tools/config-helpers/createConfig.d.ts

@@ -0,0 +1,2 @@
+import { ConfigTypes } from '../types';
+export default function createConfig(configType: ConfigTypes, configFragment?: any): any;

package/dist/tools/config-helpers/createLintConfig.d.ts

@@ -0,0 +1,2 @@
+import { ConfigWithExtends } from 'typescript-eslint';
+export default function createLintConfig(...configs: ConfigWithExtends[]): import("typescript-eslint").FlatConfig.ConfigArray;

package/dist/tools/config-helpers/getBaseConfig.d.ts

@@ -0,0 +1,2 @@
+import { ConfigTypes } from '../types';
+export default function getBaseConfig(configType: ConfigTypes): any;

package/dist/tools/defaultConfigPaths.d.ts

@@ -0,0 +1,8 @@
+export declare const defaultConfigPaths: {
+    babel: string[];
+    "webpack-build": string[];
+    "webpack-dev": string[];
+    "webpack-dev-shell": string[];
+    lint: string[];
+    test: string[];
+};

package/dist/tools/eslint/base.eslint.config.d.ts

@@ -0,0 +1,3 @@
+declare const _exports: tseslint.FlatConfig.Config[];
+export = _exports;
+import tseslint = require("typescript-eslint");

package/dist/tools/eslint/base.eslint.config.js

@@ -0,0 +1,114 @@
+"use strict";
+// @ts-check
+const { fixupPluginRules } = require('@eslint/compat');
+const eslint = require('@eslint/js');
+const formatjs = require('eslint-plugin-formatjs');
+const jest = require('eslint-plugin-jest');
+const jsxA11y = require('eslint-plugin-jsx-a11y');
+const react = require('eslint-plugin-react');
+const reactHooks = require('eslint-plugin-react-hooks');
+const globals = require('globals');
+const tseslint = require('typescript-eslint');
+const stylistic = require('@stylistic/eslint-plugin');
+module.exports = tseslint.config(eslint.configs.recommended, ...tseslint.configs.stylisticTypeChecked, ...tseslint.configs.recommended, stylistic.configs['recommended-flat'], {
+    ignores: [
+        'coverage/*',
+        'dist/*',
+        'node_modules/*',
+        '**/__mocks__/*',
+        '**/__snapshots__/*',
+    ],
+}, {
+    languageOptions: {
+        parserOptions: {
+            projectService: true,
+        }
+    }
+}, {
+    languageOptions: {
+        ...(react.configs.flat !== undefined ? react.configs.flat.recommended.languageOptions : {}),
+        globals: {
+            ...globals.browser,
+            ...globals.node,
+            ...globals.jest,
+            newrelic: 'readonly',
+        },
+    },
+    plugins: {
+        jest,
+        // Type assertion is workaround for incorrect TypeScript
+        // types in eslint-plugin-react
+        //
+        // TODO: Remove when types are fixed in eslint-plugin-react
+        // - https://github.com/jsx-eslint/eslint-plugin-react/issues/3838
+        react: /** @type {import('eslint').ESLint.Plugin} */ (react),
+        'react-hooks': fixupPluginRules(reactHooks),
+        formatjs,
+        'jsx-a11y': jsxA11y,
+    },
+    settings: {
+        react: {
+            version: 'detect',
+        }
+    }
+}, {
+    rules: {
+        // For some reasons the 'flat' key in react.configs is optional, so Typescript complains if
+        // we don't guard using it.  But... it exists in the export, so something's odd with their types.
+        ...(react.configs.flat !== undefined ? react.configs.flat.recommended.rules : {}),
+        ...(react.configs.flat !== undefined ? react.configs.flat['jsx-runtime'].rules : {}),
+        ...reactHooks.configs.recommended.rules,
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/non-nullable-type-assertion-style': 'off',
+        'react/no-array-index-key': 'error',
+        'formatjs/enforce-description': ['error', 'literal'],
+        'jsx-a11y/label-has-associated-control': ['error', {
+                labelComponents: [],
+                labelAttributes: [],
+                controlComponents: [],
+                assert: 'htmlFor',
+                depth: 25,
+            }],
+        // https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/340#issuecomment-338424908
+        'jsx-a11y/anchor-is-valid': ['error', {
+                components: ['Link'],
+                specialLink: ['to'],
+            }],
+        '@typescript-eslint/no-unused-vars': ['error', {
+                caughtErrors: 'none',
+            }],
+        '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/prefer-nullish-coalescing': 'off',
+        '@typescript-eslint/prefer-optional-chain': 'off',
+        '@stylistic/semi': ['error', 'always', { omitLastInOneLineBlock: true, omitLastInOneLineClassBody: true }],
+        '@stylistic/quotes': ['error', 'single', {
+                avoidEscape: true,
+                allowTemplateLiterals: true,
+            }],
+        '@stylistic/comma-dangle': 'off',
+        '@stylistic/quote-props': ['error', 'as-needed'],
+        '@stylistic/arrow-parens': 'off',
+        '@stylistic/jsx-one-expression-per-line': 'off',
+        '@stylistic/multiline-ternary': 'off',
+        '@stylistic/brace-style': ['error', '1tbs'],
+        '@stylistic/member-delimiter-style': ['error', {
+                multiline: {
+                    delimiter: 'comma',
+                    requireLast: true,
+                },
+                singleline: {
+                    delimiter: 'comma',
+                    requireLast: false,
+                }
+            }],
+    },
+}, {
+    files: [
+        '**/babel.config.js',
+        '**/jest.config.js',
+        '**/eslint.config.js'
+    ],
+    rules: {
+        '@typescript-eslint/no-require-imports': 'off'
+    }
+});

package/dist/tools/eslint.config.d.ts

@@ -0,0 +1,3 @@
+declare const _exports: tseslint.FlatConfig.Config[];
+export = _exports;
+import tseslint = require("typescript-eslint");

package/dist/tools/index.d.ts

@@ -0,0 +1,3 @@
+export { default as createConfig } from './config-helpers/createConfig';
+export { default as createLintConfig } from './config-helpers/createLintConfig';
+export { default as getBaseConfig } from './config-helpers/getBaseConfig';

package/dist/tools/jest/jest.config.d.ts

@@ -0,0 +1,14 @@
+export let testEnvironment: string;
+export namespace testEnvironmentOptions {
+    let url: string;
+}
+export let rootDir: string;
+export let moduleNameMapper: {
+    '\\.(css|scss)$': string;
+    'site.config': string;
+};
+export let collectCoverageFrom: string[];
+export let coveragePathIgnorePatterns: string[];
+export let transformIgnorePatterns: string[];
+export let modulePathIgnorePatterns: string[];
+export let testPathIgnorePatterns: string[];

package/dist/tools/jest.config.d.ts

@@ -0,0 +1,8 @@
+export let testEnvironment: string;
+export namespace testEnvironmentOptions {
+    let url: string;
+}
+export let collectCoverageFrom: string[];
+export let transformIgnorePatterns: string[];
+export let modulePathIgnorePatterns: string[];
+export let testPathIgnorePatterns: string[];

package/dist/tools/types.d.ts

@@ -0,0 +1,20 @@
+export declare enum ConfigTypes {
+    BABEL = "babel",
+    WEBPACK_BUILD = "webpack-build",
+    WEBPACK_DEV = "webpack-dev",
+    WEBPACK_DEV_SHELL = "webpack-dev-shell",
+    LINT = "lint",
+    TEST = "test"
+}
+export declare enum CommandTypes {
+    LINT = "lint",
+    TEST = "test",
+    BUILD = "build",
+    DEV_SHELL = "dev:shell",
+    DEV = "dev",
+    FORMAT_JS = "formatjs",
+    SERVE = "serve",
+    TRANSLATIONS_PULL = "translations:pull",
+    TRANSLATIONS_PREPARE = "translations:prepare",
+    HELP = "help"
+}

package/dist/tools/types.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandTypes = exports.ConfigTypes = void 0;
+var ConfigTypes;
+(function (ConfigTypes) {
+    ConfigTypes["BABEL"] = "babel";
+    ConfigTypes["WEBPACK_BUILD"] = "webpack-build";
+    ConfigTypes["WEBPACK_DEV"] = "webpack-dev";
+    ConfigTypes["WEBPACK_DEV_SHELL"] = "webpack-dev-shell";
+    ConfigTypes["LINT"] = "lint";
+    ConfigTypes["TEST"] = "test";
+})(ConfigTypes || (exports.ConfigTypes = ConfigTypes = {}));
+var CommandTypes;
+(function (CommandTypes) {
+    CommandTypes["LINT"] = "lint";
+    CommandTypes["TEST"] = "test";
+    CommandTypes["BUILD"] = "build";
+    CommandTypes["DEV_SHELL"] = "dev:shell";
+    CommandTypes["DEV"] = "dev";
+    CommandTypes["FORMAT_JS"] = "formatjs";
+    CommandTypes["SERVE"] = "serve";
+    CommandTypes["TRANSLATIONS_PULL"] = "translations:pull";
+    CommandTypes["TRANSLATIONS_PREPARE"] = "translations:prepare";
+    CommandTypes["HELP"] = "help";
+})(CommandTypes || (exports.CommandTypes = CommandTypes = {}));

package/dist/tools/typescript/tsconfig.json

@@ -0,0 +1,33 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "allowSyntheticDefaultImports": true,
+        "declaration": true,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react-jsx",
+        "lib": [
+            "DOM",
+            "DOM.Iterable",
+            "ESNext",
+            "esnext.intl",
+            "es2017.intl",
+            "es2018.intl"
+        ],
+        "isolatedModules": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "noEmit": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitAny": false,
+        "noImplicitThis": true,
+        "noUnusedParameters": true,
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "inlineSources": true,
+        "sourceMap": true,
+        "strict": true,
+        "strictFunctionTypes": false,
+        "target": "ES6"
+    }
+}

package/dist/tools/webpack/common-config/all/getCodeRules.d.ts

@@ -0,0 +1,2 @@
+import { RuleSetRule } from 'webpack';
+export default function getCodeRules(mode: 'dev' | 'production', resolvedSiteConfigPath: string): RuleSetRule[];

package/dist/tools/webpack/common-config/all/getFileLoaderRules.d.ts

@@ -0,0 +1,11 @@
+export default function getFileLoaderRules(): ({
+    test: RegExp;
+    loader: string;
+    options?: undefined;
+} | {
+    test: RegExp;
+    loader: string;
+    options: {
+        name: string;
+    };
+})[];

package/dist/tools/webpack/common-config/all/getImageMinimizer.d.ts

@@ -0,0 +1,5 @@
+import { Compiler } from 'image-minimizer-webpack-plugin';
+import { WebpackPluginInstance } from 'webpack';
+type ImageMinimizerReturnType = (false | '' | 0 | '...' | ((this: Compiler, compiler: Compiler) => void) | WebpackPluginInstance | null | undefined)[] | undefined;
+export default function getImageMinimizer(): ImageMinimizerReturnType;
+export {};

package/dist/tools/webpack/common-config/all/getStylesheetRule.d.ts

@@ -0,0 +1,12 @@
+import { RuleSetRule } from 'webpack';
+export declare const PARAGON_PACKAGE: {
+    name: string;
+};
+export declare const SHELL_PACKAGE: {
+    name: string;
+};
+export declare const BRAND_PACKAGE: {
+    name: RegExp;
+};
+export declare const APP_RESOURCE: RegExp;
+export default function getStylesheetRule(mode: 'dev' | 'production'): RuleSetRule;

package/dist/tools/webpack/common-config/all/getStylesheetRule.js

@@ -0,0 +1,150 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.APP_RESOURCE = exports.BRAND_PACKAGE = exports.SHELL_PACKAGE = exports.PARAGON_PACKAGE = void 0;
+exports.default = getStylesheetRule;
+const autoprefixer_1 = __importDefault(require("autoprefixer"));
+const cssnano_1 = __importDefault(require("cssnano"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const path_1 = __importDefault(require("path"));
+const postcss_custom_media_1 = __importDefault(require("postcss-custom-media"));
+const postcss_rtlcss_1 = __importDefault(require("postcss-rtlcss"));
+const postcssWrapLayer_1 = __importDefault(require("./postcssWrapLayer"));
+/*
+ * Resource matchers for each cascade layer.
+ * Order declared at the site level: `paragon, shell, app, site, brand` (later wins).
+ *
+ * - paragon: @openedx/paragon base styles.  First so everything else can override.
+ * - shell:   frontend-base shell styles.
+ * - app:     catch-all for any other stylesheet pulled from node_modules.
+ *            Keeps apps from clobbering site or brand overrides without requiring
+ *            app packages to follow any naming convention or self-declaration.
+ * - site:    the composing site's own source tree (anything outside node_modules).
+ * - brand:   @openedx/brand-* packages, last so build-time brand matches the
+ *            precedence of runtime brand CSS (which is injected unlayered via
+ *            <link> tags and thus beats every layered rule).
+ */
+exports.PARAGON_PACKAGE = { name: '@openedx/paragon' };
+exports.SHELL_PACKAGE = { name: '@openedx/frontend-base' };
+exports.BRAND_PACKAGE = { name: /^@(open)?edx\/brand(-.+)?$/ };
+// The site/app split is positional (my project vs. a dep), so it is path-based.
+exports.APP_RESOURCE = /[\\/](node_modules|packages)[\\/]/;
+/*
+ * There are a few things we need to do here.
+ *
+ * - We only want to use MiniCssExtractPlugin on dependencies in dev, but not on our source code.
+ * - We only want CssNano in production.
+ * - Each resource class (paragon, shell, app, site, brand) is wrapped in its
+ *   own cascade layer by a PostCSS plugin so the cascade order is
+ *   `paragon, shell, app, site, brand`.
+ */
+function getStylesheetRule(mode) {
+    return {
+        test: /(.scss|.css)$/,
+        oneOf: [
+            {
+                descriptionData: exports.PARAGON_PACKAGE,
+                // We need Paragon to not elide CSS: we have to be able to import it
+                // directly from shell/style.ts
+                sideEffects: true,
+                use: [
+                    mini_css_extract_plugin_1.default.loader,
+                    ...getStyleUseConfig(mode, 'paragon'),
+                ],
+            },
+            {
+                descriptionData: exports.SHELL_PACKAGE,
+                use: [
+                    mini_css_extract_plugin_1.default.loader,
+                    ...getStyleUseConfig(mode, 'shell'),
+                ],
+            },
+            {
+                descriptionData: exports.BRAND_PACKAGE,
+                use: [
+                    mini_css_extract_plugin_1.default.loader,
+                    ...getStyleUseConfig(mode, 'brand'),
+                ],
+            },
+            {
+                resource: { not: [exports.APP_RESOURCE] },
+                use: [
+                    getFirstLoader(mode),
+                    ...getStyleUseConfig(mode, 'site'),
+                ],
+            },
+            {
+                use: [
+                    getFirstLoader(mode),
+                    ...getStyleUseConfig(mode, 'app'),
+                ],
+            },
+        ],
+    };
+}
+function getFirstLoader(mode) {
+    // In dev we keep site/app styles in JS bundles so hot-reloading works;
+    // in production everything is extracted to CSS files.
+    if (mode === 'production') {
+        return mini_css_extract_plugin_1.default.loader;
+    }
+    return require.resolve('style-loader');
+}
+function getStyleUseConfig(mode, layer) {
+    return [
+        {
+            loader: require.resolve('css-loader'), // translates CSS into CommonJS
+            options: {
+                sourceMap: true,
+                modules: {
+                    // namedExport defaults to true in css-loader v7, but we rely on the old behavior.
+                    // Details here:
+                    // https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#700-2024-04-04
+                    namedExport: false,
+                    mode: 'icss',
+                },
+            },
+        },
+        {
+            loader: require.resolve('postcss-loader'),
+            options: {
+                postcssOptions: {
+                    plugins: getPostCssLoaderPlugins(mode, layer),
+                },
+            },
+        },
+        require.resolve('resolve-url-loader'),
+        {
+            loader: require.resolve('sass-loader'), // compiles Sass to CSS
+            options: {
+                sourceMap: true,
+                sassOptions: {
+                    includePaths: [
+                        path_1.default.join(process.cwd(), 'node_modules'),
+                        path_1.default.join(process.cwd(), 'src'),
+                    ],
+                    // Silences compiler deprecation warnings.  They mostly come from bootstrap and/or paragon.
+                    quietDeps: true,
+                    silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'global-builtin', 'legacy-js-api'],
+                },
+            },
+        },
+    ];
+}
+function getPostCssLoaderPlugins(mode, layer) {
+    const plugins = [
+        (0, autoprefixer_1.default)({
+            remove: false, // Prevents removing vendor prefixes
+        }),
+        (0, postcss_rtlcss_1.default)(),
+    ];
+    // We want CSSNano third, and only in production.
+    if (mode === 'production') {
+        plugins.push((0, cssnano_1.default)());
+    }
+    plugins.push((0, postcss_custom_media_1.default)());
+    plugins.push((0, postcssWrapLayer_1.default)({ layer }));
+    return plugins;
+}

package/dist/tools/webpack/common-config/all/postcssWrapLayer.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'postcss';
+export default function postcssWrapLayer({ layer }: {
+    layer: string;
+}): Plugin;