Merge pull request #2460 from matrix-org/jryans/versioned-img-urls

Load fonts and images via source-relative URLs and requires

karma.conf.js

@@ -168,6 +168,10 @@ module.exports = function (config) {
                                   path.resolve('./test'),
                                  ]
                     },
+                    {
+                        test: /\.(gif|png|svg|ttf)$/,
+                        loader: 'file-loader',
+                    },
                 ],
                 noParse: [
                     // for cross platform compatibility use [\\\/] as the path separator

package.json

@@ -47,7 +47,7 @@
     "start:init": "babel src -d lib --source-maps --copy-files",
     "lint": "eslint src/",
     "lintall": "eslint src/ test/",
-    "lintwithexclusions": "eslint --max-warnings 18 --ignore-path .eslintignore.errorfiles src test",
+    "lintwithexclusions": "eslint --max-warnings 13 --ignore-path .eslintignore.errorfiles src test",
     "clean": "rimraf lib",
     "prepublish": "npm run clean && npm run build && git rev-parse HEAD > git-revision.txt",
     "test": "karma start --single-run=true --browsers ChromeHeadless",
@@ -125,6 +125,7 @@
     "eslint-plugin-react": "^7.7.0",
     "estree-walker": "^0.5.0",
     "expect": "^23.6.0",
+    "file-loader": "^3.0.1",
     "flow-parser": "^0.57.3",
     "jest-mock": "^23.2.0",
     "karma": "^3.0.0",

res/css/structures/_MyGroups.scss

@@ -54,7 +54,7 @@ limitations under the License.
 
     &:before {
         background-color: $accent-fg-color;
-        mask: url('../../img/icons-create-room.svg');
+        mask: url('$(res)/img/icons-create-room.svg');
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 80%;

res/css/structures/_RoomSubList.scss

@@ -105,7 +105,7 @@ limitations under the License.
 .mx_RoomSubList_addRoom {
     background-color: $roomheader-addroom-color;
     color: $roomsublist-background;
-    background-image: url('../../img/icons-room-add.svg');
+    background-image: url('$(res)/img/icons-room-add.svg');
     background-repeat: no-repeat;
     background-position: center;
     border-radius: 10px; // 16/2 + 2 padding
@@ -120,7 +120,7 @@ limitations under the License.
 
 .mx_RoomSubList_chevron {
     pointer-events: none;
-    background-image: url('../../img/topleft-chevron.svg');
+    background-image: url('$(res)/img/topleft-chevron.svg');
     background-repeat: no-repeat;
     transition: transform 0.2s ease-in;
     width: 10px;

res/css/structures/_RoomView.scss

@@ -116,7 +116,7 @@ limitations under the License.
 
 .mx_RoomView_messagePanelSearchSpinner {
     flex: 1;
-    background-image: url('../../img/typing-indicator-2x.gif');
+    background-image: url('$(res)/img/typing-indicator-2x.gif');
     background-position: center 367px;
     background-size: 25px;
     background-repeat: no-repeat;
@@ -125,7 +125,7 @@ limitations under the License.
 
 .mx_RoomView_messagePanelSearchSpinner:before {
     background-color: $greyed-fg-color;
-    mask: url('../../img/feather-icons/search-input.svg');
+    mask: url('$(res)/img/feather-icons/search-input.svg');
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: 50px;

res/css/structures/_SearchBox.scss

@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_SearchBox_closeButton {
     cursor: pointer;
-    background-image: url('../../img/icons-close.svg');
+    background-image: url('$(res)/img/icons-close.svg');
     background-repeat: no-repeat;
     width: 16px;
     height: 16px;

res/css/structures/_TagPanel.scss

@@ -130,12 +130,12 @@ limitations under the License.
 }
 
 .mx_TagPanel_groupsButton > .mx_GroupsButton:before {
-    mask: url('../../img/feather-icons/users.svg');
+    mask: url('$(res)/img/feather-icons/users.svg');
     mask-position: center 11px;
 }
 
 .mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
-    mask: url('../../img/feather-icons/life-buoy.svg');
+    mask: url('$(res)/img/feather-icons/life-buoy.svg');
     mask-position: center 9px;
 }
 

res/css/structures/_UserSettings.scss

@@ -173,7 +173,7 @@ limitations under the License.
     padding: 0px;
     width: 240px;
     color: $input-fg-color;
-    font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+    font-family: $font-family;
     font-size: 16px;
 }
 

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -61,7 +61,7 @@ limitations under the License.
     padding: 0;
     width: 240px;
     color: $input-fg-color;
-    font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+    font-family: $font-family;
     font-size: 16px;
 }
 

res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss

@@ -24,7 +24,7 @@ limitations under the License.
     padding-bottom: 10px;
 
     &:before {
-        mask: url("../../img/e2e/lock-warning.svg");
+        mask: url("$(res)/img/e2e/lock-warning.svg");
         mask-repeat: no-repeat;
         background-color: $primary-fg-color;
         content: "";

res/css/views/elements/_DirectorySearchBox.scss

@@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     padding-right: 10px;
     background-color: $plinth-bg-color;
     border-radius: 3px;
-    background-image: url('../../img/icon-return.svg');
+    background-image: url('$(res)/img/icon-return.svg');
     background-position: 8px 70%;
     background-repeat: no-repeat;
     text-indent: 18px;
@@ -61,7 +61,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
 .mx_DirectorySearchBox_clear {
     display: inline-block;
     vertical-align: middle;
-    background: url('../../img/icon_context_delete.svg');
+    background: url('$(res)/img/icon_context_delete.svg');
     background-position: 0 50%;
     background-repeat: no-repeat;
     width: 15px;

res/css/views/elements/_ImageView.scss

@@ -50,7 +50,7 @@ limitations under the License.
     max-height: 100%;
     /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
     object-fit: contain;
-    /* background-image: url('../../img/trans.png'); */
+    /* background-image: url('$(res)/img/trans.png'); */
     pointer-events: all;
 }
 

res/css/views/rooms/_EntityTile.scss

@@ -22,7 +22,7 @@ limitations under the License.
 }
 
 .mx_EntityTile:hover {
-    background-image: url('../../img/member_chevron.png');
+    background-image: url('$(res)/img/member_chevron.png');
     background-position: center right 10px;
     background-repeat: no-repeat;
     padding-right: 30px;

res/css/views/rooms/_EventTile.scss

@@ -291,8 +291,8 @@ limitations under the License.
 }
 
 /* always override hidden attribute for blocked and warning */
-.mx_EventTile_e2eIcon_hidden[src="img/e2e-blocked.svg"],
-.mx_EventTile_e2eIcon_hidden[src="img/e2e-warning.svg"] {
+.mx_EventTile_e2eIcon_hidden[src*="img/e2e-blocked.svg"],
+.mx_EventTile_e2eIcon_hidden[src*="img/e2e-warning.svg"] {
     display: block;
 }
 

res/css/views/rooms/_MemberList.scss

@@ -83,7 +83,7 @@ limitations under the License.
 
 .mx_MemberList_invite span {
     margin: 0 auto;
-    background-image: url('../../img/feather-icons/user-add.svg');
+    background-image: url('$(res)/img/feather-icons/user-add.svg');
     background-repeat: no-repeat;
     background-position: center left;
     padding-left: 25px;

res/css/views/rooms/_RoomTile.scss

@@ -29,7 +29,7 @@ limitations under the License.
     display: none;
     flex: 0 0 16px;
     height: 16px;
-    background-image: url('../../img/icon_context.svg');
+    background-image: url('$(res)/img/icon_context.svg');
     background-repeat: no-repeat;
     background-position: center;
 }

res/css/views/rooms/_SearchBar.scss

@@ -32,7 +32,7 @@ limitations under the License.
         width: 37px;
         height: 37px;
         background-color: $accent-color;
-        mask: url('../../img/feather-icons/search-input.svg');
+        mask: url('$(res)/img/feather-icons/search-input.svg');
         mask-repeat: no-repeat;
         mask-position: center;
     }
@@ -55,7 +55,7 @@ limitations under the License.
 
     .mx_SearchBar_cancel {
         background-color: $warning-color;
-        mask: url('../../img/cancel.svg');
+        mask: url('$(res)/img/cancel.svg');
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 14px;

res/css/views/rooms/_TopUnreadMessagesBar.scss

@@ -54,7 +54,7 @@ limitations under the License.
     position: absolute;
     width: 38px;
     height: 38px;
-    mask: url('../../img/icon-jump-to-first-unread.svg');
+    mask: url('$(res)/img/icon-jump-to-first-unread.svg');
     mask-repeat: no-repeat;
     mask-position: 9px 13px;
     background: $roomtile-name-color;

res/css/views/rooms/_WhoIsTypingTile.scss

@@ -61,7 +61,7 @@ limitations under the License.
 }
 
 .mx_WhoIsTypingTile_label > span {
-    background-image: url('../../img/typing-indicator-2x.gif');
+    background-image: url('$(res)/img/typing-indicator-2x.gif');
     background-size: 25px;
     background-position: left bottom;
     background-repeat: no-repeat;

res/themes/dark/css/_dark.scss

@@ -149,8 +149,8 @@ $event-redacted-border-color: #000000;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message_dark.svg";
-$copy-button-url: "../../img/icon_copy_message_dark.svg";
+$edit-button-url: "$(res)/img/icon_context_message_dark.svg";
+$copy-button-url: "$(res)/img/icon_copy_message_dark.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

res/themes/dark/css/dark.scss

@@ -1,4 +1,5 @@
+@import "../../light/css/_paths.scss";
+@import "../../light/css/_fonts.scss";
 @import "../../light/css/_base.scss";
 @import "_dark.scss";
 @import "../../../../res/css/_components.scss";
-

res/themes/dharma/css/_dharma.scss

@@ -1,5 +1,3 @@
-@import "_fonts.scss";
-
 // XXX: check this?
 /* Nunito lacks combining diacritics, so these will fall through
    to the next font.  Helevetica's diacritics however do not combine
@@ -171,8 +169,8 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_message.svg";
+$edit-button-url: "$(res)/img/icon_context_message.svg";
+$copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
@@ -275,7 +273,7 @@ input[type=search].mx_textinput_icon {
 // FIXME THEME - Tint by CSS rather than referencing a duplicate asset
 input[type=text].mx_textinput_icon.mx_textinput_search,
 input[type=search].mx_textinput_icon.mx_textinput_search {
-    background-image: url('../../img/feather-icons/search-input.svg');
+    background-image: url('$(res)/img/feather-icons/search-input.svg');
 }
 
 // dont search UI as not all browsers support it,

res/themes/dharma/css/_fonts.scss

@@ -11,37 +11,37 @@
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 400;
-  src: url('../../fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 600;
-  src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 700;
-  src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 400;
-  src: url('../../fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 600;
-  src: url('../../fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 700;
-  src: url('../../fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
 }
 
 /*
@@ -51,14 +51,14 @@
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
+    src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }

res/themes/dharma/css/dharma.scss

@@ -1,3 +1,4 @@
+@import "../../light/css/_paths.scss";
+@import "_fonts.scss";
 @import "_dharma.scss";
 @import "../../../../res/css/_components.scss";
-

res/themes/light/css/_base.scss

@@ -1,5 +1,3 @@
-@import "_fonts.scss";
-
 /* Open Sans lacks combining diacritics, so these will fall through
    to the next font.  Helevetica's diacritics however do not combine
    nicely with Open Sans (on OSX, at least) and result in a huge
@@ -162,8 +160,8 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_message.svg";
+$edit-button-url: "$(res)/img/icon_context_message.svg";
+$copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color