@@ -93,36 +93,55 @@ const getStyleContents = function (styleElements) {
9393 *
9494 * @returns Object
9595 */
96- const filterHtmlData = function ( htmlJson ) {
96+ const filterHtmlData = function ( htmlJson , nestedOrder = 1 ) {
9797 if ( htmlJson && Array . isArray ( htmlJson ) ) {
98- var _data = htmlJson . filter ( ( x ) => x . type == 'element' && x . tagName != 'style' ) ,
98+ var parentNode = htmlJson . filter ( ( x ) => ( x . type == 'element' || x . type == 'comment' ) && x . tagName != 'style' ) ,
9999 styleElements = htmlJson . filter ( ( x ) => x . tagName == 'style' ) ,
100100 styleList = [ ] ;
101101
102102 if ( styleElements && styleElements . length ) {
103103 styleList = getStyleContents ( styleElements ) ;
104104 }
105105
106- var elementList = _data . map ( ( node ) => {
106+ var elementList = parentNode . map ( ( node ) => {
107107 if ( Array . isArray ( node . children ) ) {
108- let children = filterHtmlData ( node . children ) ;
108+ var previousNodes = [ ] ;
109+
110+ // find available previous nodes
111+ for ( let i = 0 ; i < parentNode . length ; i ++ ) {
112+ if ( parentNode [ i ] == node ) {
113+ if ( parentNode [ i - 1 ] ) {
114+ previousNodes . push ( parentNode [ i - 1 ] ) ;
115+ }
116+
117+ if ( parentNode [ i - 2 ] ) {
118+ previousNodes . push ( parentNode [ i - 2 ] ) ;
119+ }
120+
121+ break ;
122+ }
123+ }
109124
110- // find text nodes and merge
111- node . text = children . filter ( ( x ) => x . type == 'text' ) . map ( ( x ) => {
112- return utils . cleanText ( x . content , true ) ;
113- } ) . filter ( ( x ) => x !== null ) . join ( ' ' ) ;
125+ // get parent comment text
126+ node . comment = previousNodes . filter ( ( x ) => x . type == 'comment' )
127+ . map ( ( x ) => utils . cleanText ( x . content , true ) )
128+ . filter ( ( x ) => x !== null )
129+ . reverse ( )
130+ . join ( ', ' ) ;
131+
132+ node . comment = node . comment ? node . comment : node . tagName ;
133+ node . order = nestedOrder ;
114134
115- // last cleanup
116- node . text = utils . cleanText ( node . text , true ) ;
135+ let children = filterHtmlData ( node . children , nestedOrder + 1 ) ;
117136
118- // get elements
137+ // get only html elements
119138 node . children = children . length ? children . filter ( ( x ) => x . type == 'element' ) : null ;
120139 }
121140
122- // get specific attributes
141+ // get only class and inline style attributes
123142 node . attributes = getAttributes ( node . attributes , [ 'class' , 'style' ] ) ;
124143
125- return node . attributes !== null || node . children !== null ? node : null ;
144+ return ( node . attributes !== null || node . children !== null ) ? node : null ;
126145 } ) ;
127146
128147 elementList = elementList . filter ( ( node ) => node !== null && node !== undefined ) ;
@@ -141,53 +160,48 @@ const filterHtmlData = function (htmlJson) {
141160 *
142161 * @returns string
143162 */
144- const getSassTree = function ( nodeTree , count = 0 ) {
163+ const getSassTree = function ( nodeTree , deepth = 0 ) {
145164 if ( nodeTree ) {
146- var _data = null ,
147- styleCount = 0 ;
165+ var styleCount = 0 ;
148166
149- if ( Array . isArray ( nodeTree ) ) {
150- _data = nodeTree ;
151- } else if ( Array . isArray ( nodeTree . children ) ) {
152- _data = nodeTree . children ;
167+ if ( ! Array . isArray ( nodeTree ) ) {
168+ nodeTree = nodeTree . children ;
153169 }
154170
155- return _data . map ( ( node ) => {
156- let block = '' ,
157- blocks = '' ;
171+ return nodeTree . map ( ( node ) => {
172+ let treeSTring = '' ,
173+ subTreeSTring = '' ;
158174
159175 if ( node . attributes === null && node . children === null ) {
160176 return '' ;
161177 }
162178
163179 if ( Array . isArray ( node . children ) && node . children . length ) {
164- ++ count ;
180+ ++ deepth ;
165181
166- blocks = getSassTree ( node , count ) ;
182+ subTreeSTring = getSassTree ( node , deepth ) ;
167183 }
168184
169185 if ( node . tagName == 'style' && node . attributes ) {
170186 styleCount += 1 ;
171187
172- var result = `// #region STYLE #${ styleCount } ;
173-
188+ let result = `// #region STYLE #${ styleCount } ;
174189 result += `\n${ node . attributes . style } ;
175190 result += '// #endregion\n\n' ;
176191
177192 return result ;
178193 } else {
179194 if ( node . attributes ) {
180- block += node . attributes . class ? `@apply ${ node . attributes . class } : '' ;
195+ treeSTring += node . attributes . class ? `@apply ${ node . attributes . class } : '' ;
181196
182197 node . attributes . style = utils . addMissingSuffix ( node . attributes . style , ';' ) ;
183- block += node . attributes . style ? `\n${ node . attributes . style } : '' ;
198+ treeSTring += node . attributes . style ? `\n${ node . attributes . style } : '' ;
184199 }
185200
186- if ( block . length || blocks . length ) {
187- let result = `/* ${ node . tagName } ${ node . text ? node . text : 'NOTEXT' } ;
188-
189- result += `.any-${ count } ${ node . tagName } ;
190- result += `{${ block } ${ node . children ? node . children . length : '-' } ${ blocks } ;
201+ if ( treeSTring . length || subTreeSTring . length ) {
202+ let result = `/* ${ node . comment } ${ node . order } ;
203+ result += `.class-${ deepth } ${ node . tagName } ;
204+ result += `{${ treeSTring } ${ subTreeSTring } ;
191205
192206 return result ;
193207 }
@@ -216,6 +230,7 @@ module.exports = {
216230 filteredHtmlData = filterHtmlData ( htmlJson ) ,
217231 sassTreeResult = getSassTree ( filteredHtmlData ) ;
218232
233+ // export with formatted output
219234 if ( options && options . formatOutput === true ) {
220235 var _formatterOptions = { } ;
221236
0 commit comments