Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve output from PropertySortOrder when unspecified properties are used #880

Open
yoanmalie opened this issue Jan 10, 2017 · 7 comments

Comments

@yoanmalie
Copy link
Contributor

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
Copy link
Contributor

trotzig commented Jan 11, 2017

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
Copy link
Contributor Author

yoanmalie commented Jan 11, 2017

@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
Copy link
Contributor

trotzig commented Jan 12, 2017

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
Copy link
Contributor Author

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
Copy link
Contributor

trotzig commented Jan 12, 2017

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
Copy link
Contributor Author

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
Copy link
Contributor

trotzig commented Jan 12, 2017

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.

@trotzig trotzig changed the title ignore_unspecified does nothing with custom PropertySortOrder Improve output from PropertySortOrder when unspecified properties are used Jan 12, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants