fix(astro)!: disable injected reset styles by default (#2377)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Apr 9, 2023 · 11864ad · 11864ad
1 parent 8baeaf8
commit 11864ad
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 9 deletions.
diff --git a/docs/integrations/astro.md b/docs/integrations/astro.md
@@ -23,13 +23,14 @@ The UnoCSS integration for [Astro](https://astro.build/): `@unocss/astro`. Check
 
 ```ts
 // astro.config.ts
+import { defineConfig } from 'astro/config'
 import UnoCSS from 'unocss/astro'
 
-export default {
+export default defineConfig({
   integrations: [
     UnoCSS(),
   ],
-}
+})
 ```
 
 Create a `uno.config.ts` file:
@@ -43,6 +44,38 @@ export default defineConfig({
 })
 ```
 
+### Style Reset
+
+By default, [browser style reset](/guide/style-reset) will not be injected. To enable it, install the `@unocss/reset` package:
+
+::: code-group
+  ```bash [pnpm]
+  pnpm add -D @unocss/reset
+  ```
+  ```bash [yarn]
+  yarn add -D @unocss/reset
+  ```
+  ```bash [npm]
+  npm install -D @unocss/reset
+  ```
+:::
+
+And update your `astro.config.ts`:
+
+```ts
+// astro.config.ts
+import { defineConfig } from 'astro/config'
+import UnoCSS from 'unocss/astro'
+
+export default defineConfig({
+  integrations: [
+    UnoCSS({
+      injectReset: true // or a path to the reset file
+    }),
+  ],
+})
+```
+
 ### Usage without presets
 
 This plugin does not come with any default presets.

diff --git a/examples/astro-vue/astro.config.ts b/examples/astro-vue/astro.config.ts
@@ -5,6 +5,6 @@ import vue from '@astrojs/vue'
 export default defineConfig({
   integrations: [
     vue(),
-    UnoCSS(),
+    UnoCSS({ injectReset: true }),
   ],
 })
diff --git a/examples/astro-vue/package.json b/examples/astro-vue/package.json
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@astrojs/vue": "^2.1.0",
+    "@unocss/reset": "link:../../packages/reset",
     "astro": "^2.1.9",
     "unocss": "link:../../packages/unocss"
   }

diff --git a/examples/astro/astro.config.ts b/examples/astro/astro.config.ts
@@ -3,6 +3,6 @@ import UnoCSS from 'unocss/astro'
 
 export default defineConfig({
   integrations: [
-    UnoCSS(),
+    UnoCSS({ injectReset: true }),
   ],
 })
diff --git a/examples/astro/package.json b/examples/astro/package.json
@@ -9,6 +9,7 @@
     "astro": "astro"
   },
   "devDependencies": {
+    "@unocss/reset": "link:../../packages/reset",
     "astro": "^2.1.9",
     "unocss": "link:../../packages/unocss"
   }

diff --git a/packages/astro/src/index.ts b/packages/astro/src/index.ts
@@ -9,7 +9,7 @@ export interface AstroIntegrationConfig<Theme extends {} = {}> extends VitePlugi
   /**
    * Include reset styles
    * When passing `true`, `@unocss/reset/tailwind.css` will be used
-   * @default true
+   * @default false
    */
   injectReset?: string | boolean
 
@@ -32,7 +32,7 @@ export default function UnoCSSAstroIntegration<Theme extends {}>(
 ): AstroIntegration {
   const {
     injectEntry = true,
-    injectReset: includeReset = true,
+    injectReset = false,
     injectExtra = [],
   } = options
 
@@ -49,9 +49,9 @@ export default function UnoCSSAstroIntegration<Theme extends {}>(
         config.vite.plugins.push(...VitePlugin(options, defaults) as any)
 
         const injects: string[] = []
-        if (includeReset) {
-          const resetPath = typeof includeReset === 'string'
-            ? includeReset
+        if (injectReset) {
+          const resetPath = typeof injectReset === 'string'
+            ? injectReset
             : '@unocss/reset/tailwind.css'
           injects.push(`import "${resetPath}"`)
         }