Move sass files into src and closer to the relevant components

src/converse.js

@@ -4,10 +4,13 @@
  * @license Mozilla Public License (MPLv2)
  */
 
+
 import "@converse/headless/headless";
 import "i18n";
 import "shared/registry.js";
 
+import 'shared/styles/index.scss';
+
 /* START: Removable components
  * --------------------
  * Any of the following components may be removed if they're not needed.
@@ -33,7 +36,6 @@ import "./plugins/singleton.js";
 /* END: Removable components */
 
 import "./components/converse.js";
-import "../sass/converse.scss";
 
 import { _converse, converse } from "@converse/headless/core";
 import { CustomElement } from 'components/element';

src/modals/base.js

@@ -5,6 +5,8 @@ import { View } from '@converse/skeletor/src/view.js';
 import { api, converse } from "@converse/headless/core";
 import { render } from 'lit-html';
 
+import './styles/_modal.scss';
+
 const { sizzle } = converse.env;
 const u = converse.env.utils;
 

sass/_modal.scss → src/modals/styles/_modal.scss

@@ -1,4 +1,9 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
 #conversejs {
+    @import "bootstrap/scss/modal";
 
     #converse-modals {
         .modal {

src/shared/autocomplete/index.js

@@ -3,6 +3,8 @@ import AutoComplete from './autocomplete.js';
 import { FILTER_CONTAINS, FILTER_STARTSWITH } from './utils.js';
 import { _converse } from '@converse/headless/core';
 
+import './styles/_autocomplete.scss';
+
 _converse.FILTER_CONTAINS = FILTER_CONTAINS;
 _converse.FILTER_STARTSWITH = FILTER_STARTSWITH;
 _converse.AutoComplete = AutoComplete;

src/shared/chat/emoji-picker.js

@@ -9,6 +9,8 @@ import { html } from "lit-element";
 import { tpl_emoji_picker } from "./templates/emoji-picker.js";
 import { until } from 'lit-html/directives/until.js';
 
+import './styles/_emoji.scss';
+
 const u = converse.env.utils;
 
 

sass/_emoji.scss → src/shared/chat/styles/_emoji.scss

@@ -1,4 +1,10 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
 #conversejs {
+    @import "bootstrap/scss/media";
+
     .chatbox {
         img.emoji {
             height: 1.2em;

sass/converse.scss → src/shared/styles/index.scss

@@ -2,7 +2,7 @@
  * Converse.js (Web-based XMPP instant messaging client)
  * https://conversejs.org
  *
- * Copyright (c) 2013-2018, JC Brand <jc@opkode.com>
+ * Copyright (c) 2013-2021, JC Brand <jc@opkode.com>
  * Licensed under the Mozilla Public License
  */
 @import "bootstrap/scss/functions";
@@ -29,13 +29,12 @@
     @import "bootstrap/scss/media";
     @import "bootstrap/scss/list-group";
     @import "bootstrap/scss/close";
-    @import "bootstrap/scss/modal";
     @import "bootstrap/scss/tooltip";
     @import "bootstrap/scss/popover";
     @import "bootstrap/scss/utilities";
 }
 
-@import "font-awesome";
+@import "./font-awesome.scss";
 @import "variables";
 
 @import "core";
@@ -43,7 +42,6 @@
 @import "toolbar";
 @import "chatbox";
 @import "controlbox";
-@import "modal";
 @import "roster";
 @import "lists";
 @import "chatrooms";
@@ -51,5 +49,3 @@
 @import "messages";
 @import "minimized_chats";
 @import "bookmarks";
-@import "autocomplete";
-@import "emoji";

webpack.prod.js

@@ -19,7 +19,7 @@ const plugins = [
             {from: 'logo/conversejs-filled-512.png', to: 'images/logo'},
             {from: 'logo/conversejs-filled-192.svg', to: 'images/logo'},
             {from: 'logo/conversejs-filled-512.svg', to: 'images/logo'},
-            {from: 'sass/webfonts', to: 'webfonts'}
+            {from: 'src/shared/styles/webfonts', to: 'webfonts'}
         ]
     }),
     new webpack.DefinePlugin({ // This makes it possible for us to safely use env vars on our code
@@ -62,4 +62,3 @@ module.exports = merge(common, {
         }]
     }
 });
-