[improvement] Now can add attributes via --data.

Also now always puts attributes in double quotes (except for the --attrs variable).

Author: Ulyanov-programmer

README.md

@@ -119,14 +119,22 @@ Attributes can be set via a selector (_it can be useful for styling_), or you ca
 a[title='Title!'] {
   /* Specific attribute */
   --attr-href: './index.html';
+  --data-attribute: 'Value';
 
   /* And massively! */
   --attrs: 'target="_self" rel="noopener"';
 }
 ```
 
 ```html
-<a title="Title!" href="./index.html" target="_self" rel="noopener"> </a>
+<a
+  title="Title!"
+  data-attribute="Value"
+  href="./index.html"
+  target="_self"
+  rel="noopener"
+>
+</a>
 ```
 
 You can also add **text** to the tag via `--text` property:
@@ -148,15 +156,15 @@ div {
   --text: 'The text inside the div';
 }
 div span {
-  --text: 'The text inside span';
+  --text: ' The text inside span';
   --text-before: '| before';
-  --text-after: '| after';
+  --text-after: ' after';
 }
 ```
 
 ```html
 <div>
-  The text inside the div | before<span> The text inside span </span>| after
+  The text inside the div | before<span> The text inside span</span> after
 </div>
 ```
 
@@ -242,7 +250,7 @@ new CssToHtml({
 
 #### Formatting
 
-Before giving you html, it is formatted by the [prettier](https://github.com/prettier/prettier-synchronized) library.
+Before giving you html, it is formatted by the [html-format](https://www.npmjs.com/package/html-format) library.
 You can either enable or disable formatting:
 
 ```js

elementOfHtml.js

@@ -184,21 +184,17 @@ export class ElementOfHtml {
     }
   }
   #parseAttrVariable(declaration) {
-    let declName = declaration.property.split('-')[2]
-    let name, values
+    let [type, name, value] = this.#getDeclarationData(declaration)
 
-    switch (declName) {
+    switch (type) {
       case 'attr':
       case 'data':
-        // Deleting the "--attr-" in a variable
-        name = declaration.property.replace('--', '').replace('attr-', '')
-        values = declaration.value ? '=' + declaration.value : ''
-        return name + values
+        if (!value) { return name }
 
-      case 'attrs':
-        values = declaration.value.substring(1, declaration.value.length - 1)
+        return name + `="${value}"`
 
-        return values
+      case 'attrs':
+        return value
     }
   }
 
@@ -208,4 +204,28 @@ export class ElementOfHtml {
   #isInnerElement(element) {
     return element.parentSelector.startsWith(this.fullSelector)
   }
+  #getDeclarationData(declaration) {
+    let type = declaration.property.split('-')[2],
+      name, value
+
+    if (declaration.property.includes('--attr')) {
+      name = declaration.property.replace('--attr-', '')
+    }
+    else if (declaration.property.includes('--data')) {
+      name = declaration.property.replace('--', '')
+    }
+
+    // Removing nested quotes
+    if (
+      declaration.value[0] == '"' ||
+      declaration.value[0] == "'" ||
+      declaration.value[0] == '`'
+    ) {
+      value = declaration.value.substring(1, declaration.value.length - 1)
+    } else {
+      value = declaration.value
+    }
+
+    return [type, name, value]
+  }
 }