update notes

packages/svelte-preprocess-unocss/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Patch Changes
 
+- fix: --at-apply works again
 - fix: include @unocss/preset-icons as dependency to make icons work
 - Updated dependencies
   - svelte-scoped-uno@0.0.3

packages/svelte-preprocess-unocss/README.md

@@ -55,4 +55,20 @@ export default defineConfig({
 })
 ```
 
-All exports from `unocss` are reexported from `svelte-preprocess-unocss` so there's no need to install `unocss`. This will avoid any breaking changes from unocss affecting your project.
+All exports from `unocss` are re-exported from `svelte-preprocess-unocss` so there's no need to install `unocss`. This will avoid any breaking changes from unocss affecting your project.
+
+## Known Issues
+
+Don't use `--at-apply` on classes that need global scoping like `dark:___` as the .dark selector will be placed outside the global selector. For example, this will NOT work:
+
+```css
+:global(.my-box) {
+  --at-apply: dark:bg-red-700;
+}
+```
+
+Instead just apply the class directly, like this:
+
+```html
+<div class="dark:bg-red-700"></div>
+```

packages/svelte-preprocess-unocss/src/fixtures/input/Button.svelte

@@ -13,9 +13,9 @@
 
 <style>
   button {
-    --at-apply: bg-red-100 hover:bg-red-200 p-3 rounded
+    --at-apply: bg-red-100 hover:bg-red-200 p-3 rounded;
   }
   :global(.classes-needing-global-context-must-use-global-to-avoid-being-stripped-out-by-consuming-library) {
-    --at-apply: dark:bg-red-700 dark:hover:bg-red-600
+    --at-apply: dark:bg-red-700 dark:hover:bg-red-600;
   }
 </style>