All files / packages/design-system-2/scripts/buildCss config.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
3x
3x
 
 
3x
 
 
 
3x
 
 
3x
 
 
 
 
 
 
 
3x
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Resolved path configuration for the CSS build pipeline.
 *
 * All input globs, output paths, and watch directories are derived here from the
 * parsed CLI args so the rest of the pipeline can import a single `config` object
 * rather than re-deriving paths inline.
 *
 * Token sources are resolved directly from the @salesforce-ux/design-tokens package
 * in node_modules — no intermediate copy step (build:hooks) is required.
 */
 
import path from 'node:path';
import { createRequire } from 'node:module';
import { fileURLToPath } from 'node:url';
import { args, THEME, THEME_TOKEN_FOLDER, deriveFilename } from './args.js';
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const require = createRequire(import.meta.url);
 
/** Absolute path to packages/design-system-2/ */
export const root = path.resolve(__dirname, '../../');
 
/** Absolute path to @salesforce-ux/design-tokens dist/ */
export const designTokensDist =
  path.dirname(require.resolve('@salesforce-ux/design-tokens/package.json')) + '/dist';
 
/** Base output filename (without .css extension), e.g. "slds2.cosmos" or "slds2.lbc.scoped.cosmos" */
export const FILENAME = deriveFilename({
  system: args['--system'],
  theme: THEME,
  scoped: Boolean(args['--scoped']),
  production: Boolean(args['--production']),
});
 
/** Dev output directory for theme-layer builds: build/css/theme-layer/ */
export const themeLayerOutputDir = () => path.resolve(root, 'build/css/theme-layer');
 
const config = {
  /** Directories watched in --watch mode */
  directories: {
    input: path.resolve(root, `src/${args['--system']}`),
    subThemes: path.resolve(root, `src/sub-themes`),
  },
  /** Glob patterns for input CSS sources */
  sources: {
    input: path.resolve(root, `src/${args['--system']}/**/*.css`),
    /** Config tokens from design-tokens dist (theme-independent) */
    config: path.resolve(designTokensDist, 'config/*.css'),
    /** Theme tokens from design-tokens dist */
    tokens: path.resolve(designTokensDist, `themes/${THEME_TOKEN_FOLDER}/**/*.css`),
    /** Theme-scoped legacy component hooks for the active theme */
    legacyHooks: path.resolve(root, `src/legacy-hooks/${THEME}/**/*.css`),
    /** Theme-agnostic legacy hooks (deprecated-hooks, etc.) at the root of legacy-hooks/ */
    legacyHooksShared: path.resolve(root, 'src/legacy-hooks/*.css'),
    subThemes: path.resolve(root, `src/sub-themes/**/*.css`),
  },
  /** Output file paths for dev builds. Production builds derive paths in index.js. */
  outputs: {
    css: path.resolve(root, `build/css/${FILENAME}.css`),
    imports: path.resolve(root, `build/storybook/${FILENAME}.imports.css`),
  },
};
 
export default config;