Add required assets

buildtools/webpack.commons.js

@@ -144,11 +144,9 @@ const config = {
   plugins: [
     providePlugin,
     new SassPlugin({
-      //filename: devMode ? '[name].css' : '[name].[chunkhash:6].css',
-      filename: devMode ? 'all.css' : '[name].[chunkhash:6].css',
-      sassConfig: {
-        //importer: require('node-sass-import-once'),
-      }
+      //filename: devMode ? '[name].css' : '[name].[hash:6].css',
+      filename: devMode ? 'all.css' : '[name].[hash:6].css',
+      assetname: '[name].[hash:6].[ext]',
     }),
     new webpack.IgnorePlugin(/^\.\/locale$/, /node_modules\/moment\/src\/lib\/locale$/),
   ],

buildtools/webpack.plugin.js

@@ -9,7 +9,6 @@ const replaceAsync = require('fast-sass-loader/lib/replace');
 const utils = require('fast-sass-loader/lib/utils');
 const loaderUtils = require('loader-utils');
 const assert = require('assert');
-const fileLoader = require('file-loader');
 
 
 const BOM_HEADER = '\uFEFF';
@@ -101,6 +100,9 @@ function * mergeSources(opts, entry, resolve, level) {
 
       // test again
       if (loaderUtils.isUrlRequest(file)) {
+        if (file.startsWith('~') || file.startsWith('data:')) {
+          return `url(${left}${file}${right})`;
+        }
         const absoluteFile = path.normalize(path.resolve(entryDir, file));
         let relativeFile = path.relative(opts.baseEntryDir, absoluteFile).replace(/\\/g, '/'); // fix for windows path
 
@@ -191,6 +193,7 @@ function * mergeSources(opts, entry, resolve, level) {
 
   return yield replaceAsync(content, MATCH_IMPORTS, co.wrap(importReplacer));
 }
+
 function resolver(ctx) {
   return function(dir, importFile) {
     return new Promise((resolve, reject) => {
@@ -204,84 +207,164 @@ function resolver(ctx) {
     });
   };
 }
+
 class SassPlugin {
   constructor(options) {
     this.options = options;
   }
 
   apply(compiler) {
-    const options = this.options;
     compiler.plugin('emit', (compilation, callback) => {
+      let usedContext;
       const promise = new Promise((resolve, reject) => {
-        const contents = [];
-        const browse = function(position) {
-          if (position < sassLoader.entries.length) {
-            const entry = sassLoader.entries[position];
-
-            const merged = mergeSources(entry.options, {
-              file: entry.entry,
-              content: entry.content
-            }, resolver(entry.ctx));
-            const merged2 = [];
-            for (const content of merged) {
-              merged2.push(content);
+        try {
+          const contents = [];
+          const browse = function(position) {
+            if (position < sassLoader.entries.length) {
+              const entry = sassLoader.entries[position];
+              if (!usedContext) {
+                usedContext = entry.ctx;
+              }
+
+              const merged = mergeSources(entry.options, {
+                file: entry.entry,
+                content: entry.content
+              }, resolver(entry.ctx));
+              const merged2 = [];
+              for (const content of merged) {
+                merged2.push(content);
+              }
+              assert.strictEqual(merged2.length, 1);
+              merged2[0].then((content) => {
+                contents.push(content);
+                position++;
+                browse(position);
+              }, () => {
+                reject(`${position}, ${entry.entry}`);
+              });
+            } else {
+              resolve(contents);
             }
-            assert.strictEqual(merged2.length, 1);
-            merged2[0].then((content) => {
-              contents.push(content);
-              position++;
-              browse(position);
-            }, () => {
-              reject([position, entry.entry]);
-            });
-          } else {
-            resolve(contents);
-          }
-        };
-        browse(0);
+          };
+          browse(0);
+        } catch (e) {
+          console.error(e.stack || e);
+          reject(e);
+        }
       });
 
-      promise.then((contents) => {
+      const pluginOptions = this.options;
+      promise.then(async (contents) => {
+        if (pluginOptions.tempfile) {
+          fs.writeFile(pluginOptions.tempfile, contents.join('\n'));
+        }
+
         try {
-          const result = nodeSass.renderSync(Object.assign(
-            {}, options.sassConfig, {
+          const replacements = {};
+          const promises = [];
+          const options = Object.assign(
+            {}, pluginOptions.sassConfig, {
               data: contents.join('\n'),
-              functions: {
-                'url($url)': function(url, context) {
-                  try {
-                    let assetUrl = loaderUtils.urlToRequest(url.getValue());
-                    if (assetUrl.startsWith('./data:')) {
-                      assetUrl = assetUrl.substring(2);
-                    }
-
-                    if (!assetUrl.startsWith('data:')) {
-                      const context = {
-                        emitFile: function(name, content) {
+              functions: {},
+            }
+          );
+          // Double parse the Sass files to be able to return in a synchronous function things
+          // that we can only get asynchronously.
+          const preparseOptions = Object.assign({}, options);
+          preparseOptions.functions['url($url)'] = function(url) {
+            if (url.getValue().startsWith('data:')) {
+              return url;
+            }
+            try {
+              const assetUrl = url.getValue();
+
+              if (assetUrl.startsWith('~')) {
+                let assetName = url.getValue().substr(1);
+                let queryString = '';
+                const questionMarkIndex = assetName.indexOf('?');
+                if (questionMarkIndex > 0) {
+                  queryString = assetName.substr(questionMarkIndex);
+                  assetName = assetName.substr(0, questionMarkIndex);
+                } else {
+                  const sharpIndex = assetName.indexOf('#');
+                  if (sharpIndex > 0) {
+                    queryString = assetName.substr(sharpIndex);
+                    assetName = assetName.substr(0, sharpIndex);
+                  }
+                }
+                promises.push(new Promise((resolve, reject) => {
+
+                  usedContext.resolve(usedContext.resourcePath, assetName, (err, resolvedFile) => {
+                    if (err) {
+                      console.log(err);
+                      reject(err);
+                    } else {
+                      fs.readFile(resolvedFile, 'utf8', (err, data) => {
+                        if (err) {
+                          console.log(err);
+                          reject(err);
+                        } else {
+                          usedContext.resourcePath = assetName;
+                          const name = loaderUtils.interpolateName(usedContext, pluginOptions.assetname, {
+                            content: data
+                          });
                           compilation.assets[name] = {
-                            source: () => content,
-                            size: () => content.length
+                            source: () => data,
+                            size: () => data.length
                           };
+                          replacements[assetUrl] = name + queryString;
+                          resolve();
                         }
-                      };
-                      fileLoader.bind(context)(url.getValue());
+                      });
                     }
-                    console.log(`url(${assetUrl})`);
-                    return nodeSass.types.String(`url(${assetUrl})`);
-                  } catch (e) {
-                    console.error(e.stack || e);
+                  });
+                }));
+              } else {
+                fs.readFile(assetName, 'utf8', (err, data) => {
+                  if (err) {
+                    console.log(err);
+                    reject(err);
+                  } else {
+                    usedContext.resourcePath = assetName;
+                    const name = loaderUtils.interpolateName(usedContext, pluginOptions.assetname, {
+                      content: data
+                    });
+                    compilation.assets[name] = {
+                      source: () => data,
+                      size: () => data.length
+                    };
+                    replacements[assetUrl] = name + queryString;
                   }
-                }
+                });
               }
+            } catch (e) {
+              console.error(e.stack || e);
             }
-          ));
+            return url;
+          };
+          const originalResourcePath = usedContext.resourcePath;
+          nodeSass.renderSync(preparseOptions);
+          usedContext.resourcePath = originalResourcePath;
+          await Promise.all(promises);
+          const parseOptions = Object.assign({}, options);
+          parseOptions.functions['url($url)'] = function(url) {
+            const assetUrl = url.getValue();
+            if (assetUrl.startsWith('data:')) {
+              return url;
+            }
+            return nodeSass.types.String(`url(${replacements[assetUrl]})`);
+          };
+          const result = nodeSass.renderSync(parseOptions);
           const content = result.css;
           const srcmap = result.map;
-          compilation.assets[options.filename] = {
+          const asset = {
             source: () => content,
             size: () => content.length
           };
+          const assetName = loaderUtils.interpolateName(usedContext, pluginOptions.filename, asset);
+          compilation.assets[assetName] = asset;
           if (srcmap) {
-            compilation.assets[`${options.filename}.map`] = {
+            compilation.assets[`${assetName}.map`] = {
               source: () => srcmap,
               size: () => srcmap.length
             };
@@ -291,8 +374,8 @@ class SassPlugin {
           console.error(e.stack || e);
           callback();
         }
-      }, (position) => {
-        callback(`SCSS dependencies error, ${position[0]}, ${position[1]}`);
+      }, (error) => {
+        callback(`SCSS dependencies error, ${error}`);
       });
     });
   }

contribs/gmf/src/controllers/desktop.scss

@@ -7,9 +7,7 @@ $button-size: 2.50rem !default;
 $left-panel-width: 20rem !default;
 $right-panel-width: 17.50rem !default;
 $topbar-height: 2.81rem !default;
-$border-color: darken($brand-primary, $standard-variation) !default;
 $search-width: 8 * $map-tools-size !default;
-$font-size-base: 0.8rem !default;
 $padding-base-vertical: 0.31rem !default;
 $padding-base-horizontal: 0.62rem !default;
 $form-group-margin-bottom: 0.62rem !default;
@@ -40,6 +38,7 @@ html, body {
 
 body {
   padding-top: $topbar-height;
+  font-size: 0.8rem;
 }
 
 header {

contribs/gmf/src/layertree/timeslider.scss

@@ -4,7 +4,7 @@
 .gmf-time-slider {
 
   // 1.75rem come from bootstrap popover class .popover-content { padding: 0.56rem 0.87rem; }
-  min-width: $popover-max-width - 1.75rem;
+  min-width: calc($popover-max-width - 1.75rem);
 
   .ui-widget-content {
     border: none;

contribs/gmf/src/sass/vars.scss

@@ -48,5 +48,6 @@ $input-height-base: 1.5rem !default;
 $btn-default-border: #ccc !default;
 $text-color: $gray-dark !default;
 
-@import "~bootstrap/scss/bootstrap.scss";
+@import "~bootstrap/scss/_functions.scss";
+@import "~bootstrap/scss/_variables.scss";
 @import "~font-awesome/scss/_variables.scss";

src/filter/component.js

@@ -16,7 +16,7 @@ import ngeoRuleGeometry from 'ngeo/rule/Geometry.js';
 import ngeoMapFeatureOverlay from 'ngeo/map/FeatureOverlay.js';
 import * as olBase from 'ol/index.js';
 import * as olArray from 'ol/array.js';
-import 'font-awesome/css/font-awesome.css';
+import 'font-awesome/scss/font-awesome.scss';
 
 /**
  * @type {!angular.Module}

src/filter/ruleComponent.js

@@ -34,7 +34,7 @@ import olStyleStyle from 'ol/style/Style.js';
 import olStyleText from 'ol/style/Text.js';
 import olStyleFill from 'ol/style/Fill.js';
 import olGeomGeometry from 'ol/geom/Geometry.js';
-import 'font-awesome/css/font-awesome.css';
+import 'font-awesome/scss/font-awesome.scss';
 
 /**
  * @type {angular.Module}

src/grid/component.js

@@ -8,7 +8,7 @@ import * as olHas from 'ol/has.js';
 
 import 'floatthead';
 import 'angular-float-thead';
-import 'font-awesome/css/font-awesome.css';
+import 'font-awesome/scss/font-awesome.scss';
 
 
 /**

src/message/Disclaimer.js

@@ -7,7 +7,7 @@ import googAsserts from 'goog/asserts.js';
 import ngeoMessagePopup from 'ngeo/message/Popup.js';
 import ngeoMessageMessage from 'ngeo/message/Message.js';
 import * as olBase from 'ol/index.js';
-import 'font-awesome/css/font-awesome.css';
+import 'font-awesome/scss/font-awesome.scss';
 
 /**
  * Provides methods to display any sort of messages, disclaimers, errors,

src/message/displaywindowComponent.js

@@ -3,7 +3,7 @@
  */
 import googAsserts from 'goog/asserts.js';
 
-import 'font-awesome/css/font-awesome.css';
+import 'font-awesome/scss/font-awesome.scss';
 import 'jquery-ui/ui/widgets/resizable.js';
 import 'jquery-ui/ui/widgets/draggable.js';
 import 'angular-sanitize';

src/routing/RoutingComponent.js

@@ -16,7 +16,7 @@ import olStyleStroke from 'ol/style/Stroke.js';
 import * as olProj from 'ol/proj.js';
 import olFeature from 'ol/Feature.js';
 import olGeomLineString from 'ol/geom/LineString.js';
-import 'font-awesome/css/font-awesome.css';
+import 'font-awesome/scss/font-awesome.scss';
 
 exports.module = angular.module('ngeoRoutingComponent', [
   ngeoMiscDebounce.name,

src/routing/RoutingFeatureComponent.js

@@ -16,7 +16,7 @@ import olStyleStroke from 'ol/style/Stroke.js';
 import olGeomPoint from 'ol/geom/Point.js';
 import olInteractionModify from 'ol/interaction/Modify.js';
 import olInteractionDraw from 'ol/interaction/Draw.js';
-import 'font-awesome/css/font-awesome.css';
+import 'font-awesome/scss/font-awesome.scss';
 
 
 /**