Update CRACO (#396)

craco-less.js

@@ -1,140 +0,0 @@
-const path = require('path');
-const { getLoader, loaderByName, throwUnexpectedConfigError } = require('@craco/craco');
-
-const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
-  const throwError = (message, githubIssueQuery) =>
-    throwUnexpectedConfigError({
-      packageName: 'craco-less',
-      githubRepo: 'DocSpring/craco-less',
-      message,
-      githubIssueQuery,
-    });
-
-  const lessExtension = /\.less$/;
-  const options = pluginOptions || {};
-  const pathSep = path.sep;
-
-  const oneOfRule = webpackConfig.module.rules.find(rule => rule.oneOf);
-  if (!oneOfRule) {
-    throwError(
-      'Can\'t find a \'oneOf\' rule under module.rules in the ' +
-      `${context.env} webpack config!`,
-      'webpack+rules+oneOf',
-    );
-  }
-
-  const sassRule = oneOfRule.oneOf.find(
-    rule => rule.test && rule.test.toString().includes('scss|sass'),
-  );
-  if (!sassRule) {
-    throwError(
-      'Can\'t find the webpack rule to match scss/sass files in the ' +
-      `${context.env} webpack config!`,
-      'webpack+rules+scss+sass',
-    );
-  }
-  let lessRule = {
-    exclude: /\.module\.(less)$/,
-    test: lessExtension,
-    use: [],
-  };
-
-  const loaders = sassRule.use;
-  loaders.forEach(ruleOrLoader => {
-    let rule;
-    if (typeof ruleOrLoader === 'string') {
-      rule = {
-        loader: ruleOrLoader,
-        options: {},
-      };
-    } else {
-      rule = ruleOrLoader;
-    }
-
-    if (
-      (context.env === 'development' || context.env === 'test') &&
-      rule.loader.includes(`${pathSep}style-loader${pathSep}`)
-    ) {
-      lessRule.use.push({
-        loader: rule.loader,
-        options: {
-          ...rule.options,
-          ...(options.styleLoaderOptions || {}),
-        },
-      });
-    } else if (rule.loader.includes(`${pathSep}css-loader${pathSep}`)) {
-      lessRule.use.push({
-        loader: rule.loader,
-        options: {
-          ...rule.options,
-          ...(options.cssLoaderOptions || {}),
-        },
-      });
-    } else if (rule.loader.includes(`${pathSep}postcss-loader${pathSep}`)) {
-      lessRule.use.push({
-        loader: rule.loader,
-        options: {
-          ...rule.options,
-          ...(options.postcssLoaderOptions || {}),
-        },
-      });
-    } else if (rule.loader.includes(`${pathSep}resolve-url-loader${pathSep}`)) {
-      lessRule.use.push({
-        loader: rule.loader,
-        options: {
-          ...rule.options,
-          ...(options.resolveUrlLoaderOptions || {}),
-        },
-      });
-    } else if (
-      context.env === 'production' &&
-      rule.loader.includes(`${pathSep}mini-css-extract-plugin${pathSep}`)
-    ) {
-      lessRule.use.push({
-        loader: rule.loader,
-        options: {
-          ...rule.options,
-          ...(options.miniCssExtractPluginOptions || {}),
-        },
-      });
-    } else if (rule.loader.includes(`${pathSep}sass-loader${pathSep}`)) {
-      const defaultLessLoaderOptions =
-        context.env === 'production' ? { sourceMap: true } : {};
-      lessRule.use.push({
-        loader: require.resolve('less-loader'),
-        options: {
-          ...defaultLessLoaderOptions,
-          ...options.lessLoaderOptions,
-        },
-      });
-    } else {
-      throwError(
-        `Found an unhandled loader in the ${context.env} webpack config: ${rule.loader}`,
-        'webpack+unknown+rule',
-      );
-    }
-  });
-
-  if (options.modifyLessRule) {
-    lessRule = options.modifyLessRule(lessRule, context);
-  }
-  oneOfRule.oneOf.push(lessRule);
-
-  const { isFound, match: fileLoaderMatch } = getLoader(
-    webpackConfig,
-    loaderByName('file-loader'),
-  );
-  if (!isFound) {
-    throwError(
-      `Can't find file-loader in the ${context.env} webpack config!`,
-      'webpack+file-loader',
-    );
-  }
-  fileLoaderMatch.loader.exclude.push(lessExtension);
-
-  return webpackConfig;
-};
-
-module.exports = {
-  overrideWebpackConfig,
-};

craco.config.js

@@ -1,4 +1,4 @@
-const CracoLessPlugin = require('./craco-less');
+const CracoLessPlugin = require('craco-less');
 
 module.exports = {
   plugins: [

package.json

@@ -37,6 +37,7 @@
     "@speedy-tuner/ini": "^0.3.0",
     "@speedy-tuner/types": "^0.3.0",
     "antd": "^4.18.5",
+    "craco-less": "^2.0.0",
     "firebase": "^9.6.4",
     "kbar": "^0.1.0-beta.27",
     "mlg-converter": "^0.5.1",
@@ -48,12 +49,12 @@
     "react-perfect-scrollbar": "^1.5.8",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.0",
     "uplot": "^1.6.18",
     "uplot-react": "^1.1.1"
   },
   "devDependencies": {
-    "@craco/craco": "^6.4.3",
+    "@craco/craco": "^7.0.0-alpha.0",
     "@speedy-tuner/eslint-config": "^0.1.3",
     "@types/node": "^17.0.10",
     "@types/pako": "^1.0.3",

src/App.less

@@ -32,10 +32,7 @@ html, body {
 }
 
 .app-top-bar {
-  // border-bottom-width: 1px;
-  // border-bottom-color: @border-color-split;
-  // border-bottom-style: solid;
-  box-shadow: 0px 0px 20px 0px #0000001c, 5px 5px 15px 5px rgb(0 0 0 e('/') 4%);
+  box-shadow: @shadow-2;
   z-index: @bars-z-index;
 }
 
@@ -44,7 +41,6 @@ html, body {
   position: fixed;
   left: 0;
   user-select: none;
-  // .border-right;
 }
 
 .app-status-bar {
@@ -56,9 +52,6 @@ html, body {
   color: @text-color;
   z-index: @bars-z-index;
   padding-top: 5px;
-  // border-top-width: 1px;
-  // border-top-color: @border-color-split;
-  // border-top-style: solid;
 
   a {
     color: @text;