feat!: move to ESM-only and fix package exports (#3380)

Co-authored-by: userquin <userquin@gmail.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com> Co-authored-by: Chris <1633711653@qq.com> Co-authored-by: Anthony Fu <github@antfu.me>
unocss · Apr 1, 2024 · 41bc87b · 41bc87b
1 parent a1069ce
commit 41bc87b
Show file tree

Hide file tree

Showing 93 changed files with 1,283 additions and 5,165 deletions.
diff --git a/docs/integrations/webpack.md b/docs/integrations/webpack.md
@@ -1,6 +1,7 @@
 ---
 title: UnoCSS Webpack Plugin
 description: The webpack plugin for UnoCSS (@unocss/webpack).
+outline: deep
 ---
 
 # Webpack Plugin
@@ -25,18 +26,54 @@ This plugin does not come with any default presets.
   ```
 :::
 
+From UnoCSS version `v0.59.0`, UnoCSS has been moved to ESM-only, you need to load your configuration via dynamic import:
+
+::: code-group
+```ts [webpack 5]
+// webpack.config.js
+module.exports = function () {
+  return import('@unocss/webpack').then(({ default: UnoCSS }) => ({
+    plugins: [
+      UnoCSS()
+    ],
+    optimization: {
+      realContentHash: true
+    }
+  }))
+}
+```
+
+```js [webpack 4]
+// webpack.config.js
+module.exports = function () {
+  return import('@unocss/webpack').then(({ default: UnoCSS }) => ({
+    plugins: [
+      UnoCSS()
+    ],
+    css: {
+      extract: {
+        filename: '[name].[hash:9].css'
+      },
+    },
+  }))
+}
+```
+:::
+
+If you're using older version of UnoCSS, you can use the following code:
+
 ::: code-group
 ```ts [webpack 5]
 // webpack.config.js
 const UnoCSS = require('@unocss/webpack').default
 
 module.exports = {
   plugins: [
-    UnoCSS(),
+    UnoCSS()
   ],
   optimization: {
-    realContentHash: true,
-  },
+    realContentHash: true
+  }
 }
 ```
 
@@ -46,13 +83,13 @@ const UnoCSS = require('@unocss/webpack').default
 
 module.exports = {
   plugins: [
-    UnoCSS(),
+    UnoCSS()
   ],
   css: {
     extract: {
-      filename: '[name].[hash:9].css',
-    },
-  },
+      filename: '[name].[hash:9].css'
+    }
+  }
 }
 ```
 :::
@@ -80,3 +117,141 @@ Add `uno.css` to your main entry:
 // main.ts
 import 'uno.css'
 ```
+
+## Frameworks
+
+### Vue + Vue CLI
+
+If you're using [Vue CLI](https://cli.vuejs.org/) with webpack 4/5 with UnoCSS `v0.59.0`, you need to use the latest [Vue CLI Service](https://cli.vuejs.org/guide/cli-service.html) `v5.0.8` to load your configuration with dynamic import:
+
+::: code-group
+```ts [webpack 5]
+// vue.config.js
+const process = require('node:process')
+
+module.exports = function () {
+  return import('@unocss/webpack').then(({ default: UnoCSS }) => ({
+    configureWebpack: {
+      devtool: 'inline-source-map',
+      plugins: [
+        UnoCSS()
+      ],
+      optimization: {
+        realContentHash: true
+      }
+    },
+    chainWebpack(config) {
+      config.module.rule('vue').uses.delete('cache-loader')
+      config.module.rule('tsx').uses.delete('cache-loader')
+      config.merge({
+        cache: false
+      })
+    },
+    css: {
+      extract: process.env.NODE_ENV === 'development'
+        ? {
+            filename: 'css/[name].css',
+            chunkFilename: 'css/[name].css'
+          }
+        : true
+    }
+  }))
+}
+```
+
+```ts [webpack 4]
+// vue.config.js
+const process = require('node:process')
+
+module.exports = function () {
+  return import('@unocss/webpack').then(({ default: UnoCSS }) => ({
+    configureWebpack: {
+      plugins: [
+        UnoCSS({})
+      ]
+    },
+    chainWebpack(config) {
+      config.module.rule('vue').uses.delete('cache-loader')
+      config.module.rule('tsx').uses.delete('cache-loader')
+      config.merge({
+        cache: false
+      })
+    },
+    css: {
+      extract: process.env.NODE_ENV === 'development'
+        ? {
+            filename: '[name].css',
+            chunkFilename: '[name].[hash:9].css'
+          }
+        : true
+    }
+  }))
+}
+```
+:::
+
+If using an older version of UnoCSS, you can use the following code:
+
+::: code-group
+```ts [webpack 5]
+// vue.config.js
+const process = require('node:process')
+const UnoCSS = require('@unocss/webpack').default
+
+module.exports = {
+  configureWebpack: {
+    devtool: 'inline-source-map',
+    plugins: [
+      UnoCSS()
+    ],
+    optimization: {
+      realContentHash: true
+    }
+  },
+  chainWebpack(config) {
+    config.module.rule('vue').uses.delete('cache-loader')
+    config.module.rule('tsx').uses.delete('cache-loader')
+    config.merge({
+      cache: false
+    })
+  },
+  css: {
+    extract: process.env.NODE_ENV === 'development'
+      ? {
+          filename: 'css/[name].css',
+          chunkFilename: 'css/[name].css'
+        }
+      : true
+  },
+}
+```
+
+```ts [webpack 4]
+// vue.config.js
+const process = require('node:process')
+const UnoCSS = require('@unocss/webpack').default
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      UnoCSS({}),
+    ]
+  },
+  chainWebpack(config) {
+    config.module.rule('vue').uses.delete('cache-loader')
+    config.module.rule('tsx').uses.delete('cache-loader')
+    config.merge({
+      cache: false,
+    })
+  },
+  css: {
+    extract: process.env.NODE_ENV === 'development'
+      ? {
+          filename: '[name].css',
+          chunkFilename: '[name].[hash:9].css',
+        }
+      : true,
+  },
+}
+```
+:::
diff --git a/examples/vue-cli4/package.json b/examples/vue-cli4/package.json
@@ -11,8 +11,8 @@
   },
   "devDependencies": {
     "@unocss/webpack": "link:../../packages/webpack",
-    "@vue/cli-plugin-babel": "~4.5.15",
-    "@vue/cli-service": "~4.5.15",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
     "cross-env": "^7.0.3",
     "unocss": "link:../../packages/unocss",
     "vue-template-compiler": "^2.7.16"

diff --git a/examples/vue-cli4/vue.config.js b/examples/vue-cli4/vue.config.js
@@ -1,26 +1,30 @@
 const process = require('node:process')
-const UnoCSS = require('@unocss/webpack').default
 
-module.exports = {
-  configureWebpack: {
-    plugins: [
-      UnoCSS({}),
-    ],
-  },
-  chainWebpack(config) {
-    config.module.rule('vue').uses.delete('cache-loader')
-    config.module.rule('tsx').uses.delete('cache-loader')
-    config.merge({
-      cache: false,
-    })
-  },
-  css: {
-    extract: process.env.NODE_ENV === 'development'
-      ? {
-          filename: '[name].css',
-        }
-      : {
-          filename: '[name].[hash:9].css',
-        },
-  },
+module.exports = function () {
+  return import('@unocss/webpack').then((m) => {
+    const UnoCSS = m.default
+    return {
+      configureWebpack: {
+        plugins: [
+          UnoCSS({}),
+        ],
+      },
+      chainWebpack(config) {
+        config.module.rule('vue').uses.delete('cache-loader')
+        config.module.rule('tsx').uses.delete('cache-loader')
+        config.merge({
+          cache: false,
+        })
+      },
+      css: {
+        extract: process.env.NODE_ENV === 'development'
+          ? {
+              filename: '[name].css',
+            }
+          : {
+              filename: '[name].[hash:9].css',
+            },
+      },
+    }
+  })
 }
diff --git a/examples/vue-cli5/vue.config.js b/examples/vue-cli5/vue.config.js
@@ -1,29 +1,33 @@
 const process = require('node:process')
-const UnoCSS = require('@unocss/webpack').default
 
-module.exports = {
-  configureWebpack: {
-    devtool: 'inline-source-map',
-    plugins: [
-      UnoCSS(),
-    ],
-    optimization: {
-      realContentHash: true,
-    },
-  },
-  chainWebpack(config) {
-    config.module.rule('vue').uses.delete('cache-loader')
-    config.module.rule('tsx').uses.delete('cache-loader')
-    config.merge({
-      cache: false,
-    })
-  },
-  css: {
-    extract: process.env.NODE_ENV === 'development'
-      ? {
-          filename: 'css/[name].css',
-          chunkFilename: 'css/[name].css',
-        }
-      : true,
-  },
+module.exports = function () {
+  return import('@unocss/webpack').then((m) => {
+    const UnoCSS = m.default
+    return {
+      configureWebpack: {
+        devtool: 'inline-source-map',
+        plugins: [
+          UnoCSS(),
+        ],
+        optimization: {
+          realContentHash: true,
+        },
+      },
+      chainWebpack(config) {
+        config.module.rule('vue').uses.delete('cache-loader')
+        config.module.rule('tsx').uses.delete('cache-loader')
+        config.merge({
+          cache: false,
+        })
+      },
+      css: {
+        extract: process.env.NODE_ENV === 'development'
+          ? {
+              filename: 'css/[name].css',
+              chunkFilename: 'css/[name].css',
+            }
+          : true,
+      },
+    }
+  })
 }
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "postinstall": "esno scripts/prepare.ts",
     "taze": "taze minor -wIr && pnpm -r --parallel run update-post",
     "bench": "npm -C bench run bench",
-    "build": "rimraf packages/*/dist --glob && esno scripts/copy-files.ts && pnpm -r --filter=./packages/* run build && pnpm -r run build-post",
+    "build": "rimraf packages/*/dist --glob && esno scripts/copy-files.ts && pnpm -r --filter=./packages/* run build && pnpm -r run build-post && esno scripts/postbuild.ts",
     "dev": "nr stub",
     "deploy": "nr build && npm -C docs run docs:build && npm -C playground run build && npm -C interactive run build",
     "interactive": "npm -C interactive run dev",

diff --git a/packages/astro/build.config.ts b/packages/astro/build.config.ts
@@ -9,7 +9,4 @@ export default defineBuildConfig({
   externals: [
     'astro',
   ],
-  rollup: {
-    emitCJS: true,
-  },
 })
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@unocss/astro",
+  "type": "module",
   "version": "0.58.9",
   "description": "UnoCSS integration for Astro",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
@@ -25,12 +26,11 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     }
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [

diff --git a/packages/autocomplete/build.config.ts b/packages/autocomplete/build.config.ts
@@ -10,7 +10,4 @@ export default defineBuildConfig({
     'pug',
     '@unocss/core',
   ],
-  rollup: {
-    emitCJS: true,
-  },
 })