Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 4x 1x 8x 8x 8x 8x 768x 768x 768x 768x 248x 520x 424x 8x 1x 6x 1x 8x 8x 1x 3x 3x 3x 3x | /**
* Theme-layer file list builders.
*
* These lists produce the theme-layer bundles (slds2.theme-layer.cosmos.css, etc.)
* served when the SldsV2ThemeLayer gate (W-21432872) is enabled. Core switches
* between the SCS resource names:
* - Gate OFF: "slds-plus" -> slds2.cosmos.css (built by file-lists.js)
* - Gate ON: "slds-plus-theme-layer" -> slds2.theme-layer.cosmos.css (built here)
*
* How dist files reach core:
* 1. This repo builds dist/css/bundled/slds2.cosmos.css and dist/css/theme-layer/bundled/slds2.theme-layer.cosmos.css
* 2. Dist files are copied to aura/slds-scs, renamed to slds-plus-{v}.css and
* slds-plus-theme-layer-{v}.css, and registered in scs/files.json
* 3. slds-scs is deployed to SCS (Static Content Service) via TNRP
* 4. ServletUtilAdapterImpl resolves the SCS resource name at runtime, switching between
* "slds-plus" (gate off) and "slds-plus-theme-layer" (gate on)
*
* Related:
* - Core gate & serving logic (W-21432872, getSldsPlusCssUrl in ServletUtilAdapterImpl.java):
* https://gitcore.soma.salesforce.com/core-2206/core-262-public/pull/45140
* - Theme-layer build: https://github.com/salesforce-experience-platform-emu/salesforce-design-system/pull/1407
* - SCS repo: https://git.soma.salesforce.com/aura/slds-scs
*
* Exports:
* getThemeBaseFileList() - all themes/base.css (no foundation)
* getThemeOnlyFileList() - all themes/{theme}.css (no foundation)
* getUtilitiesFiles() - reset.css + utilities/*.css
* getThemeLayerDistFileList() - dist monolith: foundation + utilities + components + base + theme
*/
import * as glob from 'glob';
import path from 'node:path';
import { args } from './args.js';
import config, { root, designTokensDist } from './config.js';
import { isNonEmpty, ignoreThemes, getFoundationFilesForTheme } from './file-lists.js';
/**
* Returns foundation token + legacy hook files for a specific theme (no config tokens).
*
* Used by buildModularThemes (legacy slds2.theme.{theme}.css) and as a building
* block in buildThemeLayerBase (which adds theme-layer component CSS separately
* via getThemeOnlyFileList).
*
* Does NOT include theme-layer component CSS (component themes/ directories);
* those belong exclusively in the theme-layer outputs.
*
* @param {string} themeName Theme name (e.g. "cosmos", "lightning-blue").
*/
export const getModularThemeFileList = (themeName) => [
...glob.sync(path.resolve(designTokensDist, `themes/${themeName}/**/*.css`)),
...glob.sync(config.sources.legacyHooksShared),
...glob.sync(path.resolve(root, `src/legacy-hooks/${themeName}/**/*.css`)),
];
// ─── File list builders ──────────────────────────────────────────────────────
/**
* Theme-layer base: every component's base paint, in priority order:
*
* 1. If `<component>/themes/base.css` exists, use it (the theme-layer scaffold
* has landed for that component).
* 2. Otherwise fall back to `<component>/<component>.css` (the legacy paint),
* so the theme-layer bundle still ships visually-equivalent CSS for
* components that haven't migrated yet.
*
* That fallback is what lets us delete duplicated `themes/base.css` files
* (which were just copies of the legacy CSS) without losing component paint
* from the theme-layer bundle. When a component opens its hook API for real,
* its `themes/base.css` lands and takes precedence over the fallback.
*
* Shared across themes; called once, not per-theme.
*/
export const getThemeBaseFileList = () => {
const system = args['--system'];
const componentDirs = glob.sync(path.resolve(root, `src/${system}/*/`));
const files = [];
for (const dir of componentDirs) {
const componentName = path.basename(dir);
const themeBase = path.resolve(dir, 'themes/base.css');
const legacyCss = path.resolve(dir, `${componentName}.css`);
if (glob.sync(themeBase).length > 0) {
files.push(themeBase);
} else if (glob.sync(legacyCss).length > 0) {
files.push(legacyCss);
}
}
return files.filter(isNonEmpty);
};
/**
* Theme-layer theme-only: all themes/{themeName}.css files concatenated (no foundation).
* Called once per theme in the THEMES loop.
*
* @param {string} themeName Theme name (e.g. "cosmos", "lightning-blue").
*/
export const getThemeOnlyFileList = (themeName) =>
glob.sync(path.resolve(root, `src/${args['--system']}/**/themes/${themeName}.css`)).filter(isNonEmpty);
/**
* Returns reset.css + all other utilities CSS files.
* Reset is listed first to match importOrder.
*/
export const getUtilitiesFiles = () => {
const system = args['--system'];
return [
...glob.sync(path.resolve(root, `src/${system}/utilities/reset.css`)),
...glob.sync(path.resolve(root, `src/${system}/utilities/*.css`), {
ignore: [path.resolve(root, `src/${system}/utilities/reset.css`)],
}),
];
};
/**
* Theme-layer dist: foundation + component CSS + reset/utilities + theme base + theme overrides.
* Produces a single monolith file per theme for production distribution.
*
* Order: tokens, reset/utilities, base component CSS, themes/base.css, themes/{theme}.css
*
* @param {string} themeName Theme name (e.g. "cosmos", "lightning-blue").
*/
export const getThemeLayerDistFileList = (themeName) => {
const foundation = getFoundationFilesForTheme(themeName);
const componentCss = glob.sync(config.sources.input, { ignore: ignoreThemes() });
const subThemes = glob.sync(config.sources.subThemes, { ignore: ignoreThemes() });
return [
...foundation,
...getUtilitiesFiles(),
...componentCss,
...subThemes,
...getThemeBaseFileList(),
...getThemeOnlyFileList(themeName),
];
};
|