Add bokutachi stuff for scss

client/config/webpack.config.js

@@ -48,9 +48,33 @@ const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 
+let COLOUR_SET;
+if (process.env.REACT_APP_TCHIC_MODE === "ktchi") {
+	COLOUR_SET = `$tachi-primary: #e61c6e;
+	$tachi-primary-hover: #de6589;
+	$tachi-background: #131313;
+	$tachi-lightground: #2b292b;
+	$tachi-backestground: #000000;
+	$tachi-overground: #524e52;
+	
+	$tachi-info: #527acc;
+	$tachi-info-hover: #8da7dd;`;
+} else {
+	COLOUR_SET = `
+	$tachi-primary: #527acc;
+	$tachi-primary-hover: #8da7dd;
+	$tachi-background: #131313;
+	$tachi-lightground: #2b292b;
+	$tachi-backestground: #000000;
+	$tachi-overground: #524e52;
+
+	$tachi-info: #31497A;
+	$tachi-info-hover: #455B87;`;
+}
+
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function(webpackEnv) {
+module.exports = function (webpackEnv) {
 	const isEnvDevelopment = webpackEnv === "development";
 	const isEnvProduction = webpackEnv === "production";
 
@@ -79,7 +103,7 @@ module.exports = function(webpackEnv) {
 	const env = getClientEnvironment(publicUrl);
 
 	// common function to get style loaders
-	const getStyleLoaders = (cssOptions, preProcessor) => {
+	const getStyleLoaders = (cssOptions, preProcessor, options = {}) => {
 		const loaders = [
 			isEnvDevelopment && require.resolve("style-loader"),
 			isEnvProduction && {
@@ -128,6 +152,7 @@ module.exports = function(webpackEnv) {
 					loader: require.resolve(preProcessor),
 					options: {
 						sourceMap: true,
+						...options
 					},
 				}
 			);
@@ -158,7 +183,7 @@ module.exports = function(webpackEnv) {
 			// require.resolve('webpack-dev-server/client') + '?/',
 			// require.resolve('webpack/hot/dev-server'),
 			isEnvDevelopment &&
-				require.resolve("react-dev-utils/webpackHotDevClient"),
+			require.resolve("react-dev-utils/webpackHotDevClient"),
 			// Finally, this is your app's code:
 			paths.appIndexJs,
 			// We include the app code last so that if there is a runtime error during
@@ -187,12 +212,12 @@ module.exports = function(webpackEnv) {
 			// Point sourcemap entries to original disk location (format as URL on Windows)
 			devtoolModuleFilenameTemplate: isEnvProduction
 				? (info) =>
-						path
-							.relative(paths.appSrc, info.absoluteResourcePath)
-							.replace(/\\/g, "/")
+					path
+						.relative(paths.appSrc, info.absoluteResourcePath)
+						.replace(/\\/g, "/")
 				: isEnvDevelopment &&
-					((info) =>
-						path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
+				((info) =>
+					path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
 			// Prevents conflicts when multiple Webpack runtimes (from different apps)
 			// are used on the same page.
 			jsonpFunction: `webpackJsonp${appPackageJson.name}`,
@@ -257,13 +282,13 @@ module.exports = function(webpackEnv) {
 						parser: safePostCssParser,
 						map: shouldUseSourceMap
 							? {
-									// `inline: false` forces the sourcemap to be output into a
-									// separate file
-									inline: false,
-									// `annotation: true` appends the sourceMappingURL to the end of
-									// the css file, helping the browser find the sourcemap
-									annotation: true,
-								}
+								// `inline: false` forces the sourcemap to be output into a
+								// separate file
+								inline: false,
+								// `annotation: true` appends the sourceMappingURL to the end of
+								// the css file, helping the browser find the sourcemap
+								annotation: true,
+							}
 							: false,
 					},
 				}),
@@ -450,7 +475,10 @@ module.exports = function(webpackEnv) {
 									importLoaders: 2,
 									sourceMap: shouldUseSourceMap,
 								},
-								"sass-loader"
+								"sass-loader",
+								{
+									data: COLOUR_SET,
+								}
 							),
 							// Don't consider CSS imports dead code even if the
 							// containing package claims to have no side effects.
@@ -505,19 +533,19 @@ module.exports = function(webpackEnv) {
 					},
 					isEnvProduction
 						? {
-								minify: {
-									removeComments: true,
-									collapseWhitespace: true,
-									removeRedundantAttributes: true,
-									useShortDoctype: true,
-									removeEmptyAttributes: true,
-									removeStyleLinkTypeAttributes: true,
-									keepClosingSlash: true,
-									minifyJS: true,
-									minifyCSS: true,
-									minifyURLs: true,
-								},
-							}
+							minify: {
+								removeComments: true,
+								collapseWhitespace: true,
+								removeRedundantAttributes: true,
+								useShortDoctype: true,
+								removeEmptyAttributes: true,
+								removeStyleLinkTypeAttributes: true,
+								keepClosingSlash: true,
+								minifyJS: true,
+								minifyCSS: true,
+								minifyURLs: true,
+							},
+						}
 						: undefined
 				)
 			),
@@ -525,8 +553,8 @@ module.exports = function(webpackEnv) {
 			// a network request.
 			// https://github.com/facebook/create-react-app/issues/5358
 			isEnvProduction &&
-				shouldInlineRuntimeChunk &&
-				new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
+			shouldInlineRuntimeChunk &&
+			new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
 			// Makes some environment variables available in index.html.
 			// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
 			// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
@@ -554,14 +582,14 @@ module.exports = function(webpackEnv) {
 			// makes the discovery automatic so you don't have to restart.
 			// See https://github.com/facebook/create-react-app/issues/186
 			isEnvDevelopment &&
-				new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+			new WatchMissingNodeModulesPlugin(paths.appNodeModules),
 			isEnvProduction &&
-				new MiniCssExtractPlugin({
-					// Options similar to the same options in webpackOptions.output
-					// both options are optional
-					filename: "static/css/[name].[contenthash:8].css",
-					chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
-				}),
+			new MiniCssExtractPlugin({
+				// Options similar to the same options in webpackOptions.output
+				// both options are optional
+				filename: "static/css/[name].[contenthash:8].css",
+				chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
+			}),
 			// Generate an asset manifest file with the following content:
 			// - "files" key: Mapping of all asset filenames to their corresponding
 			//   output file so that tools can pick it up without having to parse
@@ -595,48 +623,48 @@ module.exports = function(webpackEnv) {
 			// Generate a service worker script that will precache, and keep up to date,
 			// the HTML & assets that are part of the Webpack build.
 			isEnvProduction &&
-				new WorkboxWebpackPlugin.GenerateSW({
-					clientsClaim: true,
-					exclude: [/\.map$/, /asset-manifest\.json$/],
-					importWorkboxFrom: "cdn",
-					navigateFallback: publicUrl + "/index.html",
-					navigateFallbackBlacklist: [
-						// Exclude URLs starting with /_, as they're likely an API call
-						new RegExp("^/_"),
-						// Exclude any URLs whose last part seems to be a file extension
-						// as they're likely a resource and not a SPA route.
-						// URLs containing a "?" character won't be blacklisted as they're likely
-						// a route with query params (e.g. auth callbacks).
-						new RegExp("/[^/?]+\\.[^/]+$"),
-					],
-				}),
+			new WorkboxWebpackPlugin.GenerateSW({
+				clientsClaim: true,
+				exclude: [/\.map$/, /asset-manifest\.json$/],
+				importWorkboxFrom: "cdn",
+				navigateFallback: publicUrl + "/index.html",
+				navigateFallbackBlacklist: [
+					// Exclude URLs starting with /_, as they're likely an API call
+					new RegExp("^/_"),
+					// Exclude any URLs whose last part seems to be a file extension
+					// as they're likely a resource and not a SPA route.
+					// URLs containing a "?" character won't be blacklisted as they're likely
+					// a route with query params (e.g. auth callbacks).
+					new RegExp("/[^/?]+\\.[^/]+$"),
+				],
+			}),
 			// TypeScript type checking
 			useTypeScript &&
-				new ForkTsCheckerWebpackPlugin({
-					typescript: resolve.sync("typescript", {
-						basedir: paths.appNodeModules,
-					}),
-					async: isEnvDevelopment,
-					useTypescriptIncrementalApi: true,
-					checkSyntacticErrors: true,
-					resolveModuleNameModule: process.versions.pnp
-						? `${__dirname}/pnpTs.js`
-						: undefined,
-					resolveTypeReferenceDirectiveModule: process.versions.pnp
-						? `${__dirname}/pnpTs.js`
-						: undefined,
-					tsconfig: paths.appTsConfig,
-					reportFiles: [
-						"**",
-						"!**/__tests__/**",
-						"!**/?(*.)(spec|test).*",
-						"!**/src/setupProxy.*",
-						"!**/src/setupTests.*",
-					],
-					silent: true,
-					// The formatter is invoked directly in WebpackDevServerUtils during development
-					formatter: isEnvProduction ? typescriptFormatter : undefined,
+			new ForkTsCheckerWebpackPlugin({
+				typescript: resolve.sync("typescript", {
+					basedir: paths.appNodeModules,
 				}),
+				async: isEnvDevelopment,
+				useTypescriptIncrementalApi: true,
+				checkSyntacticErrors: true,
+				resolveModuleNameModule: process.versions.pnp
+					? `${__dirname}/pnpTs.js`
+					: undefined,
+				resolveTypeReferenceDirectiveModule: process.versions.pnp
+					? `${__dirname}/pnpTs.js`
+					: undefined,
+				tsconfig: paths.appTsConfig,
+				reportFiles: [
+					"**",
+					"!**/__tests__/**",
+					"!**/?(*.)(spec|test).*",
+					"!**/src/setupProxy.*",
+					"!**/src/setupTests.*",
+				],
+				silent: true,
+				// The formatter is invoked directly in WebpackDevServerUtils during development
+				formatter: isEnvProduction ? typescriptFormatter : undefined,
+			}),
 		].filter(Boolean),
 		// Some libraries import Node modules but don't use them in the browser.
 		// Tell Webpack to provide empty mocks for them so importing them works.

client/scripts/build.js

@@ -8,7 +8,7 @@ process.env.NODE_ENV = 'production';
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
 process.on('unhandledRejection', err => {
-  throw err;
+	throw err;
 });
 
 // Ensure environment variables are read.
@@ -28,7 +28,7 @@ const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 const printBuildError = require('react-dev-utils/printBuildError');
 
 const measureFileSizesBeforeBuild =
-  FileSizeReporter.measureFileSizesBeforeBuild;
+	FileSizeReporter.measureFileSizesBeforeBuild;
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 const useYarn = fs.existsSync(paths.yarnLockFile);
 
@@ -40,7 +40,7 @@ const isInteractive = process.stdout.isTTY;
 
 // Warn and crash if required files are missing
 if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
+	process.exit(1);
 }
 
 // Generate configuration
@@ -50,150 +50,150 @@ const config = configFactory('production');
 // browserslist defaults.
 const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 checkBrowsers(paths.appPath, isInteractive)
-  .then(() => {
-    // First, read the current file sizes in build directory.
-    // This lets us display how much they changed later.
-    return measureFileSizesBeforeBuild(paths.appBuild);
-  })
-  .then(previousFileSizes => {
-    // Remove all content but keep the directory so that
-    // if you're in it, you don't end up in Trash
-    fs.emptyDirSync(paths.appBuild);
-    // Merge with the public folder
-    copyPublicFolder();
-    // Start the webpack build
-    return build(previousFileSizes);
-  })
-  .then(
-    ({ stats, previousFileSizes, warnings }) => {
-      if (warnings.length) {
-        console.log(chalk.yellow('Compiled with warnings.\n'));
-        console.log(warnings.join('\n\n'));
-        console.log(
-          '\nSearch for the ' +
-            chalk.underline(chalk.yellow('keywords')) +
-            ' to learn more about each warning.'
-        );
-        console.log(
-          'To ignore, add ' +
-            chalk.cyan('// eslint-disable-next-line') +
-            ' to the line before.\n'
-        );
-      } else {
-        console.log(chalk.green('Compiled successfully.\n'));
-      }
+	.then(() => {
+		// First, read the current file sizes in build directory.
+		// This lets us display how much they changed later.
+		return measureFileSizesBeforeBuild(paths.appBuild);
+	})
+	.then(previousFileSizes => {
+		// Remove all content but keep the directory so that
+		// if you're in it, you don't end up in Trash
+		fs.emptyDirSync(paths.appBuild);
+		// Merge with the public folder
+		copyPublicFolder();
+		// Start the webpack build
+		return build(previousFileSizes);
+	})
+	.then(
+		({ stats, previousFileSizes, warnings }) => {
+			if (warnings.length) {
+				console.log(chalk.yellow('Compiled with warnings.\n'));
+				console.log(warnings.join('\n\n'));
+				console.log(
+					'\nSearch for the ' +
+					chalk.underline(chalk.yellow('keywords')) +
+					' to learn more about each warning.'
+				);
+				console.log(
+					'To ignore, add ' +
+					chalk.cyan('// eslint-disable-next-line') +
+					' to the line before.\n'
+				);
+			} else {
+				console.log(chalk.green('Compiled successfully.\n'));
+			}
 
-      console.log('File sizes after gzip:\n');
-      printFileSizesAfterBuild(
-        stats,
-        previousFileSizes,
-        paths.appBuild,
-        WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE
-      );
-      console.log();
+			console.log('File sizes after gzip:\n');
+			printFileSizesAfterBuild(
+				stats,
+				previousFileSizes,
+				paths.appBuild,
+				WARN_AFTER_BUNDLE_GZIP_SIZE,
+				WARN_AFTER_CHUNK_GZIP_SIZE
+			);
+			console.log();
 
-      const appPackage = require(paths.appPackageJson);
-      const publicUrl = paths.publicUrl;
-      const publicPath = config.output.publicPath;
-      const buildFolder = path.relative(process.cwd(), paths.appBuild);
-      printHostingInstructions(
-        appPackage,
-        publicUrl,
-        publicPath,
-        buildFolder,
-        useYarn
-      );
-    },
-    err => {
-      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
-      if (tscCompileOnError) {
-        console.log(chalk.yellow(
-          'Compiled with the following type errors (you may want to check these before deploying your app):\n'
-        ));
-        printBuildError(err);
-      } else {
-        console.log(chalk.red('Failed to compile.\n'));
-        printBuildError(err);
-        process.exit(1);
-      }
-    }
-  )
-  .catch(err => {
-    if (err && err.message) {
-      console.log(err.message);
-    }
-    process.exit(1);
-  });
+			const appPackage = require(paths.appPackageJson);
+			const publicUrl = paths.publicUrl;
+			const publicPath = config.output.publicPath;
+			const buildFolder = path.relative(process.cwd(), paths.appBuild);
+			printHostingInstructions(
+				appPackage,
+				publicUrl,
+				publicPath,
+				buildFolder,
+				useYarn
+			);
+		},
+		err => {
+			const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+			if (tscCompileOnError) {
+				console.log(chalk.yellow(
+					'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+				));
+				printBuildError(err);
+			} else {
+				console.log(chalk.red('Failed to compile.\n'));
+				printBuildError(err);
+				process.exit(1);
+			}
+		}
+	)
+	.catch(err => {
+		if (err && err.message) {
+			console.log(err.message);
+		}
+		process.exit(1);
+	});
 
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes) {
-  // We used to support resolving modules according to `NODE_PATH`.
-  // This now has been deprecated in favor of jsconfig/tsconfig.json
-  // This lets you use absolute paths in imports inside large monorepos:
-  if (process.env.NODE_PATH) {
-    console.log(
-      chalk.yellow(
-        'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
-      )
-    );
-    console.log();
-  }
+	// We used to support resolving modules according to `NODE_PATH`.
+	// This now has been deprecated in favor of jsconfig/tsconfig.json
+	// This lets you use absolute paths in imports inside large monorepos:
+	if (process.env.NODE_PATH) {
+		console.log(
+			chalk.yellow(
+				'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
+			)
+		);
+		console.log();
+	}
 
-  console.log('Creating an optimized production build...');
+	console.log('Creating an optimized production build...');
 
-  const compiler = webpack(config);
-  return new Promise((resolve, reject) => {
-    compiler.run((err, stats) => {
-      let messages;
-      if (err) {
-        if (!err.message) {
-          return reject(err);
-        }
-        messages = formatWebpackMessages({
-          errors: [err.message],
-          warnings: [],
-        });
-      } else {
-        messages = formatWebpackMessages(
-          stats.toJson({ all: false, warnings: true, errors: true })
-        );
-      }
-      if (messages.errors.length) {
-        // Only keep the first error. Others are often indicative
-        // of the same problem, but confuse the reader with noise.
-        if (messages.errors.length > 1) {
-          messages.errors.length = 1;
-        }
-        return reject(new Error(messages.errors.join('\n\n')));
-      }
-      if (
-        process.env.CI &&
-        (typeof process.env.CI !== 'string' ||
-          process.env.CI.toLowerCase() !== 'false') &&
-        messages.warnings.length
-      ) {
-        console.log(
-          chalk.yellow(
-            '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n'
-          )
-        );
-        return reject(new Error(messages.warnings.join('\n\n')));
-      }
+	const compiler = webpack(config);
+	return new Promise((resolve, reject) => {
+		compiler.run((err, stats) => {
+			let messages;
+			if (err) {
+				if (!err.message) {
+					return reject(err);
+				}
+				messages = formatWebpackMessages({
+					errors: [err.message],
+					warnings: [],
+				});
+			} else {
+				messages = formatWebpackMessages(
+					stats.toJson({ all: false, warnings: true, errors: true })
+				);
+			}
+			if (messages.errors.length) {
+				// Only keep the first error. Others are often indicative
+				// of the same problem, but confuse the reader with noise.
+				if (messages.errors.length > 1) {
+					messages.errors.length = 1;
+				}
+				return reject(new Error(messages.errors.join('\n\n')));
+			}
+			if (
+				process.env.CI &&
+				(typeof process.env.CI !== 'string' ||
+					process.env.CI.toLowerCase() !== 'false') &&
+				messages.warnings.length
+			) {
+				console.log(
+					chalk.yellow(
+						'\nTreating warnings as errors because process.env.CI = true.\n' +
+						'Most CI servers set it automatically.\n'
+					)
+				);
+				return reject(new Error(messages.warnings.join('\n\n')));
+			}
 
-      return resolve({
-        stats,
-        previousFileSizes,
-        warnings: messages.warnings,
-      });
-    });
-  });
+			return resolve({
+				stats,
+				previousFileSizes,
+				warnings: messages.warnings,
+			});
+		});
+	});
 }
 
 function copyPublicFolder() {
-  fs.copySync(paths.appPublic, paths.appBuild, {
-    dereference: true,
-    filter: file => file !== paths.appHtml,
-  });
+	fs.copySync(paths.appPublic, paths.appBuild, {
+		dereference: true,
+		filter: file => file !== paths.appHtml,
+	});
 }

client/webpack.config.js

@@ -1,43 +0,0 @@
-const path = require("path");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-
-const rootPath = path.resolve(__dirname);
-const distPath = `${rootPath}/dist`;
-
-module.exports = {
-	mode: "development",
-	stats: "errors-only",
-	performance: {
-		hints: true,
-	},
-	entry: {
-		"sass/style.react": "./src/index.scss",
-	},
-	output: {
-		path: distPath,
-		filename: "[name].js",
-	},
-	resolve: { extensions: [".scss"], },
-	plugins: [
-		new MiniCssExtractPlugin({
-			filename: "[name].min.css",
-		}),
-	],
-	module: {
-		rules: [
-			{
-				test: /\.scss$/,
-				use: [
-					MiniCssExtractPlugin.loader,
-					"css-loader",
-					{
-						loader: "sass-loader",
-						options: {
-							sourceMap: true,
-						},
-					},
-				],
-			},
-		],
-	}
-}