css2html - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

cssToHtml.js

@@ -107,5 +107,9 @@ import fs from 'fs-extra'
       for (let element of this.#elements) {
-        newContent += element.string
+        newContent += element.string + '\n'
       }
 
+      if (contentEndIndex == 0)
+        // Deleting an extra new line at the end
+        newContent = newContent.slice(0, -1)
+
       newContent += this.#html.substring(contentEndIndex)
@@ -115,4 +119,6 @@ }
       for (let element of this.#elements) {
-        newContent += element.string
+        newContent += element.string + '\n'
       }
+      // Deleting an extra new line at the end
+      newContent = newContent.slice(0, -1)
     }
@@ -119,0 +125,0 @@

elementOfHtml.js

@@ -59,2 +59,3 @@ import { createParser } from 'css-selector-parser'
     this.#setText(entryRule)
+    this.#setTextFromComment(entryRule)
     this.#setTag()
@@ -77,6 +78,6 @@ this.#setId()
   #addTextBefore() {
-    this.#string += this.textBefore ? ` ${this.textBefore}` : ''
+    this.#string += this.textBefore ? `${this.textBefore}` : ''
   }
   #addTextAfter() {
-    this.#string += this.textAfter ? `${this.textAfter}\n` : '\n'
+    this.#string += this.textAfter ? `${this.textAfter}` : ''
   }
@@ -87,7 +88,14 @@ #addText() {
   #addInnerElements() {
-    if (this.innerElements.length > 0) {
+    if (this.innerElements.length <= 0) return
+
+    if (!this.innerElements[0].textBefore) {
       this.#string += '\n'
     }
-    for (let innerElement of this.innerElements) {
+
+    for (let innerElement of this.innerElements ?? []) {
       this.#string += innerElement.string
+
+      if (!innerElement.string?.match(/\n *$/gm)) {
+        this.#string += '\n'
+      }
     }
@@ -141,2 +149,6 @@ }
     )?.value
+
+    if (!this.text) return
+
+    // Removing extra quotes
     this.textBefore = entryRule.declarations.find(
@@ -150,6 +162,33 @@ decl => decl.property == '--text-before'
     // Removing extra quotes
-    this.text = this?.text?.substring(1, this.text.length - 1)
-    this.textBefore = this?.textBefore?.substring(1, this.textBefore.length - 1)
-    this.textAfter = this?.textAfter?.substring(1, this.textAfter.length - 1)
+    this.text = this?.text?.slice(1, -1)
+    this.textBefore = this?.textBefore?.slice(1, -1)
+    this.textAfter = this?.textAfter?.slice(1, -1)
   }
+  #setTextFromComment(entryRule) {
+    let commentWithText = entryRule.declarations.find(decl =>
+      decl?.comment?.match(/{{.*}}/s)[0]
+    )?.comment
+
+    if (!commentWithText) return
+
+    // Removing spaces necessary for readability of a comment
+    commentWithText = commentWithText.slice(1, -1)
+
+    let text = [
+      // Get everything up to {{
+      commentWithText.match(/^.*(?={{)/s)?.at(0),
+      // Get everything in {{ }}
+      commentWithText.match(/(?<={{).*?(?=}}|$)/s)?.at(0),
+      // Get everything after }}
+      commentWithText.match(/(?<=}}).*$/s)?.at(0)
+    ]
+
+    for (let i = 0; i < text.length; i++) {
+      if (!text[i]?.trim()) {
+        text[i] = ''
+      }
+    }
+
+    [this.textBefore, this.text, this.textAfter] = text
+  }
   #setParentAndSelfSelector(fullSelector) {
@@ -223,9 +262,5 @@ let partsOfSelector = fullSelector.split(' ')
 
-    // Removing nested quotes
-    if (
-      declaration.value[0] == '"' ||
-      declaration.value[0] == "'" ||
-      declaration.value[0] == '`'
-    ) {
-      value = declaration.value.substring(1, declaration.value.length - 1)
+    if (/(")|(')|(`)/.test(declaration.value[0])) {
+      // Removing nested quotes
+      value = declaration.value.slice(1, -1)
     } else {
@@ -232,0 +267,0 @@ value = declaration.value

package.json

 {
   "name": "css2html",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Ulyanov Ivan",
   "description": "The library for converting CSS to HTML",
   "main": "index.js",
-  "scripts": {},
+  "scripts": {
+    "test": "node --test --watch",
+    "test-only": "node --test --watch --test-only"
+  },
   "type": "module",
@@ -9,0 +12,0 @@ "repository": {

README.md

@@ -30,4 +30,5 @@ Special thanks to the author of the idea [akopyl](https://github.com/anatolykopyl).
 section#some-id {
-  --text: 'This is text!';
+  /* {{ This is text inside }} */
   --attr-title: 'Title';
+
   background: red;
@@ -37,8 +38,12 @@ color: aliceblue;
 section#some-id header[data-attribute='v'] {
-  --text: 'This is the header text';
+  /* {{ This is the header text }} */
+
   color: blue;
 }
 section#some-id span {
-  --text: 'Text of span';
-  --text-after: 'Text after';
+  /* 
+    {{ Text of span }} 
+    Text after 
+  */
+
   color: peru;
@@ -52,5 +57,6 @@ }
 <section id="some-id" title="Title">
-  This is text!
+  This is text inside
   <header data-attribute="v">This is the header text</header>
-  <span> Text of span </span>Text after
+  <span>Text of span</span>
+  Text after
 </section>
@@ -143,33 +149,29 @@ ```
 
-You can also add **text** to the tag via `--text` property:
+You can add text inside the tag using **comments** or **variables**:
 
 ```css
+/* The old way is not recommended for use */
 div {
-  --text: 'The battle continues again';
+  --text-before: 'The battle ';
+  --text: 'continues';
+  --text-after: ' again';
 }
+/* New way, recommended for use. Curly braces are required! */
+section {
+  /* 
+    The battle
+    {{ continues }}
+    again
+  */
+}
 ```
 
 ```html
-<div>The battle continues again</div>
-```
+The battle <div>continues</div> again
 
-In order to insert a tag _between the text_, you will definitely need special properties that allow you to enter text before and after the tag: `--text-before` and `--text-after`
-
-```css
-div {
-  --text: 'The text inside the div';
-}
-div span {
-  --text: ' The text inside span';
-  --text-before: '| before';
-  --text-after: ' after';
-}
+The battle
+<section> continues </section>
+again
 ```
 
-```html
-<div>
-  The text inside the div | before<span> The text inside span</span> after
-</div>
-```
-
 ## API
@@ -176,0 +178,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17108

increased by8.15%

Number of package files

6

increased by20%

Lines of code

375

increased by11.94%

Number of lines in readme file

267

increased by0.75%

No dependency changes