Skip to content

Commit ddf0160

Browse files
matz3matz3
committed
[INTERNAL] Add inlineThemingParameters/inlineCssVariables params, refactor
1 parent 4dc4d51 commit ddf0160

File tree

1 file changed

+124
-128
lines changed

1 file changed

+124
-128
lines changed

‎lib/index.js

Lines changed: 124 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,14 @@ Builder.prototype.cacheTheme = function(result) {
104104
};
105105

106106
/**
107-
* Creates a themebuild
107+
* Runs a theme build
108108
* @param {object} options
109109
* @param {object} options.compiler compiler object as passed to less
110110
* @param {boolean} options.cssVariables whether or not to enable css variables output
111+
* @param {boolean} [options.inlineThemingParameters=true] Whether theming parameters should be inlined into the
112+
* library CSS content via background-image
113+
* @param {boolean} [options.inlineCssVariables=false] Whether theming parameters should be inlined into the
114+
* library CSS content via CSS Variables
111115
* @param {string} options.lessInput less string input
112116
* @param {string} options.lessInputPath less file input
113117
* @returns {{css: string, cssRtl: string, variables: {}, imports: [], cssSkeleton: string, cssSkeletonRtl: string, cssVariables: string, cssVariablesSource: string }}
@@ -128,7 +132,9 @@ Builder.prototype.build = function(options) {
128132
parser: {},
129133
compiler: {},
130134
library: {},
131-
scope: {}
135+
scope: {},
136+
inlineThemingParameters: true,
137+
inlineCssVariables: false,
132138
}, options);
133139

134140
if (options.compiler.sourceMap) {
@@ -178,7 +184,7 @@ Builder.prototype.build = function(options) {
178184
});
179185
}
180186

181-
function compile(config) {
187+
async function compile(config) {
182188
const parserOptions = clone(options.parser);
183189
let rootpath;
184190

@@ -205,149 +211,139 @@ Builder.prototype.build = function(options) {
205211

206212
const parser = createParser(parserOptions, fnFileHandler);
207213

208-
return new Promise(function(resolve, reject) {
209-
parser.parse(config.content, function(err, tree) {
210-
if (err) {
211-
reject(err);
212-
} else {
213-
resolve(tree);
214-
}
214+
function parseContent(content) {
215+
return new Promise(function(resolve, reject) {
216+
parser.parse(content, function(err, tree) {
217+
if (err) {
218+
reject(err);
219+
} else {
220+
resolve(tree);
221+
}
222+
});
215223
});
216-
}).then(async function(tree) {
217-
const result = {};
218-
219-
result.tree = tree;
224+
}
220225

221-
// plugins to collect imported files and variable values
222-
const oImportCollector = new ImportCollectorPlugin({
223-
importMappings: mFileMappings[filename]
224-
});
225-
const oVariableCollector = new VariableCollectorPlugin(options.compiler);
226-
const oUrlCollector = new UrlCollector();
226+
const tree = await parseContent(config.content);
227+
const result = {tree};
227228

228-
// render to css
229-
result.css = tree.toCSS(Object.assign({}, options.compiler, {
230-
plugins: [oImportCollector, oVariableCollector, oUrlCollector]
231-
}));
232-
233-
// retrieve imported files
234-
result.imports = oImportCollector.getImports();
229+
// plugins to collect imported files and variable values
230+
const oImportCollector = new ImportCollectorPlugin({
231+
importMappings: mFileMappings[filename]
232+
});
233+
const oVariableCollector = new VariableCollectorPlugin(options.compiler);
234+
const oUrlCollector = new UrlCollector();
235+
236+
// render to css
237+
result.css = tree.toCSS(Object.assign({}, options.compiler, {
238+
plugins: [oImportCollector, oVariableCollector, oUrlCollector]
239+
}));
240+
241+
// retrieve imported files
242+
result.imports = oImportCollector.getImports();
243+
244+
// retrieve reduced set of variables
245+
result.variables = oVariableCollector.getVariables(Object.keys(mFileMappings[filename] || {}));
246+
247+
// retrieve all variables
248+
result.allVariables = oVariableCollector.getAllVariables();
249+
250+
// also compile rtl-version if requested
251+
let oRTL;
252+
if (options.rtl) {
253+
const RTLPlugin = require("./plugin/rtl");
254+
oRTL = new RTLPlugin();
255+
256+
const urls = oUrlCollector.getUrls();
257+
258+
const existingImgRtlUrls = (await Promise.all(
259+
urls.map(async ({currentDirectory, relativeUrl}) => {
260+
const relativeImgRtlUrl = RTLPlugin.getRtlImgUrl(relativeUrl);
261+
if (relativeImgRtlUrl) {
262+
const resolvedImgRtlUrl = path.posix.join(currentDirectory, relativeImgRtlUrl);
263+
if (await that.fileUtils.findFile(resolvedImgRtlUrl, options.rootPaths)) {
264+
return resolvedImgRtlUrl;
265+
}
266+
}
267+
})
268+
)).filter(Boolean);
235269

236-
// retrieve reduced set of variables
237-
result.variables = oVariableCollector.getVariables(Object.keys(mFileMappings[filename] || {}));
270+
oRTL.setExistingImgRtlPaths(existingImgRtlUrls);
271+
}
238272

239-
// retrieve all variables
240-
result.allVariables = oVariableCollector.getAllVariables();
273+
if (oRTL) {
274+
result.cssRtl = tree.toCSS(Object.assign({}, options.compiler, {
275+
plugins: [oRTL]
276+
}));
277+
}
241278

242-
// also compile rtl-version if requested
243-
let oRTL;
244-
if (options.rtl) {
245-
const RTLPlugin = require("./plugin/rtl");
246-
oRTL = new RTLPlugin();
247-
248-
const urls = oUrlCollector.getUrls();
249-
250-
const existingImgRtlUrls = (await Promise.all(
251-
urls.map(async ({currentDirectory, relativeUrl}) => {
252-
const relativeImgRtlUrl = RTLPlugin.getRtlImgUrl(relativeUrl);
253-
if (relativeImgRtlUrl) {
254-
const resolvedImgRtlUrl = path.posix.join(currentDirectory, relativeImgRtlUrl);
255-
if (await that.fileUtils.findFile(resolvedImgRtlUrl, options.rootPaths)) {
256-
return resolvedImgRtlUrl;
257-
}
258-
}
259-
})
260-
)).filter(Boolean);
279+
if (rootpath) {
280+
result.imports.unshift(rootpath);
281+
}
261282

262-
oRTL.setExistingImgRtlPaths(existingImgRtlUrls);
263-
}
283+
// also compile css-variables version if requested
284+
if (options.cssVariables) {
285+
// parse the content again to have a clean tree
286+
const cssVariablesSkeletonTree = await parseContent(config.content);
264287

288+
// generate the skeleton-css and the less-variables
289+
const CSSVariablesCollectorPlugin = require("./plugin/css-variables-collector");
290+
const oCSSVariablesCollector = new CSSVariablesCollectorPlugin(config);
291+
result.cssSkeleton = cssVariablesSkeletonTree.toCSS(Object.assign({}, options.compiler, {
292+
plugins: [oCSSVariablesCollector]
293+
}));
294+
result.cssVariablesSource = oCSSVariablesCollector.toLessVariables();
265295
if (oRTL) {
266-
result.cssRtl = tree.toCSS(Object.assign({}, options.compiler, {
267-
plugins: [oRTL]
296+
const oCSSVariablesCollectorRTL = new CSSVariablesCollectorPlugin(config);
297+
result.cssSkeletonRtl = cssVariablesSkeletonTree.toCSS(Object.assign({}, options.compiler, {
298+
plugins: [oCSSVariablesCollectorRTL, oRTL]
268299
}));
269300
}
270301

271-
if (rootpath) {
272-
result.imports.unshift(rootpath);
273-
}
274-
275-
// also compile css-variables version if requested
276-
if (options.cssVariables) {
277-
return new Promise(function(resolve, reject) {
278-
// parse the content again to have a clean tree
279-
parser.parse(config.content, function(err, tree) {
280-
if (err) {
281-
reject(err);
282-
} else {
283-
resolve(tree);
284-
}
285-
});
286-
}).then(function(tree) {
287-
// generate the skeleton-css and the less-variables
288-
const CSSVariablesCollectorPlugin = require("./plugin/css-variables-collector");
289-
const oCSSVariablesCollector = new CSSVariablesCollectorPlugin(config);
290-
result.cssSkeleton = tree.toCSS(Object.assign({}, options.compiler, {
291-
plugins: [oCSSVariablesCollector]
292-
}));
293-
result.cssVariablesSource = oCSSVariablesCollector.toLessVariables();
294-
if (oRTL) {
295-
const oCSSVariablesCollectorRTL = new CSSVariablesCollectorPlugin(config);
296-
result.cssSkeletonRtl = tree.toCSS(Object.assign({}, options.compiler, {
297-
plugins: [oCSSVariablesCollectorRTL, oRTL]
298-
}));
299-
}
300-
return tree;
301-
}).then(function(tree) {
302-
// generate the css-variables content out of the less-variables
303-
return new Promise(function(resolve, reject) {
304-
parser.parse(result.cssVariablesSource, function(err, tree) {
305-
if (err) {
306-
reject(err);
307-
} else {
308-
const CSSVariablesPointerPlugin = require("./plugin/css-variables-pointer");
309-
result.cssVariables = tree.toCSS(Object.assign({}, options.compiler, {
310-
plugins: [new CSSVariablesPointerPlugin()]
311-
}));
312-
resolve(result);
313-
}
314-
});
315-
});
316-
});
317-
}
302+
// generate the css-variables content out of the less-variables
303+
const cssVariablesTree = await parseContent(result.cssVariablesSource);
304+
const CSSVariablesPointerPlugin = require("./plugin/css-variables-pointer");
305+
result.cssVariables = cssVariablesTree.toCSS(Object.assign({}, options.compiler, {
306+
plugins: [new CSSVariablesPointerPlugin()]
307+
}));
308+
}
318309

319-
return result;
320-
});
310+
return result;
321311
}
322312

323-
function addInlineParameters(result) {
324-
return new Promise(function(resolve, reject) {
325-
if (typeof options.library === "object" && typeof options.library.name === "string") {
326-
const parameters = JSON.stringify(result.variables);
327-
328-
// properly escape the parameters to be part of a data-uri
329-
// + escaping single quote (') as it is used to surround the data-uri: url('...')
330-
const escapedParameters = encodeURIComponent(parameters).replace(/'/g, function(char) {
331-
return escape(char);
332-
});
313+
async function addInlineParameters(result) {
314+
if (
315+
options.inlineThemingParameters === true &&
316+
typeof options.library === "object" && typeof options.library.name === "string"
317+
) {
318+
const parameters = JSON.stringify(result.variables);
319+
320+
// properly escape the parameters to be part of a data-uri
321+
// + escaping single quote (') as it is used to surround the data-uri: url('...')
322+
const escapedParameters = encodeURIComponent(parameters).replace(/'/g, function(char) {
323+
return escape(char);
324+
});
333325

334-
// embed parameter variables as plain-text string into css
335-
const parameterStyleRule = "\n/* Inline theming parameters */\n#sap-ui-theme-" +
336-
options.library.name.replace(/\./g, "\\.") +
337-
"{background-image:url('data:text/plain;utf-8," + escapedParameters + "')}\n";
326+
// embed parameter variables as plain-text string into css
327+
const parameterStyleRule = "\n/* Inline theming parameters */\n#sap-ui-theme-" +
328+
options.library.name.replace(/\./g, "\\.") +
329+
"{background-image:url('data:text/plain;utf-8," + escapedParameters + "')}\n";
338330

339-
// embed parameter variables as plain-text string into css
340-
result.css += parameterStyleRule;
341-
if (options.rtl) {
342-
result.cssRtl += parameterStyleRule;
343-
}
344-
if (options.cssVariables) {
345-
// for the css variables build we just add it to the variables
346-
result.cssVariables += parameterStyleRule;
347-
}
331+
// embed parameter variables as plain-text string into css
332+
result.css += parameterStyleRule;
333+
if (options.rtl) {
334+
result.cssRtl += parameterStyleRule;
348335
}
349-
resolve(result);
350-
});
336+
if (options.cssVariables) {
337+
// for the css variables build we just add it to the variables
338+
result.cssVariables += parameterStyleRule;
339+
}
340+
}
341+
342+
if (options.inlineCssVariables) {
343+
// TODO
344+
}
345+
346+
return result;
351347
}
352348

353349
function getScopeVariables(options) {

0 commit comments

Comments
 (0)