less-openui5 - npm Package Compare versions

Comparing version 0.8.3 to 0.8.4

CHANGELOG.md

@@ -5,4 +5,10 @@ # Changelog
 
-A list of unreleased changes can be found [here](https://github.com/SAP/less-openui5/compare/v0.8.3...HEAD).
+A list of unreleased changes can be found [here](https://github.com/SAP/less-openui5/compare/v0.8.4...HEAD).
 
+<a name="v0.8.4"></a>
+## [v0.8.4] - 2020-02-10
+### Features
+- Add experimental CSS variables and skeleton build ([#108](https://github.com/SAP/less-openui5/issues/108)) [`e6d8503`](https://github.com/SAP/less-openui5/commit/e6d85038f077ff252e8240d9924e7c4761ac4e5e)
+
+
 <a name="v0.8.3"></a>
@@ -45,2 +51,3 @@ ## [v0.8.3] - 2020-01-07
 
+[v0.8.4]: https://github.com/SAP/less-openui5/compare/v0.8.3...v0.8.4
 [v0.8.3]: https://github.com/SAP/less-openui5/compare/v0.8.2...v0.8.3
@@ -47,0 +54,0 @@ [v0.8.2]: https://github.com/SAP/less-openui5/compare/v0.8.1...v0.8.2

lib/diff.js

@@ -1,2 +0,2 @@
-// Copyright 2019 SAP SE.
+// Copyright 2020 SAP SE.
 //
@@ -3,0 +3,0 @@ // Licensed under the Apache License, Version 2.0 (the "License");

lib/fileUtils.js

@@ -1,2 +0,2 @@
-// Copyright 2019 SAP SE.
+// Copyright 2020 SAP SE.
 //
@@ -3,0 +3,0 @@ // Licensed under the Apache License, Version 2.0 (the "License");

lib/index.js

@@ -1,2 +0,2 @@
-// Copyright 2019 SAP SE.
+// Copyright 2020 SAP SE.
 //
@@ -29,3 +29,2 @@ // Licensed under the Apache License, Version 2.0 (the "License");
 // Plugins
-const RTLPlugin = require("./plugin/rtl");
 const ImportCollectorPlugin = require("./plugin/import-collector");
@@ -122,2 +121,11 @@ const VariableCollectorPlugin = require("./plugin/variable-collector");
 
+/**
+ * Creates a themebuild
+ * @param {object} options
+ * @param {object} options.compiler compiler object as passed to less
+ * @param {boolean} options.cssVariables whether or not to enable css variables output
+ * @param {string} options.lessInput less string input
+ * @param {string} options.lessInputPath less file input
+ * @returns {{css: string, cssRtl: string, variables: {}, imports: [], cssSkeleton: string, cssSkeletonRtl: string, cssVariables: string, cssVariablesSource: string }}
+ */
 Builder.prototype.build = function(options) {
@@ -167,3 +175,3 @@ const that = this;
 				// eslint-disable-next-line no-console
-				console.log("File not found");
+				console.log("File not found: " + file);
 				callback({type: "File", message: "'" + file + "' wasn't found"});
@@ -200,2 +208,8 @@ } else {
 
+		// inject the library name as prefix (e.g. "sap.m" as "_sap_m")
+		if (options.library && typeof options.library.name === "string") {
+			const libName = config.libName = options.library.name;
+			config.prefix = "_" + libName.replace(/\./g, "_") + "_";
+		}
+
 		// Keep filename for later usage (see ImportCollectorPlugin) as less modifies the parserOptions.filename
@@ -210,4 +224,5 @@ const filename = parserOptions.filename;
 
+		const parser = createParser(parserOptions, fnFileHandler);
+
 		return new Promise(function(resolve, reject) {
-			const parser = createParser(parserOptions, fnFileHandler);
 			parser.parse(config.content, function(err, tree) {
@@ -232,3 +247,3 @@ if (err) {
 			// render to css
-			result.css = tree.toCSS(assign(options.compiler, {
+			result.css = tree.toCSS(assign({}, options.compiler, {
 				plugins: [oImportCollector, oVariableCollector]
@@ -247,5 +262,11 @@ }));
 			// also compile rtl-version if requested
+			let oRTL;
 			if (options.rtl) {
-				result.cssRtl = tree.toCSS(assign(options.compiler, {
-					plugins: [new RTLPlugin()]
+				const RTLPlugin = require("./plugin/rtl");
+				oRTL = new RTLPlugin();
+			}
+
+			if (oRTL) {
+				result.cssRtl = tree.toCSS(assign({}, options.compiler, {
+					plugins: [oRTL]
 				}));
@@ -258,2 +279,43 @@ }
 
+			// also compile css-variables version if requested
+			if (options.cssVariables) {
+				return new Promise(function(resolve, reject) {
+					// parse the content again to have a clean tree
+					parser.parse(config.content, function(err, tree) {
+						if (err) {
+							reject(err);
+						} else {
+							resolve(tree);
+						}
+					});
+				}).then(function(tree) {
+					// generate the skeleton-css and the less-variables
+					const CSSVariablesCollectorPlugin = require("./plugin/css-variables-collector");
+					const oCSSVariablesCollector = new CSSVariablesCollectorPlugin(config);
+					result.cssSkeleton = tree.toCSS(assign({}, options.compiler, {
+						plugins: [oCSSVariablesCollector]
+					}));
+					result.cssVariablesSource = oCSSVariablesCollector.toLessVariables();
+					if (oRTL) {
+						const oCSSVariablesCollectorRTL = new CSSVariablesCollectorPlugin(config);
+						result.cssSkeletonRtl = tree.toCSS(assign({}, options.compiler, {
+							plugins: [oCSSVariablesCollectorRTL, oRTL]
+						}));
+					}
+					return tree;
+				}).then(function(tree) {
+					// generate the css-variables content out of the less-variables
+					return new Promise(function(resolve, reject) {
+						parser.parse(result.cssVariablesSource, function(err, tree) {
+							if (err) {
+								reject(err);
+							} else {
+								result.cssVariables = tree.toCSS(assign({}, options.compiler));
+								resolve(result);
+							}
+						});
+					});
+				});
+			}
+
 			return result;
@@ -284,2 +346,6 @@ });
 				}
+				if (options.cssVariables) {
+					// for the css variables build we just add it to the variables
+					result.cssVariables += parameterStyleRule;
+				}
 			}
@@ -371,2 +437,10 @@ resolve(result);
 
+			if (options.cssVariables) {
+				results.embeddedCompare.cssVariables += applyScope(results.embeddedCompare.cssVariables, results.embedded.cssVariables);
+				results.embeddedCompare.cssSkeleton += applyScope(results.embeddedCompare.cssSkeleton, results.embedded.cssSkeleton);
+				if (options.rtl) {
+					results.embeddedCompare.cssSkeletonRtl += applyScope(results.embeddedCompare.cssSkeletonRtl, results.embedded.cssSkeletonRtl, true);
+				}
+			}
+
 			// Create diff between embeddedCompare and embeded variables
@@ -373,0 +447,0 @@ results.embeddedCompare.variables = getScopeVariables({

lib/less/parser.js

@@ -1,2 +0,2 @@
-// Copyright 2019 SAP SE.
+// Copyright 2020 SAP SE.
 //
@@ -3,0 +3,0 @@ // Licensed under the Apache License, Version 2.0 (the "License");

lib/plugin/import-collector.js

@@ -1,2 +0,2 @@
-// Copyright 2019 SAP SE.
+// Copyright 2020 SAP SE.
 //
@@ -3,0 +3,0 @@ // Licensed under the Apache License, Version 2.0 (the "License");

lib/plugin/rtl.js

@@ -1,2 +0,2 @@
-// Copyright 2019 SAP SE.
+// Copyright 2020 SAP SE.
 //
@@ -3,0 +3,0 @@ // Licensed under the Apache License, Version 2.0 (the "License");

lib/plugin/variable-collector.js

@@ -1,2 +0,2 @@
-// Copyright 2019 SAP SE.
+// Copyright 2020 SAP SE.
 //
@@ -3,0 +3,0 @@ // Licensed under the Apache License, Version 2.0 (the "License");

lib/scope.js

@@ -1,2 +0,2 @@
-// Copyright 2019 SAP SE.
+// Copyright 2020 SAP SE.
 //
@@ -61,4 +61,8 @@ // Licensed under the Apache License, Version 2.0 (the "License");
 		} else {
-			// if selector matches custom css rule
-			if (aMatch[0].match(rRegex)) {
+			if (aMatch[0] === ":root") {
+				// remove the :root scope
+				sSelector1 = sScopeName;
+				sSelector2 = null;
+			} else if (aMatch[0].match(rRegex)) {
+				// selector matches custom css rule
 				sSelector1 = aMatch[0] + sScopeName;
@@ -65,0 +69,0 @@ sSelector2 = aMatch[0] + " " + sScopeName;

package.json

 {
   "name": "less-openui5",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Build OpenUI5 themes with Less.js",
@@ -8,3 +8,3 @@ "scripts": {
     "unit": "mocha test/*.js",
-    "unit-debug": "mocha --inspect --debug-brk test/*.js",
+    "unit-debug": "mocha --inspect --inspect-brk test/*.js",
     "test": "npm run lint && npm run unit",
@@ -47,4 +47,4 @@ "preversion": "npm test",
     "graceful-fs": "^4.2.3",
-    "mocha": "^6.2.2"
+    "mocha": "^7.0.1"
   }
 }

README.md

@@ -105,2 +105,9 @@ ![OpenUI5](http://openui5.org/images/OpenUI5_new_big_side.png)
 
+##### cssVariables
+
+Type `boolean`  
+Default: `false`
+
+Create files for experimental CSS Variables support ([`cssSkeleton`](#cssSkeleton), [`cssSkeletonRtl`](#cssSkeletonRtl), [`cssVariablesSource`](#cssVariablesSource), [`cssVariables`](#cssVariables-1)).
+
 ##### rootPaths
@@ -216,2 +223,30 @@
 
+##### cssSkeleton
+
+Type: `string`  
+Only available when [`options.cssVariables`](#cssVariables) is set to `true`
+
+CSS with references to CSS Variables.
+
+##### cssSkeletonRtl
+
+Type: `string`  
+Only available when [`options.cssVariables`](#cssVariables) and [`options.rtl`](#rtl) are set to `true`
+
+Mirrored (right-to-left) CSS with references to CSS Variables (if `rtl` option was enabled).
+
+##### cssVariablesSource
+
+Type: `string`  
+Only available when [`options.cssVariables`](#cssVariables) is set to `true`
+
+Source file used to compile the `cssVariables` output.
+
+##### cssVariables
+
+Type: `string`  
+Only available when [`options.cssVariables`](#cssVariables) is set to `true`
+
+Definition of CSS Variables based on LESS variables.
+
 ### .clearCache()
@@ -230,2 +265,2 @@ Clears all cached build results.
 
-[Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0) © 2019 [SAP SE](http://www.sap.com)
+[Apache License 2.0](http://www.apache.org/licenses/LICENSE-2.0) © 2020 [SAP SE](http://www.sap.com)

No alert changes

Improved metrics

Total package byte prevSize

363301

increased by2.95%

Number of package files

60

increased by1.69%

Lines of code

8275

increased by3.17%

Number of lines in readme file

264

increased by15.28%

No dependency changes