devextreme-themebuilder 19.2.13 → 19.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,16 +1,10 @@
1
1
  const MetadataLoader = require('./metadata-loader.js');
2
-
3
2
  const MetadataRepository = require('./metadata-repository.js');
4
-
5
3
  const LessTemplateLoader = require('./less-template-loader.js');
6
-
7
4
  const themes = require('./themes.js');
8
-
9
5
  const normalize = require('./config-normalizer');
10
-
11
6
  const processTheme = (config, metadata, version) => {
12
7
  const lessTemplateLoader = new LessTemplateLoader(config, version);
13
-
14
8
  if (config.isBootstrap) {
15
9
  const bootstrapMetadata = config.bootstrapVersion === 3 ? require('../data/bootstrap-metadata/bootstrap-metadata.js') : require('../data/bootstrap-metadata/bootstrap4-metadata.js');
16
10
  return lessTemplateLoader.analyzeBootstrapTheme(config.themeName, config.colorScheme, metadata, bootstrapMetadata, config.data, config.bootstrapVersion);
@@ -18,7 +12,6 @@ const processTheme = (config, metadata, version) => {
18
12
  return lessTemplateLoader.load(config.themeName, config.colorScheme, metadata, config.items, config.widgets);
19
13
  }
20
14
  };
21
-
22
15
  const buildTheme = config => {
23
16
  normalize(config);
24
17
  const metadataRepository = new MetadataRepository(new MetadataLoader());
@@ -32,7 +25,6 @@ const buildTheme = config => {
32
25
  return processTheme(config, metadata, version);
33
26
  });
34
27
  };
35
-
36
28
  module.exports = {
37
29
  buildTheme: buildTheme
38
30
  };
@@ -1,19 +1,14 @@
1
1
  /* global console */
2
-
3
2
  /* eslint no-console: 0 */
4
- const commands = require('./commands');
5
3
 
4
+ const commands = require('./commands');
6
5
  const themes = require('./themes');
7
-
8
6
  const DEFAULT_OUT_COLOR_SCHEME = 'custom-scheme';
9
-
10
7
  const extname = filename => filename.substring(filename.lastIndexOf('.'));
11
-
12
8
  const getBootstrapConfig = fileName => {
13
9
  const extension = extname(fileName);
14
10
  let bootstrap = false;
15
11
  let version = 0;
16
-
17
12
  if (extension === '.scss') {
18
13
  bootstrap = true;
19
14
  version = 4;
@@ -21,47 +16,39 @@ const getBootstrapConfig = fileName => {
21
16
  bootstrap = true;
22
17
  version = 3;
23
18
  }
24
-
25
19
  return {
26
20
  isBootstrap: bootstrap,
27
21
  bootstrapVersion: version
28
22
  };
29
23
  };
30
-
31
24
  const getOutParameters = (command, themeName, config) => {
32
25
  let outputFile = config.outputFile || '';
33
26
  let outColorScheme = config.outputColorScheme || '';
34
27
  let fileFormat = config.outputFormat || extname(outputFile).substr(1);
35
28
  const makeSwatch = !!config.makeSwatch;
36
29
  const base = !!config.base;
37
-
38
30
  if (!outColorScheme) {
39
31
  outColorScheme = DEFAULT_OUT_COLOR_SCHEME;
40
32
  } else if (!/^[\w\-.]+$/.test(outColorScheme)) {
41
33
  console.log(`'--output-color-scheme' is not valid. '${DEFAULT_OUT_COLOR_SCHEME}' will be used.`);
42
34
  outColorScheme = DEFAULT_OUT_COLOR_SCHEME;
43
35
  }
44
-
45
36
  if (!fileFormat) {
46
37
  switch (command) {
47
38
  case commands.BUILD_THEME:
48
39
  fileFormat = 'css';
49
40
  break;
50
-
51
41
  case commands.BUILD_VARS:
52
42
  fileFormat = 'less';
53
43
  break;
54
-
55
44
  case commands.BUILD_META:
56
45
  fileFormat = 'json';
57
46
  break;
58
47
  }
59
48
  }
60
-
61
49
  if (!outputFile) {
62
50
  outputFile = 'dx.' + themeName + '.' + outColorScheme + '.' + fileFormat;
63
51
  }
64
-
65
52
  return {
66
53
  outputFile: outputFile,
67
54
  fileFormat: fileFormat,
@@ -70,43 +57,35 @@ const getOutParameters = (command, themeName, config) => {
70
57
  base: base
71
58
  };
72
59
  };
73
-
74
60
  const getThemeAndColorScheme = config => {
75
61
  let themeName = 'generic';
76
62
  let colorScheme = 'light';
77
63
  let foundTheme = null;
78
-
79
64
  if (config.baseTheme) {
80
65
  const dotIndex = config.baseTheme.indexOf('.');
81
66
  const passedThemeName = config.baseTheme.substr(0, dotIndex);
82
67
  const passedColorScheme = config.baseTheme.substr(dotIndex + 1).replace(/\./g, '-');
83
68
  console.log(passedThemeName, passedColorScheme);
84
69
  foundTheme = themes.find(t => t.name === passedThemeName && t.colorScheme === passedColorScheme);
85
-
86
70
  if (!foundTheme) {
87
71
  console.log(`The base theme with name ${config.baseTheme} does not exist.`);
88
72
  }
89
73
  } else if (config.themeId) {
90
74
  foundTheme = themes.find(t => t.themeId === parseInt(config.themeId));
91
-
92
75
  if (!foundTheme) {
93
76
  console.log(`The theme with ID ${config.themeId} does not exist.`);
94
77
  }
95
78
  }
96
-
97
79
  if (foundTheme) {
98
80
  themeName = foundTheme.name;
99
81
  colorScheme = foundTheme.colorScheme;
100
82
  }
101
-
102
83
  return {
103
84
  themeName: themeName,
104
85
  colorScheme: colorScheme
105
86
  };
106
87
  };
107
-
108
88
  const normalizePath = path => path + (path[path.length - 1] !== '/' ? '/' : '');
109
-
110
89
  const parseConfig = config => {
111
90
  const command = config.command;
112
91
  const metadataFilePath = config.inputFile || '';
@@ -119,15 +98,12 @@ const parseConfig = config => {
119
98
  delete config.outputFile;
120
99
  delete config.inputFile;
121
100
  delete config.themeId;
122
-
123
101
  if (config.lessPath) {
124
102
  config.lessPath = normalizePath(config.lessPath);
125
103
  }
126
-
127
104
  if (config.scssPath) {
128
105
  config.scssPath = normalizePath(config.scssPath);
129
106
  }
130
-
131
107
  Object.assign(config, {
132
108
  data: config.data !== undefined ? config.data : {},
133
109
  fileFormat: output.fileFormat,
@@ -141,5 +117,4 @@ const parseConfig = config => {
141
117
  base: output.base
142
118
  });
143
119
  };
144
-
145
120
  module.exports = parseConfig;
@@ -1,64 +1,47 @@
1
1
  const LessPluginAutoPrefix = require('less-plugin-autoprefix');
2
-
3
2
  const CleanCss = require('clean-css');
4
-
5
3
  const cleanCssOptions = require('./clean-css-options');
6
-
7
4
  const getBundleName = require('./bundle-resolver');
8
-
9
5
  const ModulesHandler = require('./modules-handler');
10
-
11
6
  const BOOTSTRAP_SCSS_PATH = 'bootstrap/scss/';
12
7
  const THEMEBUILDER_LESS_PATH = 'devextreme-themebuilder/data/less/';
13
8
  const SWATCH_SELECTOR_PREFIX = '.dx-swatch-';
14
-
15
9
  const createModifyVars = modifyVars => {
16
10
  let result = '';
17
-
18
11
  for (const key in modifyVars) {
19
12
  if (Object.prototype.hasOwnProperty.call(modifyVars, key)) {
20
13
  result += `@${key}: ${modifyVars[key]};`;
21
14
  }
22
15
  }
23
-
24
16
  return result;
25
17
  };
26
-
27
18
  const addSwatchClass = (less, swatchSelector, modifyVars) => {
28
19
  if (!swatchSelector) return less;
29
20
  return swatchSelector + '{' + less + createModifyVars(modifyVars) + '}';
30
21
  };
31
-
32
22
  class LessFontPlugin {
33
23
  process(css) {
34
24
  return css.replace(/(\f)(\d+)/g, '\\f$2');
35
25
  }
36
-
37
26
  }
38
-
39
27
  class LessMetadataPreCompiler {
40
28
  constructor(metadata, swatchSelector, modifyVars) {
41
29
  this._metadata = metadata;
42
30
  this.swatchSelector = swatchSelector;
43
31
  this.modifyVars = modifyVars;
44
32
  }
45
-
46
33
  process(less) {
47
34
  less += '#devexpress-metadata-compiler{';
48
-
49
35
  for (const key in this._metadata) {
50
36
  if (Object.prototype.hasOwnProperty.call(this._metadata, key)) {
51
37
  const value = this._metadata[key];
52
38
  less += key + ': ' + value + ';';
53
39
  }
54
40
  }
55
-
56
41
  less += '}';
57
42
  return addSwatchClass(less, this.swatchSelector, this.modifyVars);
58
43
  }
59
-
60
44
  }
61
-
62
45
  class LessMetadataPostCompiler {
63
46
  constructor(compiledMetadata, swatchSelector, colorScheme, noClean) {
64
47
  this._metadata = compiledMetadata;
@@ -66,19 +49,16 @@ class LessMetadataPostCompiler {
66
49
  this.colorScheme = colorScheme;
67
50
  this.useCleanCss = !noClean;
68
51
  }
69
-
70
52
  process(css) {
71
53
  const metadataRegex = new RegExp('(?:' + this.swatchSelector + '\\s*)?\\s*#devexpress-metadata-compiler\\s*\\{((.|\\n|\\r)*?)\\}');
72
54
  metadataRegex.exec(css)[1].split(';').forEach(item => {
73
55
  const rule = getCompiledRule(item);
74
-
75
56
  for (const key in rule) {
76
57
  if (Object.prototype.hasOwnProperty.call(rule, key)) {
77
58
  this._metadata[key] = rule[key];
78
59
  }
79
60
  }
80
61
  });
81
-
82
62
  if (this.swatchSelector) {
83
63
  const escapedSelector = this.swatchSelector.replace('.', '\\.');
84
64
  const customStylesDuplicateRegex = new RegExp(`\\s+${escapedSelector}\\s+\\.dx-theme-.*?-typography\\s+\\.dx-theme-.*?{[\\s\\S]*?}[\\r\\n]*?`, 'g');
@@ -86,30 +66,23 @@ class LessMetadataPostCompiler {
86
66
  const themeMarkerRegex = /(\.dx-theme-marker\s*{\s*font-family:\s*['"]dx\..*?\.)(.*)(['"])/g;
87
67
  css = css.replace(swatchOrderRegex, '$1$3$2$4').replace(customStylesDuplicateRegex, '').replace(/\s\.dx-theme-.*?-typography/g, '').replace(themeMarkerRegex, '$1' + this.colorScheme + '$3');
88
68
  }
89
-
90
69
  if (this.useCleanCss) {
91
70
  css = new CleanCss(cleanCssOptions).minify(css).styles;
92
71
  }
93
-
94
72
  return css.replace(metadataRegex, '');
95
73
  }
96
-
97
74
  }
98
-
99
75
  const getCompiledRule = cssString => {
100
76
  let result = {};
101
77
  const ruleRegex = /([-\w\d]*)\s*:\s*(.*)\s*/;
102
78
  const matches = ruleRegex.exec(cssString);
103
-
104
79
  if (matches) {
105
80
  result['@' + matches[1]] = matches[2];
106
81
  } else {
107
82
  result = null;
108
83
  }
109
-
110
84
  return result;
111
85
  };
112
-
113
86
  class LessTemplateLoader {
114
87
  constructor(config, version) {
115
88
  this.readFile = config.reader;
@@ -122,37 +95,32 @@ class LessTemplateLoader {
122
95
  this.version = version;
123
96
  this.noClean = config.noClean;
124
97
  }
125
-
126
98
  load(theme, colorScheme, metadata, modifiedItems, widgets) {
127
99
  return this._loadLess(theme, colorScheme).then(less => {
128
100
  const modifyVars = {};
129
101
  const metadataVariables = {};
130
-
131
102
  if (Array.isArray(modifiedItems)) {
132
103
  modifiedItems.forEach(item => {
133
104
  modifyVars[item.key.replace('@', '')] = item.value;
134
105
  });
135
106
  }
136
-
137
107
  metadata.forEach(metaItem => {
138
108
  metadataVariables[metaItem.Key.replace('@', '')] = metaItem.Key;
139
109
  });
140
110
  return this.compileLess(less, modifyVars, metadataVariables, widgets);
141
111
  });
142
112
  }
143
-
144
113
  compileLess(less, modifyVars, metadata, widgets) {
145
114
  return new Promise((resolve, reject) => {
146
115
  const browsersList = require('../package.json').browserslist;
147
-
148
116
  const modulesHandler = new ModulesHandler(widgets);
149
117
  const compiledMetadata = {};
150
- const options = {}; // while using `less/lib/less-browser`, the global options are not passed to the `render` method, lets do it by ourselves
118
+ const options = {};
151
119
 
120
+ // while using `less/lib/less-browser`, the global options are not passed to the `render` method, lets do it by ourselves
152
121
  if (this.lessCompiler.options && typeof this.lessCompiler.options === 'object') {
153
122
  Object.assign(options, this.lessCompiler.options);
154
123
  }
155
-
156
124
  const customOptions = {
157
125
  modifyVars: modifyVars,
158
126
  plugins: [new LessPluginAutoPrefix({
@@ -182,7 +150,6 @@ class LessTemplateLoader {
182
150
  });
183
151
  });
184
152
  }
185
-
186
153
  compileScss(less, metadata) {
187
154
  return new Promise((resolve, reject) => {
188
155
  const compiledMetadata = {};
@@ -200,31 +167,25 @@ class LessTemplateLoader {
200
167
  });
201
168
  });
202
169
  }
203
-
204
170
  analyzeBootstrapTheme(theme, colorScheme, metadata, bootstrapMetadata, customLessContent, version) {
205
171
  let metadataVariables = '';
206
-
207
172
  for (const key in bootstrapMetadata) {
208
173
  if (Object.prototype.hasOwnProperty.call(bootstrapMetadata, key)) {
209
174
  metadataVariables += bootstrapMetadata[key] + ': dx-empty' + (version === 4 ? ' !default' : '') + ';';
210
175
  }
211
176
  }
212
-
213
177
  return new Promise(resolve => {
214
178
  const processDxTheme = data => {
215
179
  const compiledMetadata = data.compiledMetadata;
216
180
  const modifyVars = {};
217
-
218
181
  for (const key in compiledMetadata) {
219
182
  if (Object.prototype.hasOwnProperty.call(compiledMetadata, key)) {
220
183
  const value = compiledMetadata[key];
221
-
222
184
  if (value !== 'dx-empty') {
223
185
  modifyVars[key] = value;
224
186
  }
225
187
  }
226
188
  }
227
-
228
189
  this._loadLess(theme, colorScheme).then(less => {
229
190
  const metadataVariables = {};
230
191
  metadata.forEach(metaItem => {
@@ -239,7 +200,6 @@ class LessTemplateLoader {
239
200
  });
240
201
  });
241
202
  };
242
-
243
203
  if (version === 3) {
244
204
  this.compileLess(metadataVariables + customLessContent, {}, bootstrapMetadata).then(processDxTheme);
245
205
  } else if (version === 4) {
@@ -253,23 +213,18 @@ class LessTemplateLoader {
253
213
  }
254
214
  });
255
215
  }
256
-
257
216
  _loadLess(theme, colorScheme) {
258
217
  const path = getBundleName(theme, colorScheme);
259
218
  return this._loadLessByFileName(path);
260
219
  }
261
-
262
220
  _loadLessByFileName(fileName) {
263
221
  return this.readFile(this.themeBuilderLessPath + fileName);
264
222
  }
265
-
266
223
  _makeInfoHeader() {
267
224
  const generatedBy = '* Generated by the DevExpress ThemeBuilder';
268
225
  const versionString = '* Version: ' + this.version;
269
226
  const link = '* http://js.devexpress.com/ThemeBuilder/';
270
227
  return ['/*', generatedBy, versionString, link, '*/'].join('\n') + '\n\n';
271
228
  }
272
-
273
229
  }
274
-
275
230
  module.exports = LessTemplateLoader;
@@ -1,15 +1,12 @@
1
1
  const semver = require('semver');
2
-
3
2
  class MetadataLoader {
4
3
  constructor() {
5
4
  this.fullMetadata = require('../data/metadata/dx-theme-builder-metadata');
6
5
  this.migrationMetadata = require('../data/migration-metadata/migration-metadata');
7
6
  }
8
-
9
7
  load(theme, colorScheme) {
10
8
  return new Promise(resolve => {
11
9
  const metadata = this.fullMetadata[theme + '_' + colorScheme.replace(/-/g, '_') + '_metadata'];
12
-
13
10
  if (semver.gte(this.version(), '18.2.8') && this.migrationMetadata[theme]) {
14
11
  this.migrationMetadata[theme].forEach(value => {
15
12
  metadata.push({
@@ -17,15 +14,11 @@ class MetadataLoader {
17
14
  });
18
15
  });
19
16
  }
20
-
21
17
  resolve(metadata);
22
18
  });
23
19
  }
24
-
25
20
  version() {
26
21
  return this.fullMetadata['_metadata_version'];
27
22
  }
28
-
29
23
  }
30
-
31
24
  module.exports = MetadataLoader;
@@ -3,21 +3,17 @@ class MetadataRepository {
3
3
  this.repositoryData = {};
4
4
  this.metadataLoader = metadataLoader;
5
5
  }
6
-
7
6
  getDataItemByKey(key, theme) {
8
7
  let result = null;
9
8
  const themeData = this.repositoryData[theme.name + '-' + theme.colorScheme];
10
-
11
9
  for (let i = 0; i < themeData.length; i++) {
12
10
  if (themeData[i].Key === key) {
13
11
  result = themeData[i];
14
12
  break;
15
13
  }
16
14
  }
17
-
18
15
  return result;
19
16
  }
20
-
21
17
  init(themes) {
22
18
  const promises = [];
23
19
  themes.forEach(theme => {
@@ -30,23 +26,18 @@ class MetadataRepository {
30
26
  });
31
27
  return Promise.all(promises);
32
28
  }
33
-
34
29
  getData(theme) {
35
30
  if (!theme) return this.repositoryData;
36
31
  return this.repositoryData[theme.name + '-' + theme.colorScheme];
37
32
  }
38
-
39
33
  updateData(data, theme) {
40
34
  data.forEach(item => {
41
35
  const dataItem = this.getDataItemByKey(item.key, theme);
42
36
  if (item) dataItem.Value = item.value;
43
37
  });
44
38
  }
45
-
46
39
  getVersion() {
47
40
  return this.metadataLoader.version();
48
41
  }
49
-
50
42
  }
51
-
52
43
  module.exports = MetadataRepository;
@@ -6,18 +6,15 @@ class ModulesHandler {
6
6
  this.bundledWidgets = [];
7
7
  this.unusedWidgets = [];
8
8
  }
9
-
10
9
  getWidgetFromImport(importString) {
11
10
  const lastSlashIndex = importString.lastIndexOf('/');
12
11
  const fileName = importString.substr(lastSlashIndex + 1);
13
12
  const dotIndex = fileName.indexOf('.');
14
13
  return fileName.substr(0, dotIndex);
15
14
  }
16
-
17
15
  availableWidgets(less) {
18
16
  const widgets = [];
19
17
  const widgetsListIndex = less.indexOf(this.SPECIAL_COMMENT);
20
-
21
18
  if (widgetsListIndex >= 0) {
22
19
  less.substr(widgetsListIndex + this.SPECIAL_COMMENT.length).split('\n').filter(item => !!item).forEach(importString => {
23
20
  widgets.push({
@@ -26,30 +23,22 @@ class ModulesHandler {
26
23
  });
27
24
  });
28
25
  }
29
-
30
26
  return widgets;
31
27
  }
32
-
33
28
  lessPlugin() {
34
29
  const getFileNameFromContext = context => {
35
30
  const fullPath = context && context.fileInfo && context.fileInfo.filename;
36
-
37
31
  if (typeof fullPath !== 'string') {
38
32
  return null;
39
33
  }
40
-
41
34
  let fileNameIndex = fullPath.lastIndexOf('/');
42
-
43
35
  if (fileNameIndex < 0) {
44
36
  fileNameIndex = fullPath.lastIndexOf('\\');
45
37
  }
46
-
47
38
  return fullPath.substr(fileNameIndex + 1);
48
39
  };
49
-
50
40
  const removeUnnecessaryWidgets = less => {
51
41
  const availableWidgets = this.availableWidgets(less);
52
-
53
42
  if (this.widgets.length > 0) {
54
43
  availableWidgets.forEach(widget => {
55
44
  if (this.widgets.indexOf(widget.name) < 0) {
@@ -62,27 +51,21 @@ class ModulesHandler {
62
51
  } else {
63
52
  this.bundledWidgets = availableWidgets.map(w => w.name);
64
53
  }
65
-
66
54
  return less;
67
55
  };
68
-
69
56
  return {
70
57
  install: (_, pluginManager) => {
71
58
  pluginManager.addPreProcessor({
72
59
  process: (less, context) => {
73
60
  const fileName = getFileNameFromContext(context);
74
-
75
61
  if (fileName === this.FILE_FOR_PARSING) {
76
62
  less = removeUnnecessaryWidgets(less);
77
63
  }
78
-
79
64
  return less;
80
65
  }
81
66
  });
82
67
  }
83
68
  };
84
69
  }
85
-
86
70
  }
87
-
88
71
  module.exports = ModulesHandler;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "devextreme-themebuilder",
3
- "version": "19.2.13",
3
+ "version": "19.2.15",
4
4
  "description": "DevExtreme ThemeBuilder",
5
5
  "keywords": ["devextreme", "devexpress"],
6
6
  "main": "modules/builder.js",