From c090f02e8e2fd3fe6ffc4c9f4dc280dc3b80e2df Mon Sep 17 00:00:00 2001
From: Jonas Rosado <jonaswebdev@gmail.com>
Date: Tue, 14 Mar 2023 14:57:51 -0300
Subject: [PATCH] Vite usage included on README

---
 README.md | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/README.md b/README.md
index 4c43f34..1ec8a6b 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,7 @@
 - [Install](#install)
 - [Usage with PostCSS](#usage-with-postcss)
 - [Usage with Webpack](#usage-with-webpack)
+- [Usage with Vite](#usage-with-vite)
 - [Options](#options)
 - [Maintainer](#maintainer)
 - [Contribute](#contribute)
@@ -127,6 +128,50 @@ module: {
 }
 ```
 
+
+## Usage with Vite
+
+Following the same way of Webpack but for Vite:
+
+```js
+import prefixer from 'postcss-prefix-selector';
+import autoprefixer from 'autoprefixer';
+
+...
+
+export default defineConfig({
+...
+  css: {
+    postcss: {
+      plugins: [
+        prefixer({
+          prefix: '.my-prefix',
+          transform(prefix, selector, prefixedSelector, filePath, rule) {
+            if (selector.match(/^(html|body)/)) {
+              return selector.replace(/^([^\s]*)/, `$1 ${prefix}`);
+            }
+
+            if (filePath.match(/node_modules/)) {
+              return selector; // Do not prefix styles imported from node_modules
+            }
+
+            const annotation = rule.prev();
+            if (annotation?.type === 'comment' && annotation.text.trim() === 'no-prefix') {
+              return selector; // Do not prefix style rules that are preceded by: /* no-prefix */
+            }
+
+            return prefixedSelector;
+          },
+        }),
+
+        autoprefixer({}) // add options if needed
+      ],
+    }
+  },
+...
+});  
+```
+
 ## Options
 
 | Name | Type | Description |