feat: unocss module (#1043)

Co-authored-by: Aaron <[email protected]>

.github/workflows/release.yml

@@ -13,6 +13,7 @@ on:
           - module-solid
           - module-svelte
           - module-vue
+          - unocss
           - wxt
 
 jobs:

docs/.vitepress/config.ts

@@ -11,6 +11,7 @@ import { meta, script } from './utils/head';
 import { version as wxtVersion } from '../../packages/wxt/package.json';
 import { version as i18nVersion } from '../../packages/i18n/package.json';
 import { version as autoIconsVersion } from '../../packages/auto-icons/package.json';
+import { version as unocssVersion } from '../../packages/unocss/package.json';
 
 const title = 'Next-gen Web Extension Framework';
 const titleSuffix = ' – WXT';
@@ -82,6 +83,7 @@ export default defineConfig({
           navItem(`wxt/storage — ${wxtVersion}`, '/storage'),
           navItem(`@wxt-dev/auto-icons — ${autoIconsVersion}`, '/auto-icons'),
           navItem(`@wxt-dev/i18n — ${i18nVersion}`, '/i18n'),
+          navItem(`@wxt-dev/unocss — ${unocssVersion}`, '/unocss'),
         ]),
       ]),
     ],

docs/unocss.md

@@ -0,0 +1 @@
+<!--@include: ../packages/unocss/README.md-->

packages/unocss/README.md

@@ -0,0 +1,47 @@
+# WXT UnoCSS
+
+Use UnoCSS in your WXT extension!
+
+## Usage
+
+Install the package:
+
+```sh
+npm i --save-dev @wxt-dev/unocss unocss
+pnpm i -D @wxt-dev/unocss unocss
+yarn add --dev @wxt-dev/unocss unocss
+bun i -D @wxt-dev/unocss unocss
+```
+
+Add the module to `wxt.config.ts`:
+
+```ts
+export default defineConfig({
+  modules: ['@wxt-dev/unocss'],
+});
+```
+
+Now in your entrypoint, import UnoCSS:
+
+```ts
+import 'uno.css';
+```
+
+> [!IMPORTANT]
+> While in dev mode, you may see a warning about `uno.css` not being found. This is because in development, we don't know which files should be injected with UnoCSS styles. The warning can be safely ignored as the styles will be properly applied during the build process.
+
+## Configuration
+
+The module can be configured via the `unocss` config:
+
+```ts
+export default defineConfig({
+  modules: ['@wxt-dev/unocss'],
+  unocss: {
+    // Will only apply unocss for popup/main.ts
+    entrypoints: ['popup/main.ts'],
+  },
+});
+```
+
+Options have JSDocs available in your editor, or you can read them in the source code: [`UnoCSSOptions`](./src/index.ts).

packages/unocss/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@wxt-dev/unocss",
+  "description": "UnoCSS integration for WXT",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wxt-dev/wxt.git",
+    "directory": "packages/unocss"
+  },
+  "homepage": "http://wxt.dev/guide/unocss.html",
+  "keywords": [
+    "wxt",
+    "module",
+    "unocss",
+    "css"
+  ],
+  "author": {
+    "name": "Florian Metz",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "type": "module",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "buildc -- unbuild",
+    "check": "buildc --deps-only -- check"
+  },
+  "peerDependencies": {
+    "unocss": ">=0.60.0",
+    "wxt": ">=0.19.0"
+  },
+  "devDependencies": {
+    "@aklinker1/check": "^1.4.5",
+    "oxlint": "^0.9.9",
+    "publint": "^0.2.11",
+    "typescript": "^5.6.2",
+    "unbuild": "^2.0.0",
+    "unocss": "^0.63.3",
+    "wxt": "workspace:*"
+  },
+  "dependencies": {
+    "defu": "^6.1.4",
+    "fast-glob": "^3.3.2"
+  }
+}

packages/unocss/src/index.ts

@@ -0,0 +1,68 @@
+import 'wxt';
+import { defineWxtModule } from 'wxt/modules';
+import defu from 'defu';
+import UnoCSS from 'unocss/vite';
+
+export default defineWxtModule<UnoCSSOptions>({
+  name: '@wxt-dev/unocss',
+  configKey: 'unocss',
+  async setup(wxt, options) {
+    const resolvedOptions = defu<Required<UnoCSSOptions>, UnoCSSOptions[]>(
+      options,
+      {
+        enabled: true,
+        excludeEntrypoints: ['background'],
+        configOrPath: undefined,
+      },
+    );
+
+    if (!resolvedOptions.enabled)
+      return wxt.logger.warn(`\`[unocss]\` ${this.name} disabled`);
+
+    const excludedEntrypoints = new Set(resolvedOptions.excludeEntrypoints);
+    if (wxt.config.debug) {
+      wxt.logger.debug(
+        `\`[unocss]\` Excluded entrypoints:`,
+        [...excludedEntrypoints].join(', '),
+      );
+    }
+
+    wxt.hooks.hook('vite:devServer:extendConfig', (config) => {
+      config.plugins?.push(UnoCSS());
+    });
+
+    wxt.hooks.hook('vite:build:extendConfig', async (entries, config) => {
+      if (entries.every((entry) => excludedEntrypoints.has(entry.name))) return;
+      config.plugins?.push(UnoCSS(resolvedOptions.configOrPath));
+    });
+  },
+});
+
+/**
+ * Options for the UnoCSS module
+ */
+export interface UnoCSSOptions<Theme extends object = object> {
+  /**
+   * Enable UnoCSS
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * List of entrypoint names that UnoCSS is not used in. By default, the UnoCSS
+   * vite plugin is added to all build steps, but this option is used to exclude
+   * it from specific builds.
+   * @example ["popup", "options"]
+   * @default []
+   */
+  excludeEntrypoints?: string[];
+  /**
+   * The path to your `unocss.config.ts` file, relative to <rootDir>, or inline configuration.
+   */
+  configOrPath?: Parameters<typeof UnoCSS<Theme>>[0];
+}
+
+declare module 'wxt' {
+  export interface InlineConfig {
+    unocss?: UnoCSSOptions;
+  }
+}

packages/unocss/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "exclude": ["node_modules/**", "dist/**"]
+}

packages/wxt-demo/package.json

@@ -26,8 +26,10 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@wxt-dev/auto-icons": "workspace:*",
+    "@wxt-dev/unocss": "workspace:*",
     "sass": "^1.79.4",
     "typescript": "^5.6.2",
+    "unocss": "^0.63.3",
     "vitest": "^2.1.2",
     "vitest-plugin-random-seed": "^1.1.0",
     "wxt": "workspace:*"

packages/wxt-demo/src/entrypoints/popup.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Popup</title>
-    <link rel="stylesheet" href="../common/style.css" />
+    <link rel="stylesheet" href="uno.css" />
   </head>
   <body>
     <p>Hello popup!</p>

packages/wxt-demo/src/entrypoints/ui.content/index.ts

@@ -1,4 +1,4 @@
-import '../../common/style.css';
+import 'uno.css';
 import './style.css';
 
 export default defineContentScript({
@@ -13,6 +13,7 @@ export default defineContentScript({
       anchor: 'form[role=search]',
       onMount: (container) => {
         const app = document.createElement('div');
+        app.classList.add('m-4', 'text-red-500');
         app.textContent = i18n.t('prompt_for_name');
         container.append(app);
       },

packages/wxt-demo/src/entrypoints/ui.content/style.css

@@ -1,11 +1,6 @@
 :root {
   color-scheme: dark;
-  color: indianred;
 }
 html {
   background-color: black;
 }
-
-div {
-  padding: 16px;
-}

packages/wxt-demo/src/modules/unocss.ts

@@ -0,0 +1 @@
+export { default } from '@wxt-dev/unocss';

packages/wxt-demo/wxt.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'wxt';
+import { presetUno } from 'unocss';
 
 export default defineConfig({
   srcDir: 'src',
@@ -27,4 +28,32 @@ export default defineConfig({
     // @ts-expect-error: c is not defined, this should error out
     c: 'c',
   },
+  unocss: {
+    excludeEntrypoints: [
+      'example',
+      'iframe-src',
+      'injected',
+      'example-tsx',
+      'example-2',
+      'iframe',
+      'location-change',
+      'main-world',
+      'sandbox',
+      'sidepanel',
+      'unlisted',
+    ],
+    configOrPath: {
+      content: {
+        pipeline: {
+          include: [
+            // the default
+            /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+            // include js/ts files
+            'src/entrypoints/**/*.{js,ts}',
+          ],
+        },
+      },
+      presets: [presetUno()],
+    },
+  },
 });