Optimize css

frontend/package.json

@@ -16,12 +16,18 @@
   "browserslist": [
     "defaults"
   ],
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
   "devDependencies": {
     "@types/socket.io-client": "^1.4.34",
     "@typescript-eslint/eslint-plugin": "^3.9.1",
     "@typescript-eslint/parser": "^3.9.1",
     "clean-webpack-plugin": "^3.0.0",
     "common-config-webpack-plugin": "^2.0.1",
+    "css-loader": "^1.0.1",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.21.2",
@@ -34,10 +40,13 @@
     "html-webpack-inline-svg-plugin": "^2.3.0",
     "html-webpack-plugin": "^4.5.0",
     "image-config-webpack-plugin": "^2.0.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "postcss-loader": "^3.0.0",
     "prettier": "^2.0.5",
     "resize-observer-polyfill": "^1.5.1",
     "resolve-url-loader": "^3.1.1",
-    "scss-config-webpack-plugin": "^2.0.0",
+    "sass": "^1.27.0",
+    "sass-loader": "^8.0.2",
     "sdf-2d": "^0.6.0",
     "shared": "file:../shared",
     "socket.io-client": "^2.3.1",

frontend/src/main.scss

@@ -1,8 +1,8 @@
-@import './styles/vars.scss';
-@import './styles/button.scss';
-@import './styles/form.scss';
-@import './styles/mixins.scss';
-@import './styles/settings.scss';
+@use 'styles/vars' as *;
+@use 'styles/button';
+@use 'styles/form';
+@use 'styles/mixins' as *;
+@use 'styles/settings';
 
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Open+Sans&display=swap');
 

frontend/src/styles/_mixins.scss

@@ -0,0 +1,11 @@
+@mixin square($size) {
+  width: $size;
+  height: $size;
+}
+
+@mixin background {
+  backdrop-filter: blur(24px);
+  @supports not (backdrop-filter: blur(24px)) {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}

frontend/src/styles/_vars.scss

@@ -0,0 +1,24 @@
+$gray: #ccc;
+$red: #b33951;
+$accent: #b33951;
+$border-width: 1.5px;
+$border-width-focused: 3px;
+$border: $border-width solid white;
+$small-padding: 12px;
+$medium-padding: 24px;
+$large-padding: 64px;
+$border-radius: 15px;
+$animation-time: 200ms ease;
+$breakpoint: 700px;
+$height-breakpoint: 500px;
+$large-icon: 48px;
+$small-icon: 32px;
+$bright-decla: #4069a5;
+$bright-red: #d15652;
+$bright-neutral: #88888877;
+
+:root {
+  --bright-decla: #{$bright-decla};
+  --bright-red: #{$bright-red};
+  --bright-neutral: #{$bright-neutral};
+}

frontend/src/styles/button.scss

@@ -1,4 +1,4 @@
-@import './vars.scss';
+@use './vars.scss' as *;
 
 button {
   border: none;

frontend/src/styles/form.scss

@@ -1,5 +1,5 @@
-@import './vars.scss';
-@import './mixins.scss';
+@use 'vars' as *;
+@use 'mixins' as *;
 
 form {
   @include background;
@@ -38,7 +38,7 @@ form {
       position: relative;
       padding: 15px 0 0;
       margin-top: 10px;
-      margin: 10px 0 $small-padding 0;
+      margin: 10px $small-padding / 2 $small-padding $small-padding / 2;
 
       input {
         font-family: inherit;
@@ -48,6 +48,7 @@ form {
         padding: 10px 0 0px 0;
         background: transparent;
         margin-bottom: $border-width-focused - $border-width;
+        width: 100%;
 
         &::placeholder {
           color: transparent;

frontend/src/styles/settings.scss

@@ -1,5 +1,5 @@
-@import './vars.scss';
-@import './mixins.scss';
+@use 'vars' as *;
+@use 'mixins' as *;
 
 #toggle-settings-container,
 #settings-container {

frontend/webpack.config.js

@@ -1,10 +1,12 @@
 const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');
 const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
 const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
+const Sass = require('sass');
+
 //const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 
 module.exports = {
@@ -18,9 +20,7 @@ module.exports = {
   plugins: [
     // Cleans the dist folder before the build starts
     new CleanWebpackPlugin(),
-    new ScssConfigWebpackPlugin(),
-
-    // Generate a base html file and injects all generated css and js files
+    new MiniCssExtractPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html',
       inlineSource: '.(css)$',
@@ -34,10 +34,8 @@ module.exports = {
         },
       ],
     }),
-    //new FaviconsWebpackPlugin('static/logo.svg'),
-    // SCSS Configuration for .css .module.css and .scss .module.scss files
-    // see https://github.com/namics/webpack-config-plugins/tree/master/packages/scss-config-webpack-plugin/config
 
+    //new FaviconsWebpackPlugin('static/logo.svg'),
     // Multi threading typescript loader configuration with caching for .ts and .tsx files
     // see https://github.com/namics/webpack-config-plugins/tree/master/packages/ts-config-webpack-plugin/config
     new TsConfigWebpackPlugin(),
@@ -61,13 +59,18 @@ module.exports = {
         use: ['source-map-loader'],
       },
       {
-        test: /\.css$/,
+        test: /\.scss$/i,
         use: [
-          {
-            loader: 'style-loader',
-            options: { injectType: 'singletonStyleTag' },
-          },
+          MiniCssExtractPlugin.loader,
           'css-loader',
+          'postcss-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              implementation: Sass,
+            },
+          },
         ],
       },
       {