sass-lint: Indentation rule doesn't like alignment in multiline structures

In structures such as

#loading-screen {
    // Magic animations
    visibility: hidden;
    transform: translateX(-100%);
    // Delay the visibility until we've drifted out
    transition: transform $in-out-speed,
                visibility 0s $in-out-speed;
    transition-timing-function: linear;
}

@font-face {
    font-family: "Freight Sans Pro";
    src: url("../fonts/FreightSansProMedium.woff") format("woff"),
         url("../fonts/FreightSansProMedium.ttf")  format("truetype");
}

scss-lint 1.5.1 complains about the overflow line’s indentation:

error-pages/_fonts.scss
  4:10  error  Indentation of 9, expected 4  indentation

The only way to appease it is to reduce the overhanging line to the base indentation of the block

{
    src: url("../fonts/FreightSansProMedium.woff") format("woff"),
    url("../fonts/FreightSansProMedium.ttf")  format("truetype");
}

or put it all on one line

{
    transition: transform $in-out-speed, visibility 0s $in-out-speed;
}

neither of which I am happy with.

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 26
Comments: 22 (4 by maintainers)

Commits related to this issue

[sass-lint] Disable indentation checking because of bug CSS Grid is triggered as invalid See https://github.com/sasstools/sass-lint/issues/591#issuecomment-314887197 — committed to bukowskis/style-guide by deleted user 5 years ago
[sass-lint] Disable indentation checking because of bug (#42) CSS Grid is triggered as invalid See https://github.com/sasstools/sass-lint/issues/591#issuecomment-314887197 — committed to bukowskis/style-guide by mmzoo 5 years ago

Most upvoted comments

Just to expand on @jhpratt’s comment, it’s beneficial to have well-aligned, multiline values for the grid-template-areas property in particular. The arrangement of the values is expressive – you kind of end up with ASCII-art for how your template is laid out:

grid-template-areas: "head head"
                     "nav  main"
                     "nav  foot";

As CSS Grid becomes more popular, I’m sure a lot of the community would find it beneficial to be able to lint for this situation!

Thanks!

rudidude86 on Jul 12, 2017

There’s a few different ways people may want multiline indentation enforced.

// indent one level
{
    transition: transform $in-out-speed,
        visibility 0s $in-out-speed;
}
// perfect alignment
{
    transition: transform $in-out-speed,
                visibility 0s $in-out-speed;
}
// indent one level, enforce new line after ':'
{
    transition:
        transform $in-out-speed,
        visibility 0s $in-out-speed;
}

I’ve got a fork that enforces indenting one level: https://github.com/pmccloghrylaing/sass-lint/tree/indent-multiline-declaration, but it seems like there’ll need to be an option for how multiline properties should be indented.

pmccloghrylaing on Sep 9, 2016

@DanPurdy Not a major issue for me, but now that display: grid is widely supported, multiline rules will be incredibly common.

jhpratt on Jul 7, 2017

Also adding to this, you get the Mixed tabs and spaces error if you are set to tabs, and trying to align the rules with spaces. You shouldn’t do alignment with tabs (because someone’s alignment with 2 space tabs is different from someone else’s alignment with 4.)

Just wanted to make sure that was on someone’s radar to test when they work on this!

wbobeirne on Jun 22, 2016

Thanks for flagging this up. We’re aware of quite a few issues with the indentation rule and you can expect them to be addressed soon, now that v1.6 is out of the door.

bgriffith on Apr 21, 2016