Compile sass using webpack (#2728) bruception

* Compile sass using webpack

* Add scss compilation

.github/workflows/pr-check.yml

@@ -31,18 +31,15 @@ jobs:
               - 'frontend/**/*.js'
               - 'frontend/**/*.ts'
               - 'backend/**/*.{js,ts}'
-            scss:
-              - 'frontend/**/*.scss'
-            ts-fe:
+            ts-scss-fe:
               - 'frontend/**/*.js'
               - 'frontend/**/*.ts'
+              - 'frontend/**/*.scss'
             ts-be:
               - 'backend/**/*.{js,ts}'
             anti-cheat:
               - 'backend/**/anticheat/**'
 
-      - run: echo ${{ steps.filter.outputs.changes }}
-
       - name: Check Anti-cheat
         if: steps.filter.outputs.anti-cheat == 'true'
         run: exit 1
@@ -70,9 +67,6 @@ jobs:
         if: steps.filter.outputs.changes != '[]'
         run: npm run install:all
 
-      # - name: Run webpack
-      #   run: npm run build:live
-
       - name: Lint JSON
         if: steps.filter.outputs.any-json == 'true'
         run: npm run pr-check-lint-json
@@ -93,14 +87,10 @@ jobs:
         if: steps.filter.outputs.any-tsscss == 'true'
         run: npm run lint
 
-      - name: Compile SCSS
-        if: steps.filter.outputs.scss == 'true'
-        run: npm run pr-check-scss
-
       - name: Build backend
         if: steps.filter.outputs.ts-be == 'true'
         run: npm run pr-check-build-be
 
       - name: Run webpack
-        if: steps.filter.outputs.ts-fe == 'true'
+        if: steps.filter.outputs.ts-scss-fe == 'true'
         run: npm run pr-check-ts

frontend/gulpfile.js

@@ -1,20 +1,12 @@
-const del = require("del");
-const concat = require("gulp-concat");
 const { webpack } = require("webpack");
 const eslint = require("gulp-eslint-new");
-const vinylPaths = require("vinyl-paths");
-const sass = require("gulp-sass")(require("dart-sass"));
-const { task, src, dest, series, watch } = require("gulp");
+const { task, src, series, watch } = require("gulp");
 const webpackDevConfig = require("./webpack/config.dev.js");
 const webpackProdConfig = require("./webpack/config.prod.js");
 
 const JSONValidation = require("./scripts/json-validation");
 const eslintConfig = "../.eslintrc.json";
 
-task("clean", function () {
-  return src(["./public/"], { allowEmpty: true }).pipe(vinylPaths(del));
-});
-
 task("lint", function () {
   return src(["./src/scripts/**/*.js", "./src/scripts/**/*.ts"])
     .pipe(eslint(eslintConfig))
@@ -57,28 +49,14 @@ const taskWithWebpackConfig = (webpackConfig) => {
 task("webpack", taskWithWebpackConfig(webpackDevConfig));
 task("webpack-production", taskWithWebpackConfig(webpackProdConfig));
 
-task("sass", function () {
-  return src("./src/styles/*.scss")
-    .pipe(concat("style.scss"))
-    .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
-    .pipe(dest("public/css"));
-});
-
-task("compile", series("lint", "lint-json", "webpack", "sass"));
+task("compile", series("lint", "lint-json", "webpack"));
 
 task(
   "compile-production",
-  series(
-    "lint",
-    "lint-json",
-    "validate-json-schema",
-    "webpack-production",
-    "sass"
-  )
+  series("lint", "lint-json", "validate-json-schema", "webpack-production")
 );
 
 task("watch", function () {
-  watch("./src/styles/*.scss", series("sass"));
   watch(
     [
       "./src/scripts/**/*.js",
@@ -91,9 +69,9 @@ task("watch", function () {
   watch(["./static/**/*.*", "./static/*.*"], series("lint-json"));
 });
 
-task("build", series("clean", "compile"));
+task("build", series("compile"));
 
-task("build-production", series("clean", "compile-production"));
+task("build-production", series("compile-production"));
 
 //PR CHECK
 
@@ -115,6 +93,5 @@ task("pr-check-language-json", series("validate-language-json-schema"));
 task("pr-check-other-json", series("validate-other-json-schema"));
 
 task("pr-check-lint", series("lint"));
-task("pr-check-scss", series("sass"));
 
 task("pr-check-ts", series("webpack-production"));

frontend/package.json

@@ -29,16 +29,19 @@
     "buffer": "^6.0.3",
     "circular-dependency-plugin": "5.2.2",
     "copy-webpack-plugin": "10.2.4",
-    "dart-sass": "^1.25.0",
-    "del": "^6.0.0",
+    "css-loader": "6.7.1",
+    "css-minimizer-webpack-plugin": "3.4.1",
     "eslint-webpack-plugin": "3.1.1",
     "grecaptcha": "^1.0.3",
     "gulp": "^4.0.2",
-    "gulp-concat": "^2.6.1",
     "gulp-eslint-new": "^1.3.0",
     "gulp-sass": "^5.0.0",
     "html-minimizer-webpack-plugin": "3.5.0",
+    "json-minimizer-webpack-plugin": "3.3.0",
     "madge": "5.0.1",
+    "mini-css-extract-plugin": "2.6.0",
+    "sass": "1.49.9",
+    "sass-loader": "12.6.0",
     "stream-browserify": "^3.0.0",
     "string-replace-loader": "3.1.0",
     "ts-loader": "9.2.6",

frontend/src/scripts/index.ts

@@ -1,5 +1,7 @@
 // this file should be concatenated at the top of the legacy js files
 
+import "../styles/index.scss";
+
 // @ts-ignore
 import Chart from "chart.js";
 // @ts-ignore

frontend/src/styles/index.scss

@@ -0,0 +1,3 @@
+@import "about", "account", "animations", "banners", "caret", "commandline",
+  "core", "footer", "inputs", "keymap", "leaderboards", "login", "monkey", "nav",
+  "notifications", "popups", "scroll", "settings", "test", "z_media-queries";

frontend/webpack/config.base.js

@@ -1,6 +1,7 @@
 const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
 const CircularDependencyPlugin = require("circular-dependency-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 let circularImports = 0;
 
@@ -17,9 +18,30 @@ const BASE_CONFIGURATION = {
   output: {
     path: path.resolve(__dirname, "../public/js/"),
     filename: "monkeytype.js",
+    clean: true,
   },
   module: {
-    rules: [{ test: /\.tsx?$/, loader: "ts-loader" }],
+    rules: [
+      { test: /\.tsx?$/, loader: "ts-loader" },
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              url: false,
+            },
+          },
+          {
+            loader: "sass-loader",
+            options: {
+              implementation: require("sass"),
+            },
+          },
+        ],
+      },
+    ],
   },
   plugins: [
     new CircularDependencyPlugin({
@@ -45,6 +67,9 @@ const BASE_CONFIGURATION = {
     new CopyPlugin({
       patterns: [{ from: "./static", to: "../" }],
     }),
+    new MiniCssExtractPlugin({
+      filename: "../css/style.css",
+    }),
   ],
 };
 

frontend/webpack/config.prod.js

@@ -1,5 +1,7 @@
 const { merge } = require("webpack-merge");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
+const JsonMinimizerPlugin = require("json-minimizer-webpack-plugin");
 
 const BASE_CONFIGURATION = require("./config.base");
 
@@ -56,7 +58,12 @@ const PRODUCTION_CONFIGURATION = {
   },
   optimization: {
     minimize: true,
-    minimizer: [`...`, new HtmlMinimizerPlugin()],
+    minimizer: [
+      `...`,
+      new HtmlMinimizerPlugin(),
+      new JsonMinimizerPlugin(),
+      new CssMinimizerPlugin(),
+    ],
   },
 };
 

package.json

@@ -17,7 +17,6 @@
     "pr-check-quote-json": "cd frontend && npx gulp pr-check-quote-json",
     "pr-check-language-json": "cd frontend && npx gulp pr-check-language-json",
     "pr-check-other-json": "cd frontend && npx gulp pr-check-other-json",
-    "pr-check-scss": "cd frontend && npx gulp pr-check-scss",
     "pr-check-ts": "cd frontend && npx gulp pr-check-ts",
     "pr-check-build-be": "cd backend && npm run build"
   },