builder/lib/processors/libraryLessGenerator.js

  1. const log = require("@ui5/logger").getLogger("builder:processors:libraryLessGenerator");
  3. const {promisify} = require("util");
  4. const posixPath = require("path").posix;
  5. const Resource = require("@ui5/fs").Resource;
  7. const IMPORT_PATTERN = /@import .*"(.*)";/g;
  8. const BASE_LESS_PATTERN = /^\/resources\/sap\/ui\/core\/themes\/([^/]+)\/base\.less$/;
  9. const GLOBAL_LESS_PATTERN = /^\/resources\/sap\/ui\/core\/themes\/([^/]+)\/global\.less$/;
  11. class ImportError extends Error {
  12. 	constructor(message) {
  13. 		super();
  14. 		this.name = "ImportError";
  15. 		this.message = message;
  16. 	}
  17. }
  19. class LibraryLessGenerator {
  20. 	constructor({fs}) {
  21. 		const readFile = promisify(fs.readFile);
  22. 		this.readFile = async (filePath) => readFile(filePath, {encoding: "utf8"});
  23. 	}
  24. 	async generate({filePath, fileContent}) {
  25. 		return `/* NOTE: This file was generated as an optimized version of ` +
  26. 			`"library.source.less" for the Theme Designer. */\n\n` +
  27. 			await this.resolveLessImports({
  28. 				filePath,
  29. 				fileContent
  30. 			});
  31. 	}
  32. 	static getPathToRoot(baseDir) {
  33. 		return posixPath.relative(baseDir, "/") + "/";
  34. 	}
  35. 	async resolveLessImports({filePath, fileContent}) {
  36. 		const imports = this.findLessImports(fileContent);
  37. 		if (!imports.length) {
  38. 			// Skip processing when no imports are found
  39. 			return fileContent;
  40. 		}
  41. 		const replacements = await Promise.all(imports.map(async (importMatch) => {
  42. 			const baseDir = posixPath.dirname(filePath);
  43. 			const resolvedFilePath = posixPath.resolve(baseDir, importMatch.path);
  44. 			try {
  45. 				importMatch.content = await this.resolveLessImport(importMatch.path, resolvedFilePath, baseDir);
  46. 			} catch (error) {
  47. 				if (error instanceof ImportError) {
  48. 					// Add message of import errors after the import statements
  49. 					// Currently those errors should not break the build (see comments in resolveLessImport)
  50. 					importMatch.content = importMatch.fullMatch + ` /* ${error} */`;
  51. 				} else {
  52. 					throw error;
  53. 				}
  54. 			}
  55. 			return importMatch;
  56. 		}));
  58. 		// Apply replacements in reverse order to not modify the relevant indices
  59. 		const array = Array.from(fileContent);
  60. 		for (let i = replacements.length - 1; i >= 0; i--) {
  61. 			const replacement = replacements[i];
  62. 			if (!replacement.content) {
  63. 				continue;
  64. 			}
  65. 			array.splice(
  66. 				/* index   */ replacement.matchStart,
  67. 				/* count   */ replacement.matchLength,
  68. 				/* insert  */ replacement.content
  69. 			);
  70. 		}
  71. 		return array.join("");
  72. 	}
  73. 	async resolveLessImport(originalFilePath, resolvedFilePath, baseDir) {
  74. 		// Rewrite base.less imports
  75. 		const baseLessMatch = BASE_LESS_PATTERN.exec(resolvedFilePath);
  76. 		if (baseLessMatch) {
  77. 			let baseLessThemeName = baseLessMatch[1];
  78. 			if (baseLessThemeName === "base") {
  79. 				baseLessThemeName = "baseTheme";
  80. 			}
  82. 			const baseLessPath = LibraryLessGenerator.getPathToRoot(baseDir) +
  83. 				"Base/baseLib/" + baseLessThemeName + "/base.less";
  84. 			return "@import \"" + baseLessPath + "\"; /* ORIGINAL IMPORT PATH: \"" + originalFilePath + "\" */\n";
  85. 		}
  87. 		// Rewrite library imports to correct file name
  88. 		if (posixPath.basename(resolvedFilePath) === "library.source.less") {
  89. 			return `@import "${originalFilePath.replace(/library\.source\.less$/, "library.less")}";`;
  90. 		}
  92. 		// Excluding global.less within sap.ui.core
  93. 		// It must be imported by the Theme Designer (also see declaration in sap/ui/core/.theming)
  94. 		if (GLOBAL_LESS_PATTERN.test(resolvedFilePath)) {
  95. 			return null;
  96. 		}
  98. 		/*
  99. 		 * Log error in case of files which are not in the same directory as the current file because
  100. 		 * inlining them would break relative URLs.
  101. 		 * A possible solution would be to rewrite relative URLs when inlining the content.
  102. 		 *
  103. 		 * Keeping the import will cause errors since only "library.less" and "global.less" are
  104. 		 * configured to be available to the Theme Designer (.theming generated in generateThemeDesignerResources).
  105. 		 * However, the previous implementation did not break the build.
  106. 		 * In many cases the library.less file is currently not relevant so breaking the build would cause
  107. 		 * unnecessary issues.
  108. 		 *
  109. 		 */
  110. 		const relativeFilePath = posixPath.relative(baseDir, resolvedFilePath);
  111. 		if (relativeFilePath.includes(posixPath.sep)) {
  112. 			log.error(
  113. 				`Could not inline import '${resolvedFilePath}' outside of theme directory '${baseDir}'. ` +
  114. 				`Stylesheets must be located in the theme directory (no sub-directories). ` +
  115. 				`The generated '${baseDir}/library.less' will cause errors when compiled with the Theme Designer.`
  116. 			);
  117. 			// Throw error to be added as comment to the import statement
  118. 			throw new ImportError("Could not inline import outside of theme directory");
  119. 		}
  121. 		let importedFileContent;
  122. 		try {
  123. 			importedFileContent = await this.readFile(resolvedFilePath);
  124. 		} catch (err) {
  125. 			if (err.code === "ENOENT") {
  126. 				throw new Error(
  127. 					`libraryLessGenerator: Unable to resolve import '${originalFilePath}' from '${baseDir}'\n` +
  128. 					err.message
  129. 				);
  130. 			} else {
  131. 				throw err;
  132. 			}
  133. 		}
  134. 		return `/* START "${originalFilePath}" */\n` +
  135. 			await this.resolveLessImports({
  136. 				filePath: resolvedFilePath,
  137. 				fileContent: importedFileContent
  138. 			}) +
  139. 			`\n/* END "${originalFilePath}" */\n`;
  140. 	}
  141. 	findLessImports(fileContent) {
  142. 		const imports = [];
  143. 		let match;
  144. 		while ((match = IMPORT_PATTERN.exec(fileContent)) !== null) {
  145. 			imports.push({
  146. 				path: match[1],
  147. 				fullMatch: match[0],
  148. 				matchStart: match.index,
  149. 				matchLength: match[0].length
  150. 			});
  151. 		}
  152. 		return imports;
  153. 	}
  154. }
  156. /**
  157.  * Creates a "library.less" file for the SAP Theme Designer based on a "library.source.less" file.
  158.  *
  159.  * <ul>
  160.  * <li>Bundles all *.less file of the theme by replacing the import with the corresponding file content</li>
  161.  * <li>Imports to "base.less" are adopted so that they point to the "BaseLib" that is available within
  162.  * the Theme Designer infrastructure</li>
  163.  * <li>Imports to "global.less" are kept as they should not be bundled</li>
  164.  * <li>Imports to "library.source.less" are adopted to "library.less"</li>
  165.  * </ul>
  166.  *
  167.  * @public
  168.  * @alias module:@ui5/builder.processors.libraryLessGenerator
  169.  * @param {object} parameters Parameters
  170.  * @param {module:@ui5/fs.Resource[]} parameters.resources List of <code>library.source.less</code>
  171.  * resources
  172.  * @param {fs|module:@ui5/fs.fsInterface} parameters.fs Node fs or custom
  173.  * [fs interface]{@link module:resources/module:@ui5/fs.fsInterface}
  174.  * @returns {Promise<module:@ui5/fs.Resource[]>} Promise resolving with library.less resources
  175.  */
  176. module.exports = async function({resources, fs}) {
  177. 	const generator = new LibraryLessGenerator({fs});
  178. 	return Promise.all(resources.map(async (librarySourceLessResource) => {
  179. 		const filePath = librarySourceLessResource.getPath();
  180. 		const fileContent = await librarySourceLessResource.getString();
  182. 		log.verbose(`Generating library.less file based on ${filePath}`);
  184. 		const libraryLessFileContent = await generator.generate({filePath, fileContent});
  185. 		const libraryLessFilePath = posixPath.join(posixPath.dirname(filePath), "library.less");
  187. 		return new Resource({
  188. 			path: libraryLessFilePath,
  189. 			string: libraryLessFileContent
  190. 		});
  191. 	}));
  192. };
  194. // Export class for testing only
  195. /* istanbul ignore else */
  196. if (process.env.NODE_ENV === "test") {
  197. 	module.exports._LibraryLessGenerator = LibraryLessGenerator;
  198. }