fix inlined SVG fill for Firefox (#4722)

* fix inlined SVG fill for Firefox

* rename bulma in-repo-addon to css

* add sass-svg-uri

* get rid of bespoke variable and use sass-svg-uri module

ui/app/styles/core/bulma-radio-checkboxes.scss

@@ -1,3 +1,5 @@
+@import "../sass-svg-uri/svg-uri";
+
 .b-checkbox input[type="checkbox"]:checked + label::before {
   border-color: $blue;
 }
@@ -6,7 +8,7 @@
 .b-checkbox input[type="radio"]:checked + label::after {
   font-family: $family-monospace;
   /*checkmark from ionicons*/
-  content: url('data:image/svg+xml; utf8,  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 512 512" fill="#{$blue}"><path d="M461.6 109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4-2.4 0-4.6 1-6.3 2.5L194.5 323s-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9s-6.4 3.1-8.7 5.4c-1.7 1.8-29.7 31.2-43.5 45.8-.8.9-1.3 1.4-2 2.1-1.2 1.7-2 3.6-2 5.7 0 2.2.8 4 2 5.7l2.8 2.6s139.3 133.8 141.6 136.1c2.3 2.3 5.1 5.2 9.2 5.2 4 0 7.3-4.3 9.2-6.2l249.1-320c1.2-1.7 2-3.6 2-5.8 0-2.5-1-4.6-2.4-6.4z"/></svg>');
+  content: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 512 512" fill="#{$blue}"><path d="M461.6 109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4-2.4 0-4.6 1-6.3 2.5L194.5 323s-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9s-6.4 3.1-8.7 5.4c-1.7 1.8-29.7 31.2-43.5 45.8-.8.9-1.3 1.4-2 2.1-1.2 1.7-2 3.6-2 5.7 0 2.2.8 4 2 5.7l2.8 2.6s139.3 133.8 141.6 136.1c2.3 2.3 5.1 5.2 9.2 5.2 4 0 7.3-4.3 9.2-6.2l249.1-320c1.2-1.7 2-3.6 2-5.8 0-2.5-1-4.6-2.4-6.4z"/></svg>');
 }
 
 .b-checkbox.no-label input[type="checkbox"] + label {

ui/lib/css/index.js

@@ -23,6 +23,7 @@ module.exports = {
     this.bulmaPath = path.dirname(require.resolve('bulma'));
     this.bulmaSwitchPath = path.dirname(require.resolve('bulma-switch/switch.sass'));
     this.bulmaCheckPath = path.dirname(require.resolve('cool-checkboxes-for-bulma.io'));
+    this.sassSVGURIPath = path.dirname(require.resolve('sass-svg-uri'));
     return app;
   },
 
@@ -43,7 +44,13 @@ module.exports = {
       destDir: 'app/styles/bulma',
       annotation: 'Funnel (bulma-check)',
     });
+    var sassSVGURI = new Funnel(this.sassSVGURIPath, {
+      srcDir: '/',
+      destDir: 'app/styles/sass-svg-uri',
+      annotation: 'Sass SVG URI',
+    });
 
-    return mergeTrees([bulmaCheck, bulmaSwitch, bulma], { overwrite: true });
+
+    return mergeTrees([bulmaCheck, bulmaSwitch, bulma, sassSVGURI], { overwrite: true });
   },
 };

ui/lib/css/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "bulma",
+  "name": "css",
   "keywords": [
     "ember-addon"
   ]

ui/package.json

@@ -96,6 +96,7 @@
     "prettier": "^1.5.3",
     "prettier-eslint-cli": "^4.2.1",
     "qunit-dom": "^0.6.2",
+    "sass-svg-uri": "^1.0.0",
     "string.prototype.startswith": "mathiasbynens/String.prototype.startsWith",
     "text-encoder-lite": "1.0.0",
     "yargs-parser": "^10.0.0"
@@ -106,7 +107,7 @@
   "private": true,
   "ember-addon": {
     "paths": [
-      "lib/bulma"
+      "lib/css"
     ]
   }
 }

ui/yarn.lock

@@ -7508,6 +7508,10 @@ sass-graph@^2.2.4:
     scss-tokenizer "^0.2.3"
     yargs "^7.0.0"
 
+sass-svg-uri@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/sass-svg-uri/-/sass-svg-uri-1.0.0.tgz#01e992e4e3ce8d1ec4eac4c8280c0f2ef45c6be8"
+
 sax@>=0.6.0:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"