Broken indention for scss files

[GitRon]

Hi @JaapJoris

I have a scss file with multiple declarations beneith each other:

.icon-x-alarm:before { content: '\e800'; } /* '' */
.icon-x-align-center:before { content: '\e801'; } /* '' */
.icon-x-align-justify:before { content: '\e802'; } /* '' */
.icon-x-align-left:before { content: '\e803'; } /* '' */
.icon-x-align-right:before { content: '\e804'; } /* '' */
.icon-x-anchor:before { content: '\e805'; } /* '' */

What the linter does is this:

But that's the only bug I found so far 💪

Best from Cologne
Ronny

[JaapJoris]

Hi Ronny, and thank you for reporting this. This bug is actually worse than it seems: string detection in CSS mode is done "greedily", so that the following:

.icon1:before { content:'foo'} .icon2:before { content:'bar'}

incorrectly leads to the substring 'foo'} .icon2:before { content:'bar' being detected as an entire string (because it is technically the largest substring surrounded by quotes).

This was already fixed for DjJS mode, and I'll now also fix it for DjCSS mode and create a new release. Thanks again for noticing this so quickly!

[GitRon]

Thx for fixing it that quickly! When will you release the bugfix?

[GitRon]

It works 💪

[DmytroLitvinov]

I am using main branch in pre-commit and we are having also strangle indentation in scss files.

Initial scss code:

$line-height:           1.5 !default; // calculating line-height: round($font-size * 1.5)
$line-space:            10px !default;

And how it indented:

$line-height:           1.5 !default; // calculating line-height: round($font-size * 1.5)
                                                                  $line-space:            10px !default;

Another one:

  // START: Quick dirty fix for Boostrap alert
  .alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 0 solid transparent;
    border-radius: 0;

And result:

  // START: Quick dirty fix for Boostrap alert
            .alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 0 solid transparent;
    border-radius: 0;

Seems like the issue somewhere with comments

[DmytroLitvinov]

Adn this one is also strange:

[DmytroLitvinov]

here is more information how it affects.

[JaapJoris]

Thanks for reporting these bugs. They all stem from the problem that my understanding of SCSS and, by extension, DjCSS's understanding is limited. The first bug you reported is caused by DjCSS not being aware that // starts a comment. The following:

div {
    foo: bar; // comment: ignore
    font-weight: bold;
}

therefore gets indented as this:

div {
    foo: bar; // comment: ignore
                          font-weight: bold;
}

Because DjCSS thinks that comment: is a CSS attribute without the trailing ;. Adding one fixes it:

div {
    foo: bar; // comment: ignore;
    font-weight: bold;
}

The second problem is that DjCSS treats text between ( and ) no different than ordinary attribute/value pairs in CSS. Note that the following:

@font-face {
    src: url('Arial.woff2') format('woff2'),
         url('Arial.woff') format('woff');
}

is consistent with the following, from DjCSS's perspective:

@include button-outline-variant(
    $color: $white,
            $hover-background;
)

This is a harder problem, but I think it can be fixed by special-casing stuff between ( and ).

Are there any further SCSS peculiarities that I'm not yet aware of?

[DmytroLitvinov]

Thank you for explaining @JaapJoris .

Here are more examples. Can you check whatever is related to the issue?

1. Not sure that closing parenthesis

2. I would expect it under screen.

3. Maybe this one would be interested also

[oselz]

Here is another simple example I just hit:

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

$grid-breakpoints: (
                     xs: 0,
      sm: 576px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    ) !default;