@machtwatch/react-script 1.2.11-alpha.23 → 1.2.11-alpha.25

package/bin/react-script.js

@@ -106,7 +106,7 @@ switch (script) {
       delete require.cache[__filename];
 
       // eslint-disable-next-line global-require, import/no-dynamic-require
-      const module = require(path.resolve(`${__dirname  }/../scripts/${  script}`));
+      const module = require(path.resolve(`${__dirname}/../scripts/${script}`));
 
       run(module).catch((err) => {
         console.error(err.stack);
@@ -155,6 +155,6 @@ switch (script) {
   }
 
   default:
-    console.log(`Unknown script "${  script  }".`);
+    console.log(`Unknown script "${script}".`);
     break;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machtwatch/react-script",
-  "version": "1.2.11-alpha.23",
+  "version": "1.2.11-alpha.25",
   "description": "Machtwatch React script",
   "author": "Danny Reza Miloen <danny@machtwatch.co.id>",
   "contributors": [],
@@ -55,7 +55,7 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "assets-webpack-plugin": "7.1.1",
-    "autoprefixer": "^9.8.8",
+    "autoprefixer": "^10.4.20",
     "babel-jest": "^26.3.0",
     "babel-loader": "^8.2.5",
     "babel-plugin-add-module-exports": "^1.0.4",
@@ -64,9 +64,9 @@
     "browser-sync": "^2.26.7",
     "child_process": "^1.0.2",
     "compression-webpack-plugin": "^10.0.0",
-    "config": "^3.2.2",
+    "config": "^3.3.9",
     "core-js": "^3.23.3",
-    "css-loader": "^6.7.1",
+    "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^4.0.0",
     "deepmerge": "^4.3.1",
     "dotenv": "^5.0.1",
@@ -80,16 +80,16 @@
     "imagemin-webp-webpack-plugin": "^3.3.6",
     "intersection-observer": "^0.5.1",
     "jest": "^26.4.2",
-    "less": "^4.1.3",
-    "less-loader": "11.0.0",
+    "less": "^4.2.1",
+    "less-loader": "^12.2.0",
     "mini-css-extract-plugin": "^2.6.1",
     "mkdirp": "^0.5.1",
     "null-loader": "^4.0.1",
     "object-assign": "^4.1.1",
-    "postcss": "^8.4.14",
+    "postcss": "^8.5.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^14.1.0",
-    "postcss-loader": "^7.0.0",
+    "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^7.7.1",
     "promise": "^8.0.2",
     "purgecss-webpack-plugin": "^4.1.3",
@@ -101,7 +101,7 @@
     "serialize-javascript": "^6.0.0",
     "simple-progress-webpack-plugin": "^2.0.0",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "style-loader": "^3.3.1",
+    "style-loader": "^4.0.0",
     "stylelint": "^16.10.0",
     "stylelint-config-recommended-less": "^3.0.1",
     "stylelint-webpack-plugin": "^5.0.1",

package/scripts/webpack.config.js

@@ -3,7 +3,7 @@ const path = require('path');
 const glob = require('glob-all');
 const webpack = require('webpack');
 const nodeExternals = require('webpack-node-externals');
-const { BundleAnalyzerPlugin }  = require('webpack-bundle-analyzer');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const AssetsPlugin = require('assets-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -29,7 +29,7 @@ const visitedFrameworkPackages = new Set();
 
 const {
   argv,
-  env : {
+  env: {
     NODE_ENV,
     APPHOST,
     PUBLIC_PATH,
@@ -68,7 +68,7 @@ console.log(
     isAnalyze,
     config_compiler: config.compiler_public_path,
     compression: USE_STATIC_COMPRESSION,
-  }).reduce((a, [k, v]) =>  a += `${k}: ${v}\n`, '\n')
+  }).reduce((a, [k, v]) => a += `${k}: ${v}\n`, '\n')
 );
 
 //Generate SW Environment Config
@@ -86,7 +86,7 @@ class GenerateSWEnvPlugin {
           }
           `
         );
-        fs.writeFileSync(`${paths.appBuild  }/public/env.js`,
+        fs.writeFileSync(`${paths.appBuild}/public/env.js`,
           `
           var env = {
             FIREBASE_SENDER_ID: ${FIREBASE_SENDER_ID}
@@ -118,7 +118,7 @@ const addPackagePath = (packageName, relativeToPath) => {
     const directory = path.join(packageJsonPath, '../');
 
     // Returning from the function in case the directory has already been added and traversed
-    if (topLevelFrameworkPaths.includes(directory)) {return;}
+    if (topLevelFrameworkPaths.includes(directory)) { return; }
     topLevelFrameworkPaths.push(directory);
 
     const dependencies = require(packageJsonPath).dependencies || {};
@@ -136,13 +136,13 @@ for (const packageName of ['react', 'react-dom', 'react-router', 'scheduler', 'u
 }
 
 const isModuleCSS = module => (
-    // mini-css-extract-plugin
-    module.type === 'css/mini-extract' ||
-    // extract-css-chunks-webpack-plugin (old)
-    module.type === 'css/extract-chunks' ||
-    // extract-css-chunks-webpack-plugin (new)
-    module.type === 'css/extract-css-chunks'
-  );
+  // mini-css-extract-plugin
+  module.type === 'css/mini-extract' ||
+  // extract-css-chunks-webpack-plugin (old)
+  module.type === 'css/extract-chunks' ||
+  // extract-css-chunks-webpack-plugin (new)
+  module.type === 'css/extract-css-chunks'
+);
 
 //
 // Common configuration chunk to be used for both
@@ -279,7 +279,7 @@ const styleLoaders = ({ isClient }) => [
     options: {
       modules: {
         exportOnlyLocals: !isClient,
-        localIdentName:'[local]',
+        localIdentName: '[local]',
       },
       importLoaders: 2,
     },
@@ -324,7 +324,7 @@ const styleLoaders = ({ isClient }) => [
       lessOptions: {
         javascriptEnabled: true,
         paths: [
-          `${paths.appSrc}/styles` ,
+          `${paths.appSrc}/styles`,
           `${paths.appPath}/node_modules/@machtwatch/react-ui`,
         ],
       }
@@ -360,8 +360,8 @@ const clientConfig = {
 
             return resource
               ? topLevelFrameworkPaths.some((pkgPath) =>
-                  resource.startsWith(pkgPath)
-                )
+                resource.startsWith(pkgPath)
+              )
               : false;
           },
           priority: 40,
@@ -477,13 +477,70 @@ const clientConfig = {
     rules: [
       ...baseClientConfig.module.rules,
       {
-        test: /\.(css|less)$/,
+        test: /\.css$/,
         use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                exportOnlyLocals: false,
+                localIdentName: '[local]',
+              },
+              importLoaders: 1,
+            },
+          },
           {
-            loader: MiniCssExtractPlugin.loader,
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                ident: 'postcss',
+                config: false,
+                plugins: [
+                  [
+                    'postcss-import',
+                    {
+                      addModulesDirectories: [
+                        path.resolve(__dirname, '../node_modules'),
+                        `${paths.appPath}/node_modules`
+                      ],
+                      root: `${paths.appSrc}/styles/`
+                    }
+                  ],
+                  [
+                    'postcss-preset-env',
+                    {
+                      autoprefixer: { flexbox: 'no-2009' },
+                      stage: 3,
+                      browsers: pkg.browserslist,
+                    }
+                  ],
+                  'tailwindcss',
+                  'postcss-modules-values',
+                  'postcss-flexbugs-fixes',
+                ],
+              },
+            },
           },
-          ...(styleLoaders({ isClient: true }))
-        ]
+        ],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          ...styleLoaders({ isClient: true }).filter(
+            (loader) => loader.loader !== 'less-loader'
+          ),
+          {
+            loader: 'less-loader',
+            options: {
+              lessOptions: {
+                javascriptEnabled: true,
+                paths: [`${paths.appSrc}/styles`],
+              },
+            },
+          },
+        ],
       }
     ]
   },
@@ -659,18 +716,26 @@ const serverConfig = {
   },
   module: {
     ...baseServerConfig.module,
-    rules:[
+    rules: [
       ...baseServerConfig.module.rules,
       {
-        test: /\.(css|less)$/,
+        test: /\.css$/,
+        use: styleLoaders({ isClient: false }).filter(
+          (loader) => loader.loader !== 'less-loader'
+        ),
+      },
+      {
+        test: /\.less$/,
         use: styleLoaders({ isClient: false }),
       },
     ],
   },
   externalsPresets: { node: true },
   externals: [
+    nodeExternals({
+      allowlist: [/^driver\.js/],
+    }),
     /^\.\/assets\.json$/,
-    nodeExternals({ allowlist: /(@machtwatch\/react-ui|\.(css|less|scss|sss)$)/i })
   ],
   plugins: [
     ...baseServerConfig.plugins,