@ui5/webcomponents-tools 1.17.0-rc.0 → 1.17.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+
+### Features
+
+* **framework:** scope css variables per runtime and version ([#7449](https://github.com/SAP/ui5-webcomponents/issues/7449)) ([d3f6c2e](https://github.com/SAP/ui5-webcomponents/commit/d3f6c2efba9cfda389ea4d700a375f75b3e2996b))
+
+
+
+
+
 # [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
 
 

package/components-package/postcss.components.js

@@ -1,9 +1,11 @@
 const postcssImport = require('postcss-import');
 const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
+const postcssScopeVars = require('../lib/postcss-scope-vars/index.js');
 const cssnano = require('cssnano');
-const fs = require("fs");
+const fs = require("fs")
 
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
 
 module.exports = {
 		plugins: [
@@ -16,6 +18,7 @@ module.exports = {
 					},
 				]
 			}),
-			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName }),
+			postcssScopeVars({version: packageJSON.version}),
+			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName: packageJSON.name }),
 		]
 }

package/components-package/postcss.themes.js

@@ -2,15 +2,17 @@ const postcssImport = require('postcss-import');
 const combineSelectors = require('../lib/postcss-combine-duplicated-selectors/index.js');
 const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js');
 const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
+const postcssScopeVars = require('../lib/postcss-scope-vars/index.js');
 const cssnano = require('cssnano');
-const modifySelectors = require("modify-selectors");
 const fs = require("fs");
 
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
-const selectors = [".sapUiSizeCompact", ".ui5-content-density-compact", "[data-ui5-compact-size]", "[dir=\"rtl\"]", "[dir=\"ltr\"]"];
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
+const packageName = packageJSON.name;
 
 module.exports = {
 		plugins: [
+			postcssScopeVars({version: packageJSON.version}),
 			postcssImport(),
 			combineSelectors({
 				removeDuplicatedProperties: true
@@ -22,28 +24,6 @@ module.exports = {
 					},
 				]
 			},),
-			modifySelectors({
-				enable: true,
-				suffix: [
-					{
-						match: '*',
-						with: '[_ui5host]', // Add suffix to each selector in the file (:root => :root [_ui5host])
-					},
-				],
-			}),
-			modifySelectors({
-				enable: true,
-				modify: [
-					{
-						match: (selector) => {
-							return selectors.some($ => selector.startsWith($));
-						},
-						with: (selector) => {
-							return `${selector.replace(" ", "")}, ${selector}`;
-						},
-					},
-				]
-			}),
 			postcssCSStoJSON({ toReplace: 'src', packageName }),
 			postcssCSStoESM({ toReplace: 'src', packageName }),
 		]

package/lib/postcss-css-to-esm/index.js

@@ -60,7 +60,7 @@ module.exports = function (opts) {
 
 	return {
 		postcssPlugin: 'postcss-css-to-esm',
-		Once (root) {
+		OnceExit(root) {
 			const tsMode = process.env.UI5_TS === "true";
 
 			let css = root.toString();

package/lib/postcss-css-to-json/index.js

@@ -15,7 +15,7 @@ module.exports = function (opts) {
 
 	return {
 		postcssPlugin: 'postcss-css-to-json',
-		Once (root) {
+		OnceExit (root) {
 			let css = root.toString();
 			css = proccessCSS(css);
 

package/lib/postcss-scope-vars/index.js

@@ -0,0 +1,24 @@
+const name = "postcss-scope-vars";
+
+module.exports = (options) => {
+	const versionStr = "v" + options?.version?.replaceAll(".", "-");
+	return {
+		postcssPlugin: name,
+		prepare() {
+			return {
+				Declaration: (declaration) => {
+					if (declaration.__ui5_replaced) {
+						return;
+					}
+					// add version after ui5
+					const expr = /(--_?ui5)([^\,\:\)\s]+)/g
+					declaration.prop = declaration.prop.replaceAll(expr, `$1-${versionStr}$2`)
+					declaration.value = declaration.value.replaceAll(expr, `$1-${versionStr}$2`)
+					declaration.__ui5_replaced = true;
+				},
+			};
+		},
+	};
+};
+
+module.exports.postcss = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -51,7 +51,6 @@
     "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
     "mkdirp": "^1.0.4",
-    "modify-selectors": "^2.0.0",
     "nps": "^5.10.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
@@ -79,5 +78,5 @@
   "devDependencies": {
     "yargs": "^17.5.1"
   },
-  "gitHead": "1a6f71104cf246a2b6d0df6d2482baa5fb94ac51"
+  "gitHead": "6ab07172a4a1566c3c598ea1db8dae9b26b4d64e"
 }