Improve css prebuilt creation and minimize (#5553)

* improve CSS creation strategy and minimize

* remove multiple select slow down test

e2e/pages/adf/demo-shell/process-services/people-group-cloud-component.page.ts

@@ -35,7 +35,7 @@ export class PeopleGroupCloudComponentPage {
     groupAppInput: ElementFinder = element(by.css('input[data-automation-id="app-group-app-input"]'));
     peopleCloudComponentTitle: ElementFinder = element(by.cssContainingText('mat-card-title', 'People Cloud Component'));
     groupCloudComponentTitle: ElementFinder = element(by.cssContainingText('mat-card-title', 'Groups Cloud Component'));
-    preselectValidation: ElementFinder = element(by.css('mat-checkbox.app-preselect-value'));
+    preselectValidation: ElementFinder = element.all(by.css('mat-checkbox.app-preselect-value')).first();
     preselectValidationStatus: ElementFinder = element(by.css('mat-checkbox.app-preselect-value label input'));
     peopleFilterByAppName: ElementFinder = element(by.css('.app-people-control-options mat-radio-button[value="appName"]'));
     groupFilterByAppName: ElementFinder = element(by.css('.app-groups-control-options mat-radio-button[value="appName"]'));

lib/config/bundle-scss.js

@@ -1,23 +0,0 @@
-var Bundler = require('scss-bundle').Bundler;
-var writeFileSync = require('fs-extra').writeFileSync;
-var mkdirpSync = require('fs-extra').mkdirpSync;
-
- new Bundler().Bundle('./lib/core/styles/_index.scss', '**/*.scss').then(result => {
-    writeFileSync('./lib/dist/core/_theming.scss', result.bundledContent);
-});
-
- new Bundler().Bundle('./lib/insights/src/lib/styles/_index.scss', '**/*.scss').then(result => {
-    writeFileSync('./lib/dist/insights/_theming.scss', result.bundledContent);
-});
-
- new Bundler().Bundle('./lib/process-services/src/lib/styles/_index.scss', '**/*.scss').then(result => {
-    writeFileSync('./lib/dist/process-services/_theming.scss', result.bundledContent);
-});
-
- new Bundler().Bundle('./lib/content-services/src/lib/styles/_index.scss', '**/*.scss').then(result => {
-    writeFileSync('./lib/dist/content-services/_theming.scss', result.bundledContent);
-});
-
-new Bundler().Bundle('./lib/process-services-cloud/src/lib/styles/_index.scss', '**/*.scss').then(result => {
-    writeFileSync('./lib/dist/process-services-cloud/_theming.scss', result.bundledContent);
-});

lib/config/custom-loaders/file-loader-multi.js

@@ -1,70 +0,0 @@
-var path = require('path');
-var loaderUtils = require('loader-utils');
-
-module.exports = function(content) {
-    this.cacheable && this.cacheable();
-    if(!this.emitFile) throw new Error('emitFile is required from module system');
-
-    var query = loaderUtils.getOptions(this) || {};
-    var configKey = query.config || 'multiFileLoader';
-    var options = this.options[configKey] || {};
-    var config = {
-        publicPath: false,
-        useRelativePath: false,
-        name: '[hash].[ext]'
-    };
-
-    // options takes precedence over config
-    Object.keys(options).forEach(function(attr) {
-        config[attr] = options[attr];
-    });
-
-    // query takes precedence over config and options
-    Object.keys(query).forEach(function(attr) {
-        config[attr] = query[attr];
-    });
-
-    var context = config.context || this.options.context;
-    var url = loaderUtils.interpolateName(this, config.name, {
-        context: context,
-        content: content,
-        regExp: config.regExp
-    });
-    var path = loaderUtils.interpolateName(this, '[path]', {
-        context: context,
-        content: content,
-        regExp: config.regExp
-    });
-
-    var outputPath = '';
-
-    if (config.outputPath) {
-        outputPath = (
-            typeof config.outputPath === 'function'
-                ? config.outputPath(url, path)
-                : config.outputPath + url
-        );
-    } else {
-        outputPath = url;
-    }
-
-    var publicPath = JSON.stringify(url);
-
-    if (config.publicPath) {
-        publicPath = JSON.stringify(
-            typeof config.publicPath === 'function'
-                ? config.publicPath(url, path)
-                : config.publicPath + url
-        );
-    }
-
-    publicPath = '__webpack_public_path__ + ' + publicPath;
-
-    if (query.emitFile === undefined || query.emitFile) {
-        this.emitFile(outputPath, content);
-    }
-
-    return 'module.exports = ' + publicPath + ';';
-};
-
-module.exports.raw = true;

lib/config/webpack.style.js

@@ -1,12 +1,15 @@
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-
-const extractScss = new ExtractTextPlugin('./core/prebuilt-themes/[name].css');
-var path = require("path");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require("path");
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 module.exports = {
 
     mode: 'production',
 
+    optimization: {
+        minimizer: [new OptimizeCSSAssetsPlugin({})],
+    },
+
     entry: {
         'adf-blue-orange': './lib/core/styles/prebuilt/adf-blue-orange.scss',
         'adf-blue-purple': './lib/core/styles/prebuilt/adf-blue-purple.scss',
@@ -20,7 +23,7 @@ module.exports = {
     },
 
     output: {
-        path: path.resolve(__dirname, '../dist/'),
+        path: path.resolve(__dirname, '../dist/core/prebuilt-themes/'),
         filename: '[name].js',
         publicPath: '/dist'
     },
@@ -28,14 +31,8 @@ module.exports = {
     module: {
         rules: [{
             test: /\.scss$/,
-            use: extractScss.extract([{
-                loader: "raw-loader"
-            }, {
-                loader: "sass-loader"
-            }])
+            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
         }]
     },
-    plugins: [
-        extractScss
-    ]
+    plugins: [new MiniCssExtractPlugin()]
 };

lib/testing/src/lib/material/pages/dropdown.page.ts

@@ -32,7 +32,7 @@ export class DropdownPage {
     }
 
     async selectOption(option: string): Promise<void> {
-        const optionElement = element(by.cssContainingText('mat-option span.mat-option-text', option));
+        const optionElement = element.all(by.cssContainingText('mat-option span.mat-option-text', option)).first();
         await BrowserActions.click(optionElement);
     }
 
@@ -73,11 +73,11 @@ export class DropdownPage {
     }
 
     async checkOptionIsDisplayed(option: string): Promise <void> {
-        await BrowserVisibility.waitUntilElementIsVisible(element(by.cssContainingText('mat-option span.mat-option-text', option)));
+        await BrowserVisibility.waitUntilElementIsVisible(element.all(by.cssContainingText('mat-option span.mat-option-text', option)).first());
     }
 
     async checkOptionIsNotDisplayed(option: string): Promise <void> {
-        await BrowserVisibility.waitUntilElementIsNotVisible(element(by.cssContainingText('mat-option span.mat-option-text', option)));
+        await BrowserVisibility.waitUntilElementIsNotVisible(element.all(by.cssContainingText('mat-option span.mat-option-text', option)).first());
     }
 
     async selectDropdownOption(option: string): Promise<void> {

lib/testing/src/lib/process-services-cloud/pages/people-cloud-component.page.ts

@@ -53,7 +53,7 @@ export class PeopleCloudComponentPage {
     }
 
     async selectAssigneeFromList(name: string): Promise<void> {
-        const assigneeRow = element(by.cssContainingText('mat-option span.adf-people-label-name', name));
+        const assigneeRow = element.all(by.cssContainingText('mat-option span.adf-people-label-name', name)).first();
         await BrowserActions.click(assigneeRow);
         await BrowserVisibility.waitUntilElementIsNotVisible(assigneeRow);
     }

package.json

@@ -147,9 +147,9 @@
     "commander": "4.0.0",
     "concurrently": "^3.5.1",
     "cspell": "^3.1.3",
+    "css-loader": "^3.4.2",
     "dotenv": "6.2.0",
     "ejs": "^2.6.1",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "fs-extra": "^4.0.2",
     "graphql": "^14.1.1",
     "husky": "^1.2.0",
@@ -178,10 +178,12 @@
     "mdast-util-heading-range": "^2.1.0",
     "mdast-util-toc": "^2.0.1",
     "mdast-zone": "^3.0.1",
+    "mini-css-extract-plugin": "^0.9.0",
     "nconf": "^0.10.0",
     "ncp": "^2.0.0",
     "ng-packagr": "4.7.1",
     "node-sass": "4.13.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "protractor": "^5.4.2",
     "protractor-browser-logs": "1.0.456",
     "protractor-html-reporter-2": "1.0.4",
@@ -209,8 +211,7 @@
     "unist-util-select": "^2.0.0",
     "url-join": "^4.0.0",
     "webpack-bundle-analyzer": "^3.3.2",
-    "webpack-cli": "^3.1.0",
-    "webpack-merge": "2.6.1"
+    "webpack-cli": "^3.1.0"
   },
   "license": "Apache-2.0",
   "bundlesize": [

scripts/build/build-core.sh

@@ -19,6 +19,7 @@ echo "====== Copy assets ======"
 cp -R ./lib/core/assets/* ./lib/dist/core/bundles/assets
 
 npm run webpack -- --config ./lib/config/webpack.style.js --progress --profile --bail
+rm ./lib/dist/core/prebuilt-themes/*.js
 
 echo "====== Move to node_modules ======"
 rm -rf ./node_modules/@alfresco/adf-core/ && \