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 | 4x 1x 6x 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/slds2.cosmos.css and dist/theme-layer/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: all themes/base.css files concatenated (no foundation tokens).
* Shared across themes; called once, not per-theme.
*/
export const getThemeBaseFileList = () =>
glob.sync(path.resolve(root, `src/${args['--system']}/**/themes/base.css`)).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),
];
};
|