Minimize Flo - factor out some inlined styles

Generate flo.css

CM extension to be added on the client side

Switch to joint.core

Update joint.core switch script

Try post-install

Proper postinstall stage

Remove support for joint.core switch

build.js

@@ -4,6 +4,8 @@ const shell = require('shelljs');
 const chalk = require('chalk');
 const path = require('path');
 const fs = require('fs');
+const sass = require('node-sass');
+const ScssBundler = require('scss-bundle');
 
 const PACKAGE = `spring-flo`;
 const NPM_DIR = `dist`;
@@ -60,17 +62,27 @@ gulp.src(INLINE_TEMPLATES.SRC)
     .pipe(gulp.dest(INLINE_TEMPLATES.DIST)).on('end', compile);
 
 
-function compile() {
-    /* Try to process scss files  */
-  // shell.echo(`Try to process scss files`);
-  // if (shell.exec(`node-sass -r ${OUT_DIR} -o ${OUT_DIR}`).code === 0) {
-  //   shell.rm(`-Rf`, `${OUT_DIR}/**/*.scss`);
-  //   shell.ls(`${OUT_DIR}/**/*.css`).forEach(function (file) {
-  //     shell.mv(file, file.replace('.css', '.scss'));
-  //   });
-  // }
+async function compile() {
 
-  shell.cp('-Rf', ['*.json'], OUT_DIR);
+  shell.cp(`-Rf`, [`*.json`], `${OUT_DIR}`);
+
+  shell.cp('-Rf', './src/lib/styles.scss', `${OUT_DIR}`);
+
+  const mainScssFile = path.join(OUT_DIR, 'styles.scss');
+
+  const scssFiles = shell.ls(`${OUT_DIR}/**/*.scss`).filter(f => f.toString() !== mainScssFile).map(f => f.toString());
+
+  const singleScssFile = path.join(OUT_DIR, 'flo.scss');
+
+  await bundleScss(mainScssFile, scssFiles, singleScssFile);
+
+  const cssResult = sass.renderSync({
+    file: singleScssFile,
+  });
+
+  fs.writeFileSync(path.join(NPM_DIR, 'flo.css'), cssResult.css, (err) => {
+    if (err) throw err;
+  });
 
   /* AoT compilation */
   shell.echo(`Start AoT compilation`);
@@ -143,7 +155,33 @@ function compile() {
   replacePropertyValue(json, 'fesm5', searchValue, replaceValue);
   replacePropertyValue(json, 'fesm2015', searchValue, replaceValue);
   fs.writeFileSync(packagejson, JSON.stringify(json, null, 2));
+}
 
+/** Bundles all SCSS files into a single file */
+async function bundleScss(mainInputFile, inputFiles, outputFile) {
+  const { found, bundledContent, imports } = await new ScssBundler.Bundler()
+    .Bundle(mainInputFile, inputFiles);
+
+  if (imports) {
+    const cwd = process.cwd();
+
+    const filesNotFound = imports
+      .filter(x => !x.found)
+      .map(x => relative(cwd, x.filePath));
+
+    if (filesNotFound.length) {
+      console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`);
+      throw new Error('One or more SCSS imports failed');
+    }
+  }
+
+  if (found) {
+    fs.writeFileSync(outputFile, bundledContent, (err) => {
+      if (err) throw err;
+    });
+  } else {
+    throw new Error('SCSS files not found');
+  }
 }
 
 function replacePropertyValue(json, property, searchValue, newValue) {

package.json

@@ -87,6 +87,9 @@
     "karma-jasmine": "1.1.0",
     "karma-jasmine-html-reporter": "0.2.2",
     "lite-server": "2.4.0",
+    "ng-packagr": "^5.3.0",
+    "scss-bundle": "^2.5.1",
+    "node-sass": "^4.12.0",
     "ngx-bootstrap": "4.2.0",
     "rimraf": "2.6.1",
     "rollup": "1.14.2",

src/demo/app/app.component.ts

@@ -6,6 +6,12 @@ const { Metamodel } = require('./metamodel');
 const { Renderer } = require('./renderer');
 const { Editor } = require('./editor');
 
+// Code editor used from Flo requires the follwoing CM extensions
+import 'codemirror-minified/mode/javascript/javascript';
+import 'codemirror-minified/mode/ruby/ruby';
+import 'codemirror-minified/mode/clike/clike';
+import 'codemirror-minified/addon/lint/javascript-lint';
+
 @Component({
   selector: 'demo-app',
   templateUrl: './app.component.html',

src/demo/styles.css

@@ -1,3 +1,9 @@
+@import "./../../node_modules/jointjs/dist/joint.core.css";
+@import "./../../node_modules/codemirror-minified/lib/codemirror.css";
+@import "./../../node_modules/codemirror-minified/addon/hint/show-hint.css";
+@import "./../../node_modules/codemirror-minified/addon/lint/lint.css";
+@import "./../../node_modules/codemirror-minified/addon/scroll/simplescrollbars.css";
+
 h1 {
   color: #369;
   font-family: Arial, Helvetica, sans-serif;

src/lib/code-editor/code-editor.component.ts

@@ -18,30 +18,23 @@ import 'codemirror-minified/addon/scroll/simplescrollbars';
 
 // Lint support
 // Unclear how to import this dynamically...
-import 'codemirror-minified/addon/lint/javascript-lint';
-import 'codemirror-minified/addon/lint/coffeescript-lint';
-import 'codemirror-minified/addon/lint/json-lint';
-import 'codemirror-minified/addon/lint/yaml-lint';
+// import 'codemirror-minified/addon/lint/javascript-lint';
+// import 'codemirror-minified/addon/lint/json-lint';
+// import 'codemirror-minified/addon/lint/yaml-lint';
 
 // TODO: use dynamic import with JS7 in the future. CM autoLoad cannot load it properly - thinks its AMD
 // Supported languages until dynamic loading
-import 'codemirror-minified/mode/groovy/groovy';
-import 'codemirror-minified/mode/javascript/javascript';
-import 'codemirror-minified/mode/python/python';
-import 'codemirror-minified/mode/ruby/ruby';
-import 'codemirror-minified/mode/clike/clike';
-import 'codemirror-minified/mode/yaml/yaml';
-import 'codemirror-minified/mode/coffeescript/coffeescript';
+// import 'codemirror-minified/mode/groovy/groovy';
+// import 'codemirror-minified/mode/javascript/javascript';
+// import 'codemirror-minified/mode/python/python';
+// import 'codemirror-minified/mode/ruby/ruby';
+// import 'codemirror-minified/mode/clike/clike';
+// import 'codemirror-minified/mode/yaml/yaml';
 
 @Component({
   selector: 'code-editor',
   templateUrl: './code-editor.component.html',
-  styleUrls: [
-    './../../../node_modules/codemirror-minified/lib/codemirror.css',
-    './../../../node_modules/codemirror-minified/addon/hint/show-hint.css',
-    './../../../node_modules/codemirror-minified/addon/lint/lint.css',
-    './../../../node_modules/codemirror-minified/addon/scroll/simplescrollbars.css',
-    './code-editor.component.scss', ],
+  styleUrls: ['./code-editor.component.scss', ],
   encapsulation: ViewEncapsulation.None,
   providers: [
     {

src/lib/dsl-editor/dsl-editor.component.ts

@@ -10,15 +10,10 @@ import 'codemirror-minified/addon/display/placeholder';
 import 'codemirror-minified/addon/scroll/annotatescrollbar';
 import 'codemirror-minified/addon/scroll/simplescrollbars';
 
-
 @Component({
   selector: 'dsl-editor',
   templateUrl: './dsl-editor.component.html',
-  styleUrls: [
-    './../../../node_modules/codemirror-minified/lib/codemirror.css',
-    './../../../node_modules/codemirror-minified/addon/hint/show-hint.css',
-    './../../../node_modules/codemirror-minified/addon/lint/lint.css',
-    './dsl-editor.component.scss', ],
+  styleUrls: ['./dsl-editor.component.scss', ],
   encapsulation: ViewEncapsulation.None
 })
 export class DslEditorComponent implements OnInit, OnDestroy {

src/lib/editor/editor.component.ts

@@ -21,7 +21,7 @@ const SCROLLBAR_SIZE = 17;
 @Component({
   selector: 'flo-editor',
   templateUrl: './editor.component.html',
-  styleUrls: ['./../../../node_modules/jointjs/dist/joint.css', './editor.component.scss'],
+  styleUrls: ['./editor.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class EditorComponent implements OnInit, OnDestroy {

src/lib/styles.scss

@@ -0,0 +1,5 @@
+@import "./../../node_modules/jointjs/dist/joint.core.css";
+@import "./../../node_modules/codemirror-minified/lib/codemirror.css";
+@import "./../../node_modules/codemirror-minified/addon/hint/show-hint.css";
+@import "./../../node_modules/codemirror-minified/addon/lint/lint.css";
+@import "./../../node_modules/codemirror-minified/addon/scroll/simplescrollbars.css";