fix: transform css files to es6 modules (#306)

- bundling without an additional setup for importing css files used to be broken
- all css files are now distributed as es6 modules that export a single string
- ui5-togglebutton used to override some css variables defined in the ui5-button

Author: MapTo0

packages/main/bundle.esm.js

@@ -2,7 +2,7 @@
 import "@ui5/webcomponents-base/src/browsersupport/Edge";
 
 import "@ui5/webcomponents-base/src/shims/jquery-shim";
-import "./src/ThemePropertiesProvider";
+import "./dist/ThemePropertiesProvider";
 
 import Gregorian from "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian";
 import Buddhist from "@ui5/webcomponents-core/dist/sap/ui/core/date/Buddhist";

packages/main/config/postcss.bundles/postcss.config.js

@@ -1,6 +1,7 @@
 const postcssImport = require('postcss-import');
 const postcssAddFallback = require('../../lib/postcss-add-fallback/index.js');
 const combineSelectors = require('postcss-combine-duplicated-selectors');
+const postcssCSStoESM = require('../../lib/postcss-css-to-esm/index.js');
 const cssnano = require('cssnano');
 
 module.exports = {
@@ -9,5 +10,6 @@ module.exports = {
     postcssAddFallback(),
     combineSelectors({removeDuplicatedProperties: true}),
     cssnano(),
+    postcssCSStoESM(),
   ]
 };

packages/main/config/postcss.components/postcss.config.js

@@ -1,11 +1,13 @@
 const postcssNesting = require('postcss-nesting');
 const postcssAddFallback = require('../../lib/postcss-add-fallback/index.js');
+const postcssCSStoESM = require('../../lib/postcss-css-to-esm/index.js');
 const cssnano = require('cssnano');
 
 module.exports = {
   plugins: [
     postcssNesting(),
-    postcssAddFallback({importFrom: "./dist/themes-next/sap_fiori_3/parameters-bundle.css"}),
+    postcssAddFallback({importFrom: "./dist/css/themes-next/sap_fiori_3/parameters-bundle.css"}),
     cssnano(),
+    postcssCSStoESM(),
   ]
 };

packages/main/lib/postcss-css-to-esm/index.js

@@ -0,0 +1,19 @@
+const postcss = require('postcss');
+const fs = require('fs');
+const path = require('path');
+const mkdirp = require('mkdirp');
+
+module.exports = postcss.plugin('add css to esm transform plugin', function (opts) {
+	opts = opts || {};
+
+	return function (root) {
+		const css = JSON.stringify(root.toString());
+		const targetFile = root.source.input.from.replace("/src/", "/dist/");
+
+		mkdirp.sync(path.dirname(targetFile));
+
+		const filePath = `${targetFile}.js`;
+
+		fs.writeFileSync(filePath, `export default ${css}`);
+	}
+});

packages/main/package.json

@@ -54,10 +54,10 @@
     "build:api": "jsdoc -c ../../lib/jsdoc/config.json",
     "build:docs": "node ../../lib/documentation/index.js",
     "build:styles": "npm-run-all --sequential build:styles-bundles build:styles-components",
-    "build:styles-bundles": "postcss src/**/parameters-bundle.css --config config/postcss.bundles --base src --dir dist/",
-    "build:styles-components": "postcss src/themes-next/*.css --config config/postcss.components --base src --dir dist/",
-    "watch:styles-bundles": "postcss src/**/parameters-bundle.css --config config/postcss.bundles --base src --dir dist/ -w",
-    "watch:styles-components": "postcss src/themes-next/*.css --config config/postcss.components --base src --dir dist/ -w",
+    "build:styles-bundles": "postcss src/**/parameters-bundle.css --config config/postcss.bundles --base src --dir dist/css/",
+    "build:styles-components": "postcss src/themes-next/*.css --config config/postcss.components --base src --dir dist/css/",
+    "watch:styles-bundles": "postcss src/**/parameters-bundle.css --config config/postcss.bundles --base src --dir dist/css/ -w",
+    "watch:styles-components": "postcss src/themes-next/*.css --config config/postcss.components --base src --dir dist/css/ -w",
     "clean": "rimraf dist src/build",
     "copy:src": "copy-and-watch \"src/**/*.js\" \"src/**/i18n/*.json\" dist/",
     "copy:i18n": "cpx \"src/i18n/*.json\" dist/i18n",

packages/main/rollup.config.js

@@ -46,23 +46,6 @@ const getPlugins = ({ transpile }) => {
 			return gzipSize;
 		}
 	}));
-	// component styles
-	plugins.push(
-		postcss({
-			plugins: [postcssNesting()],
-			inject: false,
-			exclude: ["**/*.less", "**/parameters-bundle.css"],
-		})
-	);
-	// parameters bundle
-	plugins.push(
-		postcss({
-			plugins: [postcssImport(), csso({comments: true})],
-			inject: false,
-			include: ["**/parameters-bundle.css"],
-			exclude: ["**/*.less"],
-		})
-	);
 
 	plugins.push(ui5DevImportCheckerPlugin());
 

packages/main/src/themes-next/base/ToggleButton-parameters.css

@@ -1,8 +1,4 @@
 :root {
-	--_ui5_button_base_min_width: 2.5rem;
-	--_ui5_button_base_min_compact_width: 2rem;
-	--_ui5_button_base_height: 2.5rem;
-	--_ui5_button_compact_height: 1.625rem;
 	--_ui5_toggle_button_pressed_focussed: var(--sapUiToggleButtonPressedBorderColor);
 	--_ui5_toggle_button_pressed_focussed_hovered: var(--sapUiToggleButtonPressedBorderColor);
 	--_ui5_toggle_button_pressed_negative_hover: var(--sapUiButtonRejectActiveBackgroundDarken5);

packages/main/src/themes-next/sap_fiori_3/ToggleButton-parameters.css

@@ -1,8 +1,6 @@
 @import "../base/ToggleButton-parameters.css";
 
 :root {
-	--_ui5_button_base_min_width: 2.25rem;
-	--_ui5_button_base_height: 2.25rem;
 	--_ui5_toggle_button_pressed_negative_hover: var(--sapUiButtonRejectActiveBackgroundLighten5);
 	--_ui5_toggle_button_pressed_positive_hover: var(--sapUiButtonAcceptActiveBackgroundLighten5);
 }