docs: update README files

Author: felixicaza

README.md

@@ -12,7 +12,7 @@ This repository currently includes the following packages:
 
 - **[pxtorem](packages/pxtorem)**: A plugin to convert pixel units to rem units in your CSS.
 
-Each package is located in the [`packages`](packages) directory and follows a consistent structure for ease of development and maintenance.
+Each plugin is located in the [`packages`](packages) directory to follow a consistent structure for ease development and maintenance.
 
 ## 🤝 Contributing
 

packages/pxtorem/README.md

@@ -2,32 +2,69 @@
 
 The `lightningcss-plugin-pxtorem` plugin is designed to convert pixel units to rem units in your CSS, making it easier to maintain responsive and scalable designs.
 
-> [!NOTE]
-> WIP - This plugin is still a work in progress.
-
 ## ✨ Features
 
 - ✅ Converts pixel units to rem units.
 - ✅ Helps maintain responsive and scalable designs.
-- ✅ Customizable options for root value, precision, properties, and more.
+- ✅ Works seamlessly with LightningCSS and Vite ecosystem.
+- ✅ Customizable options.
 
 ## ⬇️ Installation
 
-You can install the `lightningcss-plugin-pxtorem` plugin using npm or yarn:
+You can install the `lightningcss-plugin-pxtorem` plugin using your preferred package manager:
 
+NPM:
 ```sh
 npm install lightningcss-plugin-pxtorem
 ```
 
-or
-
+PNPM:
 ```sh
 pnpm add lightningcss-plugin-pxtorem
 ```
 
+Yarn:
+```sh
+yarn add lightningcss-plugin-pxtorem
+```
+
+Bun:
+```sh
+bun add lightningcss-plugin-pxtorem
+```
+
+## ⚙️ Options
+
+The plugin accepts the following options:
+
+- `rootValue` (default: `16`): The root font size to use for the conversion. This is typically set to `16px`, which is the default font size in most browsers.
+- `unitPrecision` (default: `4`): The number of decimal places to use for the converted values.
+
 ## 🚀 Usage
 
-To use the `lightningcss-plugin-pxtorem` you need to include it in your `vite.config.js` file:
+Using `lightningcss-plugin-pxtorem` plugin in your project.
+
+```js
+import { transform, composeVisitors } from 'lightningcss';
+import pxtorem from 'lightningcss-plugin-pxtorem';
+
+const result = transform({
+  filename: 'test.css',
+  minify: true,
+  code: Buffer.from(`
+    .foo {
+      padding: 20px 12px;
+    }
+  `),
+  visitor: composeVisitors([
+    pxtorem(),
+  ]),
+});
+
+console.log(res.code.toString()); // .foo { padding: 1.25rem 0.75rem; }
+```
+
+Using `lightningcss-plugin-pxtorem` in your `vite.config.js` file:
 
 ```js
 import { defineConfig } from "vite";
@@ -44,7 +81,63 @@ export default defineConfig({
 });
 ```
 
-This plugin also is compatible with others tools that use Vite.
+With custom options:
+
+```js
+import { defineConfig } from "vite";
+import { composeVisitors } from "lightningcss";
+import pxtorem from "lightningcss-plugin-pxtorem";
+
+export default defineConfig({
+  css: {
+    transformer: "lightningcss",
+    lightningcss: {
+      visitor: composeVisitors([
+        pxtorem({
+          rootValue: 18,
+          unitPrecision: 2,
+        }),
+      ]),
+    },
+  },
+});
+```
+
+This plugin is designed to work with [LightningCSS](https://lightningcss.dev/), a CSS processor that provides advanced features and optimizations. It's compatible with the Vite ecosystem like [UI Frameworks](https://patak.dev/vite/ecosystem.html) and [App Frameworks](https://patak.dev/vite/ecosystem.html#app-frameworks), allowing you to use it seamlessly in your projects.
+
+## 📜 Example
+
+With default options:
+
+```css
+/* input.css */
+body {
+  font-size: 16px;
+  padding: 20px;
+  margin: 10px;
+}
+
+h1 {
+  font-size: 32px;
+  line-height: 40px;
+}
+```
+
+```css
+/* output.css */
+body {
+  font-size: 1rem;
+  padding: 1.25rem;
+  margin: 0.625rem;
+}
+
+h1 {
+  font-size: 2rem;
+  line-height: 2.5rem;
+}
+```
+
+See others examples in the [test folder](./test/).
 
 ## 🤝 Contributing