All files / packages/design-system-2/scripts/buildCss index.js

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * CSS build entry point.
 *
 * Thin coordinator that dispatches to the build modules:
 *   - buildStandard.js:    standard CSS (base structure + themes)
 *   - buildThemeLayer.js:  theme-layer CSS (base + per-theme + LBC)
 *
 * Build modes:
 *   --dev-standard:    modular standard CSS for Storybook
 *   --dev-theme-layer: modular theme-layer CSS for Storybook
 *   --production:      all consumer-facing outputs to dist/css/
 *   --watch:           chokidar watcher for incremental rebuilds
 *
 * Usage (see package.json scripts for canonical invocations):
 *   node scripts/buildCss/index.js --system=slds2 --dev-standard        (dev standard CSS)
 *   node scripts/buildCss/index.js --system=slds2 --dev-theme-layer     (dev theme-layer CSS)
 *   node scripts/buildCss/index.js --system=slds2 --production          (all dist outputs)
 */
 
import chokidar from 'chokidar';
import { args } from './args.js';
import config from './config.js';
import { addFiles, buildDevStandard, buildProductionStandard } from './buildStandard.js';
import { buildThemeLayerBase } from './buildThemeLayer.js';
 
// ─── Production build ────────────────────────────────────────────────────────
 
/**
 * Builds all consumer-facing CSS outputs into dist/css/.
 *
 * Produces:
 *   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)
 *
 * Theme-layer dist outputs are not produced here; they are slated for consumer delivery in 264.
 * Dev theme-layer builds (build/css/theme-layer/) are still produced by --dev-theme-layer.
 */
const buildProduction = async () => {
  await buildProductionStandard();
};
 
// ─── Dev builds ──────────────────────────────────────────────────────────────
 
/** Dev: modular theme-layer CSS (base + per-theme, including LBC variants). */
const buildDevThemeLayer = async () => {
  await Promise.all([buildThemeLayerBase(), buildThemeLayerBase({ lbc: true })]);
};
 
// ─── Entry point ─────────────────────────────────────────────────────────────
 
if (args['--system']) {
  try {
    if (args['--production']) {
      await buildProduction();
    } else if (args['--dev-standard']) {
      await buildDevStandard();
    } else if (args['--dev-theme-layer']) {
      await buildDevThemeLayer();
    } else {
      await addFiles();
    }
  } catch (err) {
    console.error(err);
    process.exit(1);
  }
}
 
// ─── Watch mode ──────────────────────────────────────────────────────────────
 
if (args['--watch']) {
  const isThemeFile = (file) => /\/themes\//.test(file);
 
  const watcher = chokidar.watch([config.directories.input, config.directories.subThemes], {
    persistent: true,
    ignoreInitial: true,
    awaitWriteFinish: true,
  });
 
  const handleChange = async (file, event) => {
    console.info(`${file} has been ${event}`);
 
    if (isThemeFile(file)) {
      console.info('Theme file detected — rebuilding theme-layer base...');
      await buildThemeLayerBase();
    }
 
    await addFiles();
  };
 
  watcher.on('add', (file) => handleChange(file, 'added'));
  watcher.on('change', (file) => handleChange(file, 'changed'));
  watcher.on('unlink', (file) => handleChange(file, 'removed'));
}