Improve output from PropertySortOrder when unspecified properties are used

[yoanmalie]

Hello,

I want an alert when a property specified in CSS file is omitted in the custom order on the PropertySortOrder key. But i can't keep it working. It look like ignore_unspecified does nothing.

Using scss_lint 0.52.0 on Ubuntu 16.04

With this scss-lint.yml config :

# Documentation:
# https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md

scss_files: 'source/assets/css/**/*.scss'
exclude:
  - 'node_modules'
linters:
  BangFormat:
    enabled: true
    space_before_bang: true
    space_after_bang: false
  BemDepth:
    enabled: true
    max_elements: 1
  BorderZero:
    enabled: true
    convention: zero
  ColorKeyword:
    enabled: true
  ColorVariable:
    enabled: false
  Comment:
    enabled: true
  DebugStatement:
    enabled: true
  DeclarationOrder:
    enabled: true
  DisableLinterReason:
    enabled: true
  DuplicateProperty:
    enabled: true
    ignore_consecutive:
        - background
        - transition
  ElsePlacement:
    enabled: true
    style: same_line
  EmptyLineBetweenBlocks:
    enabled: true
    ignore_single_line_blocks: true
  EmptyRule:
    enabled: true
  ExtendDirective:
    enabled: false
  FinalNewline:
    enabled: true
    present: true
  HexLength:
    enabled: true
    style: short
  HexNotation:
    enabled: true
    style: lowercase
  HexValidation:
    enabled: true
  IdSelector:
    enabled: true
  ImportantRule:
    enabled: false
  ImportPath:
    enabled: true
    leading_underscore: false
    filename_extension: false
  Indentation:
    enabled: true
    allow_non_nested_indentation: true
    character: space
    width: 4
  LeadingZero:
    enabled: true
    style: include_zero
  LengthVariable:
    enabled: false
  MergeableSelector:
    enabled: true
    force_nesting: false
  NameFormat:
    enabled: true
    allow_leading_underscore: true # For private variables, mixins and functions
    convention: '^[a-z]|[a-z0-9\-]{2,}$'
    convention_explanation: 'Valid names for variables, mixins and functions: i, foo, foo-bar, foo-1, _private-thing'
  NestingDepth:
    enabled: true
    max_depth: 3
    ignore_parent_selectors: false
  PlaceholderInExtend:
    enabled: false
  PrivateNamingConvention:
    enable: true
    prefix: '_'
  PropertyCount:
    enabled: false
  PropertySortOrder:
    enabled: true
    ignore_unspecified: false
    order:
      - content
      
      # Box
      - display
      - position
      - top
      - right
      - bottom
      - left

      - flex-flow
      - flex-direction
      - flex-wrap
      - justify-content
      - align-items
      - align-content
      - flex
      - flex-basis
      - flex-grow
      - flex-shrink
      - align-self
      - order

      - columns
      - column-gap
      - column-fill
      - column-rule
      - column-span
      - column-count
      - column-width

      - width
      - min-width
      - max-width

      - height
      - min-height
      - max-height

      - margin
      - margin-top
      - margin-right
      - margin-bottom
      - margin-left
      - margin-collapse
      - margin-top-collapse
      - margin-right-collapse
      - margin-bottom-collapse
      - margin-left-collapse

      - padding
      - padding-top
      - padding-right
      - padding-bottom
      - padding-left

      - float
      - clear
      - clip

      # Border
      - border
      - border-top
      - border-right
      - border-bottom
      - border-left

      - border-width
      - border-top-width
      - border-right-width
      - border-bottom-width
      - border-left-width

      - border-style
      - border-top-style
      - border-right-style
      - border-bottom-style
      - border-left-style

      - border-color
      - border-top-color
      - border-right-color
      - border-bottom-color
      - border-left-color

      - border-radius
      - border-top-left-radius
      - border-top-right-radius
      - border-bottom-left-radius
      - border-bottom-right-radius

      - outline
      - outline-width      
      - outline-style
      - outline-offset
      - outline-color

      # Text
      - color

      - font
      - font-family
      - font-size
      - font-style
      - font-variant
      - font-weight
      - font-smoothing

      - text-align
      - text-decoration
      - text-transform
      - text-indent
      - text-overflow
      - text-rendering
      - text-wrap
      - text-shadow

      - line-height
      - hyphens
      - word-break
      - word-wrap
      - word-spacing
      - letter-spacing
      - white-space

      # Others
      - list-style
      - list-style-type
      - list-style-position
      - list-style-image
      - border-collapse
      - border-spacing
      - caption-side
      - cursor
      - pointer-events
      - empty-cells
      - opacity
      - filter
      - overflow
      - overflow-x
      - overflow-y
      - quotes
      - speak
      - table-layout
      - vertical-align
      - visibility
      - box-shadow
      - z-index
      - counter-increment

      # Background
      - background
      - background-attachment
      - background-clip
      - background-color
      - background-image
      - background-repeat
      - background-position
      - background-size

      # Transform & Animation
      - transform
      - transform-box
      - transform-origin
      - transform-style

      - transition
      - transition-delay
      - transition-duration
      - transition-property
      - transition-timing-function

      - animation
      - animation-delay
      - animation-duration
      - animation-iteration-count
      - animation-name
      - animation-play-state
      - animation-timing-function
      - animation-fill-mode
  PropertySpelling:
    enabled: true
  PropertyUnits:
    enabled: true
    properties:
      line-height: [] # No units allowed
  PseudoElement:
    enabled: true
  QualifyingElement:
    enabled: false
  SelectorDepth:
    enabled: true
    max_depth: 3
  SelectorFormat: # Note: this does not warn about malformed selector that start with #{$css-prefix}
    enabled: true
    convention: '^[a-z0-9_\-]+$' # A sort of strict_BEM
    convention_explanation: 'Valid class names: block_container, block, block--modifier, block__element, block__element--modifier'
  Shorthand:
    enabled: true
  SingleLinePerProperty:
    enabled: true
    allow_single_line_rule_sets: false
  SingleLinePerSelector:
    enabled: true
  SpaceAfterComma:
    enabled: true
    style: one_space
  SpaceAfterComment:
    enabled: false
    style: one_space
    allow_empty_comments: false
  SpaceAfterPropertyColon:
    enabled: true
    style: one_space
  SpaceAfterPropertyName:
    enabled: true;
    style: no_space;
  SpaceAfterVariableColon:
    enabled: true
    style: at_least_one_space
  SpaceAfterVariableName:
    enabled: false
  SpaceAroundOperator:
    enabled: true
    style: one_space
  SpaceBeforeBrace:
    enabled: true
    allow_single_line_padding: true
    style: space
  SpaceBetweenParens:
    enabled: true
    spaces: 0
  StringQuotes:
    enabled: true
    style: single_quotes
  TrailingSemicolon:
    enabled: true
  TrailingWhitespace:
    enabled: true
  TrailingZero:
    enabled: true
  TransitionAll:
    enable: true
  UnnecessaryMantissa:
    enabled: true
  UnnecessaryParentReference:
    enabled: true
  UrlFormat:
    enabled: true
  UrlQuotes:
    enabled: true
  VariableForProperty:
    enabled: false
  VendorPrefix:
    enabled: true
  ZeroUnit:
    enabled: true

[trotzig]

Hi @yoanmalie! I'm not sure I understand what you're trying to do. Do you want scss-lint to fail when a property is missing (omitted)?

[yoanmalie]

@trotzig I want a warning in the console, when scss-lint find a property which is not ordered in the scss-lint.yml file.

With this alert, then i can add the missing properties to the PropertySortOrder.

[trotzig]

Ah, okay. Thanks for explaining that.

By looking at the specs for this, it looks like we only report lints if ignore_unspecified is disabled, and the unspecified properties appear in the middle somewhere. If they are listed at the bottom the check will pass. See https://github.com/brigade/scss-lint/blob/da9edb7a4cbade21eccef4b0dd41c1e10a249448/spec/scss_lint/linter/property_sort_order_spec.rb#L307 for context.

Can you verify that this is the behavior you're seeing too? If not, would you be willing to take a stab at fixing this in a PR?

[yoanmalie]

Ignore_unspecified is disabled by default. And that do not work, i've never seen an alert about an unspecified property :/ But in case, I have rewrote this rule in my scss-lint.yml, (see my first message), and it does not work either.

I'm not a developer, it would have been a pleasure to contribute to fix issues.

[trotzig]

That's okay.

I'm trying to produce a repro case locally, but I can't seem to force the behavior you're describing. Perhaps you can help me out here?

⨠ echo "
↳ PropertySortOrder:
↳   enabled: true
↳   ignore_unspecified: false
↳   order:
↳     - display
↳     - position
↳ " > .scss-lint.yml

⨠ echo "
↳ .foo {
↳   display: block;
↳   top: 2px;
↳   position: absolute;
↳ }
↳ " > styles.scss

⨠ cat styles.scss | scss-lint
styles.scss:4:3 [W] PropertySortOrder: Properties should be ordered display, position, top
→ exit status: 1

⨠ scss-lint -v
scss-lint 0.52.0

[yoanmalie]

Ok now i understand much better where unspecified properties going.

So my new question would be: It's could be nice if unspecified properties can be better visible in the warning.

I'm sorry about my poor english vocabulary, I have difficulty being understood sometimes.

[trotzig]

It's could be nice if unspecified properties can be better visible in the warning.

Ah, that's a good idea!

I'll change the title of this issue to make it clearer what change we want. I don't have the bandwidth to take this on myself, so we'll have to rely on the open-source community to help out.