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 | /**
* Standard CSS build (non-theme-layer).
*
* Dev outputs (build/css/) consumed by Storybook:
*
* addFiles()
* slds2.base.css Structure CSS (no tokens)
*
* buildModularThemes() (delegated to buildThemeLayer.js)
* slds2.theme.{theme}.css Per-theme token CSS
*
* Dist outputs (dist/css/) called by --production orchestrator:
*
* buildProductionStandard()
* modular/slds2.base.css Structure only
* modular/slds2.scoped.base.css Scoped structure only
* modular/slds2.theme.{theme}.css Theme tokens per theme
* bundled/slds2.{theme}.css Structure + theme (baked)
* bundled/slds2.scoped.{theme}.css Scoped structure + theme (baked)
*/
import path from 'node:path';
import fs from 'fs-extra';
import postcss from 'postcss';
import postcssAtImport from 'postcss-import';
import postcssNesting from 'postcss-nested';
import postcssFor from 'postcss-for';
import postcssEach from 'postcss-each';
import postcssRemoveComments from 'postcss-discard-comments';
import { args, THEMES } from './args.js';
import config, { root } from './config.js';
import postCssDeprecatedSelector from '../plugins/postcss-deprecated-selector.js';
import postCssFigletComment from '../plugins/postcss-figlet-comment.js';
import postCssHeaderComment from '../plugins/postcss-header-comment.js';
import postCssAddScope from '../plugins/postcss-add-scope.js';
import postCssScopeTokens from '../plugins/postcss-scope-tokens.js';
import { getDevFileList, getProductionFileListForTheme } from './file-lists.js';
import { sortAndWriteImports, sortImports } from './sort-imports.js';
import { buildModularThemes } from './buildThemeLayer.js';
// ─── Plugin pipeline ─────────────────────────────────────────────────────────
/** Fresh standard plugin set (safe for parallel execution). */
const createStandardPlugins = () => [
postcssAtImport({ cache: false }),
postcssRemoveComments(),
postcssEach(),
postcssFor(),
postcssNesting(),
postCssScopeTokens(),
postCssDeprecatedSelector(),
];
// Dev uses a single shared instance (no parallelism within addFiles).
const devPlugins = (() => {
const plugins = createStandardPlugins();
if (args['--scoped']) {
plugins.push(postCssAddScope({ scope: args['--scope-class-name'] || '' }));
}
return plugins;
})();
// ─── Shared helpers ──────────────────────────────────────────────────────────
const processCss = async (css, outputPath, pluginSet = devPlugins) => {
console.info(`Compiling ${outputPath}...`);
const result = await postcss(pluginSet).process(css, { from: '' });
await fs.outputFile(outputPath, result.css);
};
// ─── Build functions ─────────────────────────────────────────────────────────
/** Dev: base structure CSS for Storybook (no theme tokens). */
export const addFiles = async () => {
const files = getDevFileList();
const css = sortAndWriteImports(files, config.outputs.imports);
await processCss(css, config.outputs.css);
};
/** Dev: modular standard CSS (base structure + per-theme tokens). */
export const buildDevStandard = async () => {
await Promise.all([addFiles(), buildModularThemes()]);
};
/**
* Dist: all standard (non-theme-layer) production outputs.
*
* Called by the --production orchestrator in index.js alongside theme-layer builds.
*/
export const buildProductionStandard = async () => {
const modularPlugins = () => [...createStandardPlugins(), postCssHeaderComment()];
const modularScopedPlugins = () => [
...createStandardPlugins(),
postCssAddScope({ scope: '' }),
postCssHeaderComment(),
];
const bundledPlugins = () => [...createStandardPlugins(), postCssHeaderComment(), postCssFigletComment()];
const bundledScopedPlugins = () => [
...createStandardPlugins(),
postCssAddScope({ scope: '' }),
postCssHeaderComment(),
postCssFigletComment(),
];
// ── Modular: structure only + theme tokens (parallel) ──
const devFiles = getDevFileList();
const baseCss = sortImports(devFiles);
await Promise.all([
processCss(baseCss, path.resolve(root, 'dist/css/modular/slds2.base.css'), modularPlugins()),
processCss(baseCss, path.resolve(root, 'dist/css/modular/slds2.scoped.base.css'), modularScopedPlugins()),
buildModularThemes({ forDist: true }),
]);
// ── Bundled: structure + theme per theme (parallel across themes) ──
await Promise.all(
THEMES.flatMap((themeName) => {
const prodFiles = getProductionFileListForTheme(themeName);
const prodCss = sortImports(prodFiles, { theme: themeName });
return [
processCss(prodCss, path.resolve(root, `dist/css/bundled/slds2.${themeName}.css`), bundledPlugins()),
processCss(
prodCss,
path.resolve(root, `dist/css/bundled/slds2.scoped.${themeName}.css`),
bundledScopedPlugins(),
),
];
}),
);
};
|