Add ES5 bundle

.github/workflows/codeql-analysis.yml

@@ -16,15 +16,18 @@ jobs:
             security-events: write
 
         steps:
-            - name: Checkout repository
-              uses: actions/checkout@v3
+            - uses: actions/checkout@v3
+            - name: Use Node.js 18
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18.17.1
             - name: Use node_modules cache
               uses: actions/cache@v3
               with:
                   path: node_modules
-                  key: yarn-node-16-lock-${{ hashFiles('yarn.lock') }}
+                  key: yarn-node-18-lock-${{ hashFiles('yarn.lock') }}
                   restore-keys: |
-                      yarn-node-16-lock-
+                      yarn-node-18-lock-
             - name: Initialize CodeQL
               uses: github/codeql-action/init@v2
               with:

.github/workflows/npm-publish-dev.yml

@@ -11,19 +11,19 @@ jobs:
             id-token: write
         steps:
             - uses: actions/checkout@v3
-            - name: Use Node.js 16
+            - name: Use Node.js 18
               uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 18.17.1
                   # More info: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages#publishing-packages-to-the-npm-registry
                   registry-url: 'https://registry.npmjs.org'
             - name: Use node_modules cache
               uses: actions/cache@v3
               with:
                   path: node_modules
-                  key: yarn-node-16-lock-${{ hashFiles('yarn.lock') }}
+                  key: yarn-node-18-lock-${{ hashFiles('yarn.lock') }}
                   restore-keys: |
-                      yarn-node-16-lock-
+                      yarn-node-18-lock-
             - run: yarn install --frozen-lockfile
             - run: yarn build
             - uses: actions/upload-artifact@v3

.github/workflows/npm-publish.yml

@@ -11,17 +11,17 @@ jobs:
             id-token: write
         steps:
             - uses: actions/checkout@v3
-            - name: Use Node.js 16
+            - name: Use Node.js 18
               uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 18.17.1
             - name: Use node_modules cache
               uses: actions/cache@v3
               with:
                   path: node_modules
-                  key: yarn-node-16-lock-${{ hashFiles('yarn.lock') }}
+                  key: yarn-node-18-lock-${{ hashFiles('yarn.lock') }}
                   restore-keys: |
-                      yarn-node-16-lock-
+                      yarn-node-18-lock-
             - run: yarn install --frozen-lockfile
             - run: yarn lint
             - run: yarn test --ci --coverage --maxWorkers=2

.github/workflows/size.yml

@@ -11,6 +11,19 @@ jobs:
             CI_JOB_NUMBER: 1
         steps:
             - uses: actions/checkout@v3
+            - name: Use Node.js 18
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18.17.1
+            - name: Use node_modules cache
+              uses: actions/cache@v3
+              with:
+                  path: node_modules
+                  key: yarn-node-18-lock-${{ hashFiles('yarn.lock') }}
+                  restore-keys: |
+                      yarn-node-18-lock-
+            - run: yarn install --frozen-lockfile
             - uses: andresz1/size-limit-action@v1
               with:
                   github_token: ${{ secrets.GITHUB_TOKEN }}
+                  skip_step: install

.github/workflows/test.yml

@@ -11,17 +11,17 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
-            - name: Use Node.js 16
+            - name: Use Node.js 18
               uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 18.17.1
             - name: Use node_modules cache
               uses: actions/cache@v3
               with:
                   path: node_modules
-                  key: yarn-node-16-lock-${{ hashFiles('yarn.lock') }}
+                  key: yarn-node-18-lock-${{ hashFiles('yarn.lock') }}
                   restore-keys: |
-                      yarn-node-16-lock-
+                      yarn-node-18-lock-
             - run: yarn install --frozen-lockfile
             - run: yarn lint
             - run: yarn test --ci --coverage --maxWorkers=2

.size-limit.json

@@ -1,10 +1,18 @@
 [
     {
-        "path": "dist/tailwind-merge.mjs",
+        "path": "dist/bundle-mjs.mjs",
         "limit": "10 KB"
     },
     {
-        "path": "dist/tailwind-merge.cjs.production.min.js",
+        "path": "dist/bundle-cjs.js",
         "limit": "10 KB"
+    },
+    {
+        "path": "dist/es5/bundle-mjs.mjs",
+        "limit": "20 KB"
+    },
+    {
+        "path": "dist/es5/bundle-cjs.js",
+        "limit": "20 KB"
     }
 ]

package.json

@@ -29,41 +29,62 @@
     ],
     "source": "src/index.ts",
     "exports": {
-        "types": "./dist/index.d.ts",
-        "require": "./dist/index.js",
-        "import": "./dist/tailwind-merge.mjs",
-        "default": "./dist/tailwind-merge.mjs"
+        ".": {
+            "types": "./dist/types.d.ts",
+            "require": "./dist/bundle-cjs.js",
+            "import": "./dist/bundle-mjs.mjs",
+            "default": "./dist/bundle-mjs.mjs"
+        },
+        "./es5": {
+            "types": "./dist/types.d.ts",
+            "require": "./dist/es5/bundle-cjs.js",
+            "import": "./dist/es5/bundle-mjs.mjs",
+            "default": "./dist/es5/bundle-mjs.mjs"
+        }
     },
-    "module": "dist/tailwind-merge.mjs",
-    "main": "dist/index.js",
-    "types": "./dist/index.d.ts",
+    "module": "./dist/bundle-mjs.mjs",
+    "main": "./dist/bundle-cjs.js",
+    "types": "./dist/types.d.ts",
     "repository": {
         "type": "git",
         "url": "https://github.com/dcastil/tailwind-merge.git"
     },
     "sideEffects": false,
     "scripts": {
-        "build": "dts build",
-        "test": "dts test",
-        "test:watch": "dts test --watch",
+        "build": "rollup --config scripts/rollup.config.mjs",
+        "test": "jest test --config scripts/jest.config.mjs --coverage",
+        "test:watch": "jest test --config scripts/jest.config.mjs --watch",
         "test:exports": "node scripts/test-built-package-exports.cjs && node scripts/test-built-package-exports.mjs",
         "lint": "eslint --max-warnings 0 '**'",
         "size": "size-limit",
         "preversion": "if [ -n \"$DANYS_MACHINE\" ]; then git checkout main && git pull; fi",
         "version": "zx scripts/update-readme.mjs",
         "postversion": "if [ -n \"$DANYS_MACHINE\" ]; then git push --follow-tags && open https://github.com/dcastil/tailwind-merge/releases; fi"
     },
+    "dependencies": {
+        "@babel/runtime": "^7.22.10"
+    },
     "devDependencies": {
+        "@babel/plugin-transform-runtime": "^7.22.10",
+        "@babel/preset-env": "^7.22.10",
+        "@rollup/plugin-babel": "^6.0.3",
+        "@rollup/plugin-node-resolve": "^15.2.0",
+        "@rollup/plugin-typescript": "^11.1.2",
         "@size-limit/preset-small-lib": "^8.2.6",
         "@types/jest": "^29.5.2",
         "@typescript-eslint/eslint-plugin": "^5.60.1",
         "@typescript-eslint/parser": "^5.60.1",
-        "dts-cli": "^2.0.3",
+        "babel-plugin-annotate-pure-calls": "^0.4.0",
+        "babel-plugin-polyfill-regenerator": "^0.5.2",
         "eslint": "^8.44.0",
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-jest": "^27.2.2",
         "globby": "^11.1.0",
+        "jest": "^29.6.2",
         "prettier": "^2.8.8",
+        "rollup": "^3.28.0",
+        "rollup-plugin-delete": "^2.0.0",
+        "rollup-plugin-dts": "^6.0.0",
         "size-limit": "^8.2.6",
         "ts-jest": "^29.1.1",
         "typescript": "^5.1.6",

scripts/jest.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+// eslint-disable-next-line import/no-default-export
+export default {
+    rootDir: '..',
+    preset: 'ts-jest',
+    testMatch: ['<rootDir>/@(src|tests)/**/?(*.)test.ts'],
+}

scripts/rollup.config.mjs

@@ -0,0 +1,128 @@
+// @ts-check
+
+import { getBabelOutputPlugin } from '@rollup/plugin-babel'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import typescript from '@rollup/plugin-typescript'
+import { defineConfig } from 'rollup'
+import del from 'rollup-plugin-delete'
+import { dts } from 'rollup-plugin-dts'
+
+import pkg from '../package.json' assert { type: 'json' }
+
+// eslint-disable-next-line import/no-default-export
+export default defineConfig([
+    // Default entry point
+    {
+        input: pkg.source,
+        output: [
+            getOutputConfig({
+                file: pkg.exports['.'].import,
+                format: 'esm',
+                targets: 'supports es5',
+                // To be enabled in https://github.com/dcastil/tailwind-merge/issues/126
+                // targets: '> 0.5%, last 2 versions, Firefox ESR, not dead, maintained node versions',
+            }),
+            getOutputConfig({
+                file: pkg.exports['.'].require,
+                format: 'cjs',
+                targets: 'supports es5',
+                // To be enabled in https://github.com/dcastil/tailwind-merge/issues/126
+                // targets: '> 0.5%, last 2 versions, Firefox ESR, not dead, maintained node versions',
+            }),
+        ],
+        external: /node_modules/,
+        plugins: [
+            del({ targets: 'dist/*' }),
+            nodeResolve(),
+            typescript({
+                compilerOptions: {
+                    noEmitOnError: true,
+                },
+            }),
+        ],
+    },
+
+    // es5 entry point
+    {
+        input: pkg.source,
+        output: [
+            getOutputConfig({
+                file: pkg.exports['./es5'].import,
+                format: 'esm',
+                targets: 'supports es5',
+            }),
+            getOutputConfig({
+                file: pkg.exports['./es5'].require,
+                format: 'cjs',
+                targets: 'supports es5',
+            }),
+        ],
+        external: /node_modules/,
+        plugins: [
+            nodeResolve(),
+            typescript({
+                compilerOptions: {
+                    noEmitOnError: true,
+                    // We don't want to emit declaration files more than once
+                    declaration: false,
+                    declarationMap: false,
+                },
+            }),
+        ],
+    },
+
+    // Type declarations of default and es5 entry points
+    {
+        input: 'dist/types/index.d.ts',
+        output: {
+            file: pkg.exports['.'].types,
+            format: 'esm',
+        },
+        plugins: [
+            dts(),
+            del({
+                targets: 'dist/types',
+                hook: 'buildEnd',
+                runOnce: true,
+            }),
+        ],
+    },
+])
+
+/**
+ *
+ * @param {{ file: string; format: 'esm' | 'cjs'; targets: string}} param0
+ * @returns
+ */
+function getOutputConfig({ file, format, targets }) {
+    /** @satisfies {import('rollup').OutputOptions} */
+    const config = {
+        file,
+        format,
+        sourcemap: true,
+        freeze: false,
+        generatedCode: 'es2015',
+        plugins: [
+            getBabelOutputPlugin({
+                presets: [
+                    [
+                        '@babel/preset-env',
+                        {
+                            loose: true,
+                            bugfixes: true,
+                            modules: false,
+                            targets,
+                        },
+                    ],
+                ],
+                plugins: [
+                    'babel-plugin-annotate-pure-calls',
+                    ['@babel/plugin-transform-runtime', { useESModules: format === 'esm' }],
+                    ['babel-plugin-polyfill-regenerator', { method: 'usage-pure' }],
+                ],
+            }),
+        ],
+    }
+
+    return config
+}

scripts/test-built-package-exports.mjs

@@ -1,7 +1,7 @@
 import assert from 'assert'
 
 // Not ideal, but there seems to be no way to point the import resolver to the package.json file if this isn't a npm package.
-import { twMerge } from '../dist/tailwind-merge.mjs'
+import { twMerge } from '../dist/bundle-mjs.mjs'
 
 assert(twMerge() === '')
 assert(

tsconfig.json

@@ -13,7 +13,7 @@
         // Emit
         "declaration": true,
         "noEmit": true,
-        "outDir": "dist",
+        "outDir": "dist/types",
         "sourceMap": true,
         // Interop Constraints
         "esModuleInterop": true,