docs: update examples

twcomponents · Mar 11, 2022 · c6d8e1b · c6d8e1b
1 parent 02d58f3
commit c6d8e1b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -11,10 +11,15 @@
     <h1>Tailwind to SASS Converter Basic Example</h1>
 
     <h3>HTML Content</h3>
-    <pre id="html-content"></pre>
+    <pre id="input-html"></pre>
+
+    <hr>
+
+    <h3>HTML Output</h3>
+    <pre id="output-html"></pre>
 
     <h3>SASS Output</h3>
-    <pre id="sass-output"></pre>
+    <pre id="output-sass"></pre>
 
     <!-- local -->
     <script src="./../../dist/umd/index.js"></script>
@@ -40,8 +45,12 @@ <h3>SASS Output</h3>
 </div>
 <!-- Container End-->`
 
-      document.querySelector('#html-content').innerText = html
-      document.querySelector('#sass-output').innerHTML = convertToSass(html)
+      const converterResult = convertToSass(html);
+
+      document.querySelector('#input-html').innerText = html
+
+      document.querySelector('#output-html').innerText = converterResult.html
+      document.querySelector('#output-sass').innerText = converterResult.sass
     </script>
   </body>
 </html>
diff --git a/readme.md b/readme.md
@@ -47,6 +47,21 @@ npm i @egoistdeveloper/twcss-to-sass
 <!-- Container End-->
 ```
 
+**HTML Output**
+
+```xml
+<!-- Container Start, Container Any -->
+<div class="class-div-0">
+    <!-- Some Div -->
+    <div class="class-div-1">
+        <div class="class-div-2">
+            <!-- Inner Div -->
+            <div class="class-div-3"></div>
+        </div>
+    </div>
+</div>
+```
+
 **SASS Output**
 
 ```scss
@@ -99,7 +114,8 @@ npm i @egoistdeveloper/twcss-to-sass
             </div>
             <!-- Container End-->`;
 
-    console.log(convertToSass(html));
+    console.log(convertToSass(html).html);
+    console.log(convertToSass(html).sass);
 </script>
 ```
 
@@ -115,7 +131,8 @@ const htmlContent = fs.readFileSync(
   'UTF-8'
 )
 
-console.log(TwCssToSass.convertToSass(htmlContent));
+console.log(TwCssToSass.convertToSass(htmlContent).sass);
+console.log(TwCssToSass.convertToSass(htmlContent).html);
 
 ```
 
@@ -126,7 +143,8 @@ import { convertToSass } from '@egoistdeveloper/twcss-to-sass';
 
 const htmlContent = '<div class="w-72 h-40 bg-green-400 transform transition-all">My Text 1</div>';
 
-console.log(convertToSass(htmlContent));
+console.log(convertToSass(htmlContent).sass);
+console.log(convertToSass(htmlContent).html);
 
 ```