From a4826d7de58ca2d5cf65f542f714d002c07af65d Mon Sep 17 00:00:00 2001 From: zkldi Date: Thu, 14 Oct 2021 16:21:11 +0100 Subject: [PATCH] Add bokutachi stuff for scss --- client/config/webpack.config.js | 182 ++++++++++++--------- client/scripts/build.js | 276 ++++++++++++++++---------------- client/webpack.config.js | 43 ----- 3 files changed, 243 insertions(+), 258 deletions(-) delete mode 100644 client/webpack.config.js diff --git a/client/config/webpack.config.js b/client/config/webpack.config.js index 360597f1c..d8483b4d3 100644 --- a/client/config/webpack.config.js +++ b/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.: // @@ -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. diff --git a/client/scripts/build.js b/client/scripts/build.js index 58c5447e4..cf7dd49cf 100644 --- a/client/scripts/build.js +++ b/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, + }); } diff --git a/client/webpack.config.js b/client/webpack.config.js deleted file mode 100644 index 1d31ba0ba..000000000 --- a/client/webpack.config.js +++ /dev/null @@ -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, - }, - }, - ], - }, - ], - } -}