afterwind-io / preprocessor-loader

Bring the awesome "Conditional Compilation" to the Webpack, and more.
MIT License
40 stars 12 forks source link

Verbose mode breaks in html files with css comments #37

Closed tech-meppem closed 1 year ago

tech-meppem commented 1 year ago

Using verbose mode in HTML files has unexpected problems, when using comments in a <style> block. If you have a css comment such as /* comment */, verbose mode switches to use that style of comment for the remainder of the "block" of commented out code.

For example: TEST = false

<!-- #!if TEST -->
<style>
  #div1 {
    display: flex;
    flex-direction: column;
    /* 1px because of reasons */
    margin-left: 1px;
  }
</style>
<div id="div1">
  hello world
</div>
<!-- #!endif -->

the output becomes:

<!-- #!if TEST -->
<!-- <style> -->
<!-- #div1 { -->
<!-- display: flex; -->
<!-- flex-direction: column; -->
/* 1px because of reasons */
/* margin-left: 1px; */
/* } */
/* </style> */
/* <div id="div1"> */
/* hello world */
/* </div> */
<!-- #!endif -->

Which aren't html comments, and as such, the "div1" div is still rendered, although without the styling.

Putting a comment like:

</style>
<!-- fix comments -->
<div id="div1">

does sort of fix it, but it's not a great solution

Is there a feature that we can disable verbose mode for a block / for the singular file / for html files only?

tech-meppem commented 1 year ago

@afterwind-io I'm not sure if that fix you did works, based off of the test case you made. As if you did html like this:

<div>
<!-- #!if TEST -->
<style>
/* NOT ME */
</style>
<!-- #!endif -->
</div>

It would be converted to:

<div>
<!-- #!if TEST -->
<!-- <style> -->
/* NOT ME */
<!-- </style> -->
<!-- #!endif -->
</div>

which means the /* NOT ME */ is left as just html text, and would be included in the web page.

I don't know if I am correct in that assumption, as I haven't tested the changes yet, but it seems like that's what will happen based on the test case added in the commit.

afterwind-io commented 1 year ago

@tech-meppem Thanks for the reminder. I forgot to commit my test case. With the latter https://github.com/afterwind-io/preprocessor-loader/commit/f69b10df08e72ff66010a8d312ba78dde6e8923f patch, it should be converted to:

<div>
<!-- #!if TEST -->
<!-- <style> -->
<!-- /* NOT ME */-->
<!-- </style> -->
<!-- #!endif -->
</div>

Those normal comments will be wrapped in another redundant comment, just like what editors do, to solve the problem without the context of language-shifting things.

afterwind-io commented 1 year ago

Fixed in 1.2.1

afterwind-io commented 1 year ago

@tech-meppem Sorry for the inconvenience, but the patch for your case breaks the verbose in another scenario (see #38). A new option in verbose setting has been provided in 1.3.0 to solve the problem. Please see the doc.