sds / scss-lint

Configurable tool for writing clean, consistent SCSS
MIT License
3.66k stars 465 forks source link

Concentric order linting can't make up its mind #628

Closed stowball closed 9 years ago

stowball commented 9 years ago

When using certain flexbox properties, scss-lint often complains that properties are ordered incorrectly, so you fix it, then it complains again to switch it back. It also seems highly dependent on the other properties used in the rule. It's annoying.

Take this example:

.foo {
    display: flex;
    transition: all ease .15s;
    outline: none;
    border: 1px solid #444950;
    border-radius: 4px;
    background: #1f2128;
    padding: 8px 10px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    line-height: (15 / 13);
    color: #fff;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

scss-lint will warn that: Properties should be ordered display, transition, outline, border, border-radius, background, padding, width, text-align, text-transform, text-decoration, line-height, color, font-family, font-size, font-weight, *align-items*, *flex-wrap*, justify-content

Then, if you switch align-items and flex-wrap like instructed, it will warn that Properties should be ordered display, transition, outline, border, border-radius, background, padding, width, text-align, text-transform, text-decoration, line-height, color, font-family, font-size, font-weight, *flex-wrap*, *align-items*, justify-content

Interestingly, in this example, if just one of the other properties is removed, the warning disappears, regardless of the order of flex-wrap and align-items.

My lint rules are as follows:

linters:
    UrlFormat:
        enabled: false # allows for url(//some.domain/something)
    SelectorFormat:
        convention: 'hyphenated_BEM'
    NestingDepth:
        max_depth: 4 # Default is 3. But we're typically namespaced once.
    SelectorDepth:
        max_depth: 4
    PropertySortOrder:
        order: concentric
    Indentation:
        width: 4
        severity: error
    VendorPrefix:
        enabled: false
    NameFormat:
        enabled: true
        convention: hyphenated_lowercase
        allow_leading_underscore: true
        variable_convention: '[a-z]+([-_].+)?'
        placeholder_convention: '[a-z]+([-_].+)?'
    Comment:
        allowed: '(Dependencies|@TODO)'
    ColorVariable:
        enabled: false
sds commented 9 years ago

Which version of SCSS-Lint are you using @stowball? I believe this was fixed in 0.40.0.

Duplicate of #528.

stowball commented 9 years ago

@sds I'm using 0.38.0, which is the latest on Ruby Gems: https://rubygems.org/gems/scss-lint/versions. I see that it's not the latest tagged release on GitHub though :(

sds commented 9 years ago

@stowball scss-lint was renamed to scss_lint in 0.38.0 to match Rubygems naming conventions. It's documented in the release notes. https://github.com/brigade/scss-lint/releases/tag/v0.38.0

Also note the message that displays when you install it warns you that it has been renamed.

stowball commented 9 years ago

Aha! Thanks!

msartintarm commented 8 years ago

Our project is facing this issue. We are using grunt-scss-lint v0.3.8. Is this new naming convention going to prevent us from receiving this fix?

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: center;
  justify-content: flex-start;
}

Properties should be ordered display, flex-direction, align-content, flex-wrap, align-items, justify-content

.flex-container {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

Properties should be ordered display, flex-direction, flex-wrap, align-content, align-items, justify-content

bartveneman commented 8 years ago

As the grunt plugin mentions it depends on Scss-lint being installed: what version of scss-lint are you running?

msartintarm commented 8 years ago

scss-lint -v gives me scss-lint 0.31.0

So I did sudo gem uninstall scss-lint && sudo gem install scss_lint .. now grunt points to the new version! Thanks!