phug-php / phug

Phug - The Pug Template Engine for PHP
https://phug.selfbuild.fr
MIT License
63 stars 3 forks source link

Less filter doesn't work when placed under style[.] #38

Closed nodod closed 6 years ago

nodod commented 6 years ago

Hello,

I encountered an issue with the following code:

    style
        :less
          .row {
            color:#595959;
          }
          .addTask:hover {
            border: 0.01em solid #66cc99;
          }
          .list-group-item {
            background-color: transparent;
            position: relative;
            &:first-child { border-color: transparent; }
            label { width: 98%; }
          }
          .close-btn {
            font-size:0.5em;
            position: absolute;
            top: calc(50% - 5px);
          }

I expected to get:

<style>
  .row {
    color: #595959;
  }
  .addTask:hover {
    border: 0.01em solid #66cc99;
  }
  .list-group-item {
    background-color: transparent;
    position: relative;
  }
  .list-group-item:first-child {
    border-color: transparent;
  }
  .list-group-item label {
    width: 98%;
  }
  .close-btn {
    font-size: 0.5em;
    position: absolute;
    top: calc(45%);
  }
</style>

But I actually get:

<style>
  :less
  .row {
    color:#595959;
  }
  .addTask:hover {
    border: 0.01em solid #66cc99;
  }
  .list-group-item {
    background-color: transparent;
    position: relative;
    &:first-child { border-color: transparent; }
    label { width: 98%; }
  }
  .close-btn {
    font-size:0.5em;
    position: absolute;
    top: calc(50% - 5px);
  }
</style>

As you can see, the less filter doesn't work. It works if I remove the dot infront of the style. So style. does not work and style works.

Is there a reason why the filter doesn't work when a dot is placed infront of style tag.

Seems like a possible bug. I would really like to put a dot infront of style so that I could get css highlighting to work properly in sublime text :)

Thanks!

kylekatarnls commented 6 years ago

style. means the content is raw text (pugjs 2 works the same way). Your CSS highlighting plugin must be obsolete (pugjs 1 allowed this dot+filter for style or script, but it was an inconsistency with other tags). JetBrains Pug plugin works well and even highlight according to LESS syntax.

https://pugjs.org/language/filters.html

We will not change this. First because it's a breaking change, then because it will create a divergence with pugjs 2 (what we're trying to port as close as possible).

nodod commented 6 years ago

Thanks for clearing my confusion. 👍