@corespeed/webpack 0.1.0-beta.3 → 0.1.0-beta.4

package/dist/index.cjs

@@ -19,11 +19,11 @@ var isCI = require('is-ci');
 var prompts = require('@clack/prompts');
 var installPkg = require('@antfu/install-pkg');
 var castArray = require('foxts/cast-array');
+var path = require('node:path');
 var LightningCSS = require('lightningcss');
 var reactCompilerWebpack = require('react-compiler-webpack');
 var TerserWebpackPlugin = require('terser-webpack-plugin');
 var lightningcssLoader = require('lightningcss-loader');
-var path = require('node:path');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -37,9 +37,9 @@ var WebpackBarProgressPlugin__default = /*#__PURE__*/_interopDefault(WebpackBarP
 var MiniCssExtractPlugin__default = /*#__PURE__*/_interopDefault(MiniCssExtractPlugin);
 var TsconfigPathsPlugin__default = /*#__PURE__*/_interopDefault(TsconfigPathsPlugin);
 var isCI__default = /*#__PURE__*/_interopDefault(isCI);
+var path__default = /*#__PURE__*/_interopDefault(path);
 var LightningCSS__default = /*#__PURE__*/_interopDefault(LightningCSS);
 var TerserWebpackPlugin__default = /*#__PURE__*/_interopDefault(TerserWebpackPlugin);
-var path__default = /*#__PURE__*/_interopDefault(path);
 
 function getSupportedBrowsers(browserlists, dir, isDevelopment) {
     if (browserlists) {
@@ -291,6 +291,44 @@ const resolve = ({ cwd, lodashTreeShaking })=>async (config)=>{
                 config.resolve.fallback['lodash-es/fp'] = globalRequire.resolve('lodash/fp');
             }
         }
+        /**
+   * tailwind-merge optimization
+   *
+   * webpack do not repect the order in the `conditionNames` config
+   * instead, it prioritize the order in the `exports` field of package.json
+   *
+   * since tailwind-merge list its CommonJS export before ESM export, webpack will
+   * always piroritize CommonJS version.
+   *
+   * We can use alias to force webpack to use the ESM version
+   */ try {
+            const tailwindMergeDistDir = globalRequire.resolve('tailwind-merge');
+            config.resolve.alias ??= {};
+            if (!Array.isArray(config.resolve.alias)) {
+                config.resolve.alias['tailwind-merge'] = path__default.default.join(tailwindMergeDistDir, '../bundle-mjs.mjs');
+            }
+        } catch  {
+        // tailwind-merge does not exist, do nothing
+        }
+        /**
+   * use-sync-external-store/shim optimization
+   *
+   * React 18 and above has built-in support for useSyncExternalStore,
+   * no need to include shim
+   */ try {
+            const reactPackageJson = globalRequire('react/package.json');
+            const reactVersion = reactPackageJson.version;
+            const majorVersion = Number.parseInt(reactVersion.split('.')[0], 10);
+            if (majorVersion >= 18 || majorVersion === 0 // experimental versions
+            ) {
+                config.resolve.alias ??= {};
+                if (!Array.isArray(config.resolve.alias)) {
+                    config.resolve.alias['use-sync-external-store/shim'] = 'react';
+                }
+            }
+        } catch  {
+        // react does not exist, do nothing
+        }
         return config;
     };
 

package/dist/index.mjs

@@ -17,11 +17,11 @@ import isCI from 'is-ci';
 import { confirm } from '@clack/prompts';
 import { installPackage } from '@antfu/install-pkg';
 import { castArray } from 'foxts/cast-array';
+import path from 'node:path';
 import LightningCSS, { browserslistToTargets } from 'lightningcss';
 import { defineReactCompilerLoaderOption, reactCompilerLoader } from 'react-compiler-webpack';
 import TerserWebpackPlugin from 'terser-webpack-plugin';
 import { LightningCssMinifyPlugin } from 'lightningcss-loader';
-import path from 'node:path';
 
 function getSupportedBrowsers(browserlists, dir, isDevelopment) {
     if (browserlists) {
@@ -273,6 +273,44 @@ const resolve = ({ cwd, lodashTreeShaking })=>async (config)=>{
                 config.resolve.fallback['lodash-es/fp'] = globalRequire.resolve('lodash/fp');
             }
         }
+        /**
+   * tailwind-merge optimization
+   *
+   * webpack do not repect the order in the `conditionNames` config
+   * instead, it prioritize the order in the `exports` field of package.json
+   *
+   * since tailwind-merge list its CommonJS export before ESM export, webpack will
+   * always piroritize CommonJS version.
+   *
+   * We can use alias to force webpack to use the ESM version
+   */ try {
+            const tailwindMergeDistDir = globalRequire.resolve('tailwind-merge');
+            config.resolve.alias ??= {};
+            if (!Array.isArray(config.resolve.alias)) {
+                config.resolve.alias['tailwind-merge'] = path.join(tailwindMergeDistDir, '../bundle-mjs.mjs');
+            }
+        } catch  {
+        // tailwind-merge does not exist, do nothing
+        }
+        /**
+   * use-sync-external-store/shim optimization
+   *
+   * React 18 and above has built-in support for useSyncExternalStore,
+   * no need to include shim
+   */ try {
+            const reactPackageJson = globalRequire('react/package.json');
+            const reactVersion = reactPackageJson.version;
+            const majorVersion = Number.parseInt(reactVersion.split('.')[0], 10);
+            if (majorVersion >= 18 || majorVersion === 0 // experimental versions
+            ) {
+                config.resolve.alias ??= {};
+                if (!Array.isArray(config.resolve.alias)) {
+                    config.resolve.alias['use-sync-external-store/shim'] = 'react';
+                }
+            }
+        } catch  {
+        // react does not exist, do nothing
+        }
         return config;
     };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corespeed/webpack",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.4",
   "description": "The opinionated webpack configuration for CoreSpeed projects.",
   "repository": {
     "type": "git",