From 69cee48875b88495e219244a0fe152779fe67a02 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 3 Oct 2022 20:21:02 -0700
Subject: [PATCH] docs: add note on using `optimizeImports` with
 `svelte-preprocess`

Closes #1500
---
 README.md | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 562c7660..d601dbd5 100644
--- a/README.md
+++ b/README.md
@@ -200,7 +200,7 @@ The preprocessor optimizes imports from the following packages:
 - [carbon-icons-svelte](https://github.com/carbon-design-system/carbon-icons-svelte)
 - [carbon-pictograms-svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)
 
-**Example**
+**Before & After**
 
 ```diff
 - import { Button } from "carbon-components-svelte";
@@ -222,6 +222,21 @@ export default {
 };
 ```
 
+`svelte-preprocess` should be invoked before any preprocessor from `carbon-preprocess-svelte`.
+
+```diff
+// svelte.config.js
++ import sveltePreprocess from "svelte-preprocess";
+import { optimizeImports } from "carbon-preprocess-svelte";
+
+export default {
+  preprocess: [
++   sveltePreprocess(),
+    optimizeImports()
+  ],
+};
+```
+
 ## Examples
 
 - [examples/rollup](examples/rollup/)