-
Notifications
You must be signed in to change notification settings - Fork 5
/
internal.ts
115 lines (107 loc) · 4.42 KB
/
internal.ts
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
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { buildStyles, InlineStylesheet, BuildStylesOptions } from './tasks/style';
import { createPresetFiles } from './tasks/preset';
import { createInternalTokenFiles } from './tasks/internal-tokens';
import { createPublicTokenFiles } from './tasks/public-tokens';
import { reduce, defaultsReducer, Theme, ThemePreset, resolveTheme } from '../shared/theme';
import { getInlineStylesheets } from './inline-stylesheets';
import { calculatePropertiesMap } from './properties';
import findNeededTokens from './needed-tokens';
export { buildStyles, InlineStylesheet, BuildStylesOptions };
export type Tasks = 'preset' | 'design-tokens';
export interface BuildThemedComponentsInternalParams {
/** Primary theme used for generation of styles and scoped names */
primary: Theme;
/** List of exposed design tokens in the design tokens package */
exposed: string[];
/** List of themeable design tokens */
themeable: string[];
/** Map between design tokens and a variable name used in SCSS */
variablesMap: Record<string, string>;
/** Components directory to be used as output for component styling */
componentsOutputDir: string;
/** SCSS source code directory to be used during the styles generation */
scssDir: string;
/** Optional: List of secondary themes included in the root stylesheet */
secondary?: Theme[];
/** If set, will skip the specified tasks */
skip?: Tasks[];
/** Design token directory to be used as output for design token files. Required if task is not skipped. */
designTokensOutputDir?: string;
/** File name of the design token files with the endings ts.d., .js and .scss. Default: 'index' */
designTokensFileName?: string;
/** Map between design tokens and their description */
descriptions?: Record<string, string>;
/** Indicates whether to generate a JSON schema for design tokens JSON format and validate against the schema **/
jsonSchema?: boolean;
/** Fail the build when SASS deprecation warning occurs **/
failOnDeprecations?: boolean;
}
/**
* Builds themed components and optionally design tokens, if not skipped.
*
* The styles will be build with three inline stylesheets:
* * `awsui:environment` - Stylesheet containing a simple environment context
* * `awsui:globals` - Root stylesheet with custom property assignments
* * `awsui:tokens` - Mapping between SASS variables and var() assignments
*
* If designTokensOuputDir is specified and not skipped, three with designTokensFileName will be generated:
* * Typescript
* * Typescript definitions
* * SCSS
*
* @param params build themed components parameters
*/
export async function buildThemedComponentsInternal(params: BuildThemedComponentsInternalParams): Promise<void> {
const {
primary,
exposed,
themeable,
variablesMap,
componentsOutputDir,
designTokensOutputDir,
scssDir,
secondary = [],
designTokensFileName = 'index',
skip = [],
descriptions = {},
jsonSchema = false,
failOnDeprecations,
} = params;
if (!skip.includes('design-tokens') && !designTokensOutputDir) {
throw new Error('designTokensOutputDir needs to be specified if not skipped');
}
const neededTokens = findNeededTokens(scssDir, variablesMap, exposed);
const resolution = resolveTheme(primary);
const defaults = reduce(resolution, primary, defaultsReducer());
const propertiesMap = calculatePropertiesMap([primary, ...secondary], variablesMap);
const styleTask = buildStyles(
scssDir,
componentsOutputDir,
getInlineStylesheets(primary, secondary, defaults, variablesMap, propertiesMap, neededTokens),
{ failOnDeprecations }
);
const internalTokensTask = createInternalTokenFiles(defaults, propertiesMap, componentsOutputDir);
const preset: ThemePreset = {
theme: primary,
secondary,
themeable,
exposed,
variablesMap,
propertiesMap,
};
const presetTask = skip.includes('preset') ? Promise.resolve() : createPresetFiles(preset, componentsOutputDir);
const designTokensTask =
skip.includes('design-tokens') || !designTokensOutputDir
? Promise.resolve()
: createPublicTokenFiles({
preset,
resolution: defaults,
outputDir: designTokensOutputDir,
fileName: designTokensFileName,
descriptions,
jsonSchema,
});
await Promise.all([internalTokensTask, designTokensTask, presetTask, styleTask]);
}