The processing of new lines has been improved.

Now new lines are not placed where they are not expected.

Author: Ulyanov-programmer

cssToHtml.js

@@ -104,15 +104,21 @@ export class CssToHtml {
         newContent += '\n'
 
       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)
     }
     else {
       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)
     }
 
     if (this.format) {

elementOfHtml.js

@@ -77,17 +77,24 @@ export class ElementOfHtml {
     this.#string += this.textBefore ? `${this.textBefore}` : ''
   }
   #addTextAfter() {
-    this.#string += this.textAfter ? `${this.textAfter}\n` : '\n'
+    this.#string += this.textAfter ? `${this.textAfter}` : ''
   }
   #addText() {
     this.#string += this.text ? `${this.text}` : ''
   }
   #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.textAfter) {
+        this.#string += '\n'
+      }
     }
   }
   #createEndString() {
@@ -155,15 +162,16 @@ export class ElementOfHtml {
   #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.comment = commentWithText.comment.slice(1, -1)
+    commentWithText = commentWithText.slice(1, -1)
 
-    let textBefore = commentWithText.comment.match(/^.*(?={{)/s)?.at(0)
-    let text = commentWithText.comment.match(/(?<={{).*?(?=}}|$)/s)?.at(0)
-    let textAfter = commentWithText.comment.match(/(?<=}}).*$/s)?.at(0)
+    let textBefore = commentWithText.match(/^.*(?={{)/s)?.at(0)
+    let text = commentWithText.match(/(?<={{).*?(?=}}|$)/s)?.at(0)
+    let textAfter = commentWithText.match(/(?<=}}).*$/s)?.at(0)
 
     this.textBefore = textBefore
     this.text = text

tests/IO.test.js

@@ -9,19 +9,21 @@ const htmlFilePath = path.resolve(import.meta.dirname + '/helpers/test.html')
 const cssFilePath = path.resolve(import.meta.dirname + '/helpers/test.css')
 
 test('Writing code to a file should work.', () => {
+  fs.writeFileSync(htmlFilePath, '')
+
   new CssToHtml({
     css: `div {}`,
     write: { in: htmlFilePath }
   })
 
-  assert.equal(fs.readFileSync(htmlFilePath, 'utf8'), '<div></div>\n')
+  assert.equal(fs.readFileSync(htmlFilePath, 'utf8'), '<div></div>')
 })
 
 test('The code must be written after certain content.', () => {
   fs.writeFileSync(htmlFilePath,
     `<some-html-content>
-  </some-html-content>
-`)
+  </some-html-content>`)
+
   new CssToHtml({
     css: `div {}`,
     write: {
@@ -40,8 +42,7 @@ test('The code must be written after certain content.', () => {
 test('The code must be written before and after certain content.', () => {
   fs.writeFileSync(htmlFilePath,
     `<some-html-content>
-  </some-html-content>
-`)
+  </some-html-content>`)
   new CssToHtml({
     css: `div {}`,
     write: {
@@ -54,8 +55,7 @@ test('The code must be written before and after certain content.', () => {
   assert.equal(fs.readFileSync(htmlFilePath, 'utf8'),
     `<some-html-content>
   <div></div>
-</some-html-content>
-`)
+</some-html-content>`)
 })
 
 test('Empty CSS should not be processed.', () => {
@@ -80,8 +80,7 @@ test('The code from the CSS file must be processed.', () => {
 
     `<div>
   <span>text</span>
-</div>
-`)
+</div>`)
 })
 
 

tests/attrs.test.js

@@ -9,7 +9,7 @@ test('Attributes in the selector must be processed.', () => {
     })
       .outputHTML,
 
-    '<div attr-1 data-attr role="button"></div>\n',
+    '<div attr-1 data-attr role="button"></div>',
   )
 })
 test('Attributes in the rule must be processed.', () => {
@@ -25,6 +25,6 @@ div {
     })
       .outputHTML,
 
-    '<div href="#" role="button" data-attr="15" tabindex="0" data-v></div>\n',
+    '<div href="#" role="button" data-attr="15" tabindex="0" data-v></div>',
   )
 })

tests/general.test.js

@@ -14,8 +14,7 @@ test('The code must be converted.', () => {
   <span></span>
 </div>
 <custom-tag></custom-tag>
-<input />
-`,
+<input />`,
   )
 })
 test('With formatting turned off, the code should look ugly.', () => {
@@ -48,7 +47,7 @@ test('The selector must be fully processed.', () => {
     })
       .outputHTML,
 
-    '<div id="some-id" class="some-class class2" data-attr></div>\n',
+    '<div id="some-id" class="some-class class2" data-attr></div>',
   )
 })
 

tests/text.test.js

@@ -9,7 +9,7 @@ test('The text inside the tag must be processed', () => {
     })
       .outputHTML,
 
-    `<div>inner text</div>\n`
+    `<div>inner text</div>`
   )
 })
 test('The text before the tag must be processed', () => {
@@ -19,7 +19,7 @@ test('The text before the tag must be processed', () => {
     })
       .outputHTML,
 
-    `before text<div></div>\n`
+    `before text<div></div>`
   )
 })
 test('The text after the tag must be processed', () => {
@@ -29,7 +29,7 @@ test('The text after the tag must be processed', () => {
     })
       .outputHTML,
 
-    `<div></div>after text\n`
+    `<div></div>after text`
   )
 })
 test('The text without additional spaces should be saved without spaces.', () => {
@@ -39,46 +39,56 @@ test('The text without additional spaces should be saved without spaces.', () =>
     })
       .outputHTML,
 
-    `before text<div>inner text</div>after text\n`
+    `before text<div>inner text</div>after text`
   )
 })
 test('The text with additional spaces should keep them.', () => {
-  assert.match(
+  assert.equal(
     new CssToHtml({
       css:
-        `div { /*  before text  {{  inner text }}  after text  */ }`,
+        `div { 
+          /*  before text  {{ inner text }}  after text  */ 
+        }
+        div span {
+          /* 
+            before span  {{ inner 
+            span }}  after span 
+          */
+        }`,
     })
       .outputHTML,
 
-    / +before text +<div> +inner text +<\/div> +after text[\n]/,
+    ` before text <div> inner text
+  before span <span> inner
+    span </span> after span
+</div> after text`,
   )
 })
+
 test('The text should be processed along with the new lines.', () => {
   assert.equal(
     new CssToHtml({
       css: `
-div { /* 
-    before 1
-    before 2
+div { /*
+  before 1
+  before 2
   {{
     inner 1
     inner 2
     inner 3
   }}after 1
-    after 2 
+    after 2
 */ }`,
     })
       .outputHTML,
 
-    `
-before 1
+    ` before 1
 before 2
 <div>
   inner 1
   inner 2
   inner 3
 </div>after 1
-after 2
-`,
+after 2`,
   )
-})
+})