Skip to content

Commit 5992d77

Browse files
rellivrelliv
committed
refactor: improve pretty html and sass output
1 parent 07a2fcc commit 5992d77

File tree

5 files changed

+47
-49
lines changed

5 files changed

+47
-49
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@egoistdeveloper/twcss-to-sass",
3-
"version": "2.1.4",
3+
"version": "2.1.5",
44
"description": "HTML template to SASS converter for TailwindCSS",
55
"main": "dist/cjs/index.js",
66
"module": "dist/esm/index.js",

‎src/interfaces/html-node.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface IHtmlNode {
1212
type: string
1313
tagName: string
1414
content: string
15-
comment: string
15+
comment: string | null
1616
order: number
1717
attributes: IHtmlNodeAttribute[] | null
1818
filterAttributes: IAttribute | null

‎src/twcss-to-sass.ts‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -136,31 +136,22 @@ function filterHtmlData(
136136

137137
parentNode.forEach((node: IHtmlNode) => {
138138
if (Array.isArray(node.children)) {
139-
const previousNodes = []
140-
141-
// find available previous nodes
139+
// find previous comment
142140
for (let i = 0; i < parentNode.length; i++) {
143141
if (parentNode[i] == node) {
144-
if (parentNode[i - 1]) {
145-
previousNodes.push(parentNode[i - 1])
146-
}
142+
const _node = parentNode[i - 1]
147143

148-
if (parentNode[i - 2]) {
149-
previousNodes.push(parentNode[i - 2])
144+
if (node) {
145+
node.comment =
146+
_node && _node.type == 'comment' && _node.content
147+
? Utils.cleanText(_node.content, true)
148+
: null
150149
}
151150

152151
break
153152
}
154153
}
155154

156-
// get parent comment text
157-
node.comment = previousNodes
158-
.filter((x) => x.type == 'comment')
159-
.map((x) => Utils.cleanText(x.content, true))
160-
.filter((x) => x !== null)
161-
.reverse()
162-
.join(', ')
163-
164155
node.order = nestedOrder
165156

166157
const children: IHtmlNode[] | null = filterHtmlData(
@@ -318,15 +309,15 @@ function getSassTree(nodeTree: IHtmlNode[] | IHtmlNode, deepth = 0) {
318309
*
319310
* @returns string
320311
*/
321-
function getHtmlTree(nodeTree: IHtmlNode[] | IHtmlNode, deepth = 0): string {
312+
function getHtmlTree(nodeTree: IHtmlNode[], deepth = 0): string {
322313
if (nodeTree) {
323314
if (!Array.isArray(nodeTree)) {
324-
nodeTree = nodeTree.children
315+
// nodeTree = nodeTree.children
325316
}
326317

327318
let htmlTree = ''
328319

329-
nodeTree.forEach(function (node: IHtmlNode) {
320+
nodeTree.forEach(function (node: IHtmlNode, index) {
330321
if (node.type == 'element') {
331322
const className = getClassName(node, deepth)
332323

@@ -375,10 +366,21 @@ function getHtmlTree(nodeTree: IHtmlNode[] | IHtmlNode, deepth = 0): string {
375366

376367
// sub tree
377368
if (hasSubElement) {
378-
htmlTree += getHtmlTree(node, deepth + 1)
369+
htmlTree += getHtmlTree(node.children, deepth + 1)
370+
}
371+
372+
// prevent new line for siblings
373+
let isNextNodeSibling = false
374+
375+
if (!hasSubElement && nodeTree[index + 1]) {
376+
isNextNodeSibling =
377+
nodeTree[index + 1].tagName === node.tagName &&
378+
nodeTree[index + 1].comment === null
379379
}
380380

381-
htmlTree += (!isVoidElement ? `</${node.tagName}>` : '') + '\n'
381+
htmlTree +=
382+
(!isVoidElement ? `</${node.tagName}>` : '') +
383+
(!isNextNodeSibling ? '\n' : '')
382384
}
383385
})
384386

‎test/twcss-to-html.test.ts‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ test('convert to sass for html', () => {
1111
</div>
1212
<!-- Container End-->`
1313

14-
const htmlOutput = `<!-- Container Start, Container Any -->
15-
<div class="container-start-container-any">
14+
const htmlOutput = `<!-- Container Any -->
15+
<div class="container-any">
1616
<!-- Some Div -->
1717
<div class="some-div">
1818
...
@@ -32,38 +32,36 @@ test('convert to sass for html', () => {
3232
test('convert to sass for html with void elements', () => {
3333
const htmlCotnent = `<html lang="en">
3434
35-
<head>
36-
<meta charset="UTF-8">
37-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
38-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
35+
<head>
36+
<meta charset="UTF-8">
37+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
38+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3939
40-
<title>Document</title>
40+
<title>Document</title>
4141
42-
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/6.5.95/css/materialdesignicons.min.css" />
42+
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/6.5.95/css/materialdesignicons.min.css" />
4343
44-
<base href="/public">
45-
</head>
44+
<base href="/public">
45+
</head>
4646
47-
<body>
48-
<h1 class="ml-1">Test Title</h1>
49-
<br>
50-
<br>
51-
<br>
47+
<body>
48+
<h1 class="ml-1">Test Title</h1>
49+
<br>
50+
<br>
51+
<br>
5252
53-
<hr />
53+
<hr />
5454
55-
<input value="Say My Name">
56-
</body>
55+
<input value="Say My Name">
56+
</body>
5757
58-
</html>`
58+
</html>`
5959

6060
const htmlOutput = `<html lang="en">
6161
6262
<head>
6363
<meta charset="UTF-8" />
64-
6564
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66-
6765
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6866
6967
<title>
@@ -81,9 +79,7 @@ test('convert to sass for html with void elements', () => {
8179
</h1>
8280
8381
<br />
84-
8582
<br />
86-
8783
<br />
8884
8985
<hr />

‎test/twcss-to-sass.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ test('convert to sass with comments', () => {
4242
</div>
4343
<!-- Container End-->`
4444

45-
const sassOutput = `/* Container Start, Container Any -> 1 */
45+
const sassOutput = `/* Container Any -> 1 */
4646
.class-div-1 {
4747
@apply bg-white;
4848
@@ -72,8 +72,8 @@ test('convert to sass with comments class names', () => {
7272
</div>
7373
<!-- Container End-->`
7474

75-
const sassOutput = `/* Container Start, Container Any -> 1 */
76-
.pre_container_start_container_any_suf {
75+
const sassOutput = `/* Container Any -> 1 */
76+
.pre_container_any_suf {
7777
@apply bg-white;
7878
7979
/* Some Div -> 2 */

0 commit comments

Comments
 (0)