rizzo-next/.scss-lint.yml

The next generation of Lonely Planet's style guide and pattern library.

# Default application configuration that all configurations inherit from.

scss_files:
- 'sass/**/*.scss'
- 'src/components/**/*.scss'
exclude:
- 'dist/**'
- 'docs/**'
- 'node_modules/**'
- 'tmp/**'
- 'sass/generic/_print.scss'
- 'sass/generic/_normalize.scss' # 3rd-party code
- 'src/components/image_gallery/image_gallery.scss' # plugin code
- 'src/components/map/**' # temporary exclusion; needs refactored
plugin_directories: ['.scss-linters']

# List of gem names to load custom linters from (make sure they are already installed)
plugin_gems: []

# https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md
linters:
  BangFormat:
    enabled: true
    space_before_bang: true
    space_after_bang: false

  BemDepth:
    exclude:
      - 'sass/generic/_print.scss' # temporary exclusion until `stack__article__image-container` is refactored
      - 'src/components/article_body/article_body.scss' # because markup from WP has more than one max element
      - 'src/components/articles/_articles.scss' # temporary exclusion, needs refactored; 2, 3 and 4 deep
      - 'src/components/footer/_footer.scss' # temporary exclusion, needs refactored; 2, 3 and 4 deep
      - 'src/components/hotels/_hotels.scss' # temporary exclusion, needs refactored; 2 deep
      - 'src/components/interests/_interests.scss' # temporary exclusion, needs refactored; 2 deep
      - 'src/components/intro_narrative/_intro_narrative.scss' # temporary exclusion, needs refactored; 2 and 3 deep
      - 'src/components/love_letter/_love_letter.scss' # temporary exclusion, needs refactored; 2 and 3 deep
      - 'src/components/navigation/_hamburger.scss' # temporary exclusion, needs refactored; 2 and 3 deep
      - 'src/components/social_share/social-share.scss' # temporary exclusion, needs refactored; 2 deep
    enabled: true
    max_elements: 1

  BorderZero:
    enabled: true
    convention: zero # or `none`

  ColorKeyword:
    enabled: true

  ColorVariable:
    enabled: true

  Comment:
    enabled: true

  Compass::*:
    enabled: false

  DebugStatement:
    enabled: true

  # Rule sets should be ordered as follows:
  # - @extend declarations
  # - @include declarations without inner @content
  # - properties
  # - @include declarations with inner @content
  # - nested rule sets
  DeclarationOrder:
    enabled: true

  DisableLinterReason:
    enabled: false

  DuplicateProperty:
    enabled: true

  ElsePlacement:
    enabled: true
    style: same_line # or 'new_line'

  EmptyLineBetweenBlocks:
    enabled: true
    ignore_single_line_blocks: true

  EmptyRule:
    enabled: true

  ExtendDirective:
    enabled: false # see PlaceholderInExtend

  FinalNewline:
    enabled: true
    present: true

  HexLength:
    enabled: true
    style: short # or 'long'

  HexNotation:
    enabled: true
    style: lowercase # or 'uppercase'

  HexValidation:
    enabled: true

  IdSelector:
    enabled: true

  ImportantRule:
    exclude:
      - 'sass/generic/_print.scss' # need !important to force print styles in some cases
      - 'sass/tools/_mixins.scss' # need !important on copy-caption styles
      - 'sass/overrides/_utility_classes.scss' # need !important for overrides
      - 'src/components/ads/ads.scss' # need !important to ensure ad is hidden
      - 'src/components/article_body/article_body.scss' # need !important to override legacy styles
    enabled: true

  ImportPath:
    enabled: true
    leading_underscore: false
    filename_extension: false

  Indentation:
    enabled: true
    allow_non_nested_indentation: false
    character: space # or 'tab'
    width: 2

  LeadingZero:
    enabled: true
    style: exclude_zero # or 'include_zero'

  MergeableSelector:
    enabled: true
    force_nesting: true

  # Functions, mixins, variables, and placeholders
  NameFormat:
    enabled: true
    allow_leading_underscore: true
    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern

  NestingDepth:
    exclude:
      - 'sass/docs.scss' # allowing deeper nesting layout-container > header rather than 1) violating MergeableSelector rule or 2) unnesting anchor pseudo classes
      - 'src/components/article_body/article_body.scss' # because markup from WP is messy and overspecificity is needed
      - 'src/components/footer/_footer.scss' # temporary exclusion; 4 deep, needs refactored
      - 'src/components/header/_header.scss' # temporary exclusion; 4 deep, needs refactored
      - 'src/components/hotels/_hotels.scss' # temporary exclusion; 4 deep, needs refactored
      - 'src/components/interests/_interests.scss' # temporary exclusion; 4 deep, needs refactored
      - 'src/components/navigation/_navigation.scss' # temporary exclusion; 4 deep, needs refactored
      - 'src/components/navigation/_user-panel.scss' # temporary exclusion; 4 deep, needs refactored
    enabled: true
    max_depth: 3
    ignore_parent_selectors: false

  PlaceholderInExtend:
    enabled: true

  PropertyCount:
    enabled: false
    include_nested: false
    max_properties: 10

  PropertySortOrder:
    enabled: true
    ignore_unspecified: false
    min_properties: 2
    separate_groups: false

  PropertySpelling:
    enabled: true
    extra_properties: []

  PropertyUnits:
    exclude:
      - 'sass/generic/_print.scss' # need to use px for border and cm for margin
      - 'sass/generic/_reset.scss' # need to use px for border
    enabled: true
    global: [
      'em', 'rem',                    # Font-relative lengths ('ch', 'em', 'ex', 'rem')
      'px',                           # Absolute lengths ('cm', 'in', 'mm', 'pc', 'pt', 'px', 'q')
      'vh', 'vw', 'vmin', 'vmax',     # Viewport-percentage lengths ('vh', 'vw', 'vmin', 'vmax')
      'deg', 'grad', 'rad', 'turn',   # Angle ('deg', 'grad', 'rad', 'turn')
      'ms',                           # Duration ('ms', 's')
      'Hz', 'kHz',                    # Frequency ('Hz', 'kHz')
      'dpi', 'dpcm', 'dppx',          # Resolution ('dpi', 'dpcm', 'dppx')
      '%']                            # Other ('%')
    properties: {
      border: ['px', 'em', 'rem'],
      border-top: ['px', 'em', 'rem'],
      border-right: ['px', 'em', 'rem'],
      border-bottom: ['px', 'em', 'rem'],
      border-left: ['px', 'em', 'rem'],
      border-spacing: ['px', 'em', 'rem'],
      border-radius: ['px', 'em', 'rem', '%'],
      font-size: ['px', 'em', 'rem', 'vw', '%'],
      height: ['px', 'em', 'rem', '%', 'vw', 'vh'],
      max-height: ['px', 'em', 'rem', '%', 'vh'],
      min-height: ['px', 'em', 'rem', '%', 'vh'],
      letter-spacing: ['px', 'rem'],
      line-height: ['', 'px', 'rem'], # allowing rems to vertically center text
      margin: ['px', 'em', 'rem', '%', 'vw'],
      margin-top: ['px', 'em', 'rem', '%', 'vw'],
      margin-right: ['px', 'em', 'rem', '%', 'vw'],
      margin-bottom: ['px', 'em', 'rem', '%', 'vw'],
      margin-left: ['px', 'em', 'rem', '%', 'vw'],
      padding: ['px', 'em', 'rem', '%', 'vw'],
      padding-top: ['px', 'em', 'rem', '%', 'vw'],
      padding-right: ['px', 'em', 'rem', '%', 'vw'],
      padding-bottom: ['px', 'em', 'rem', '%', 'vw'],
      padding-left: ['px', 'em', 'rem', '%', 'vw'],
      transition: ['ms'],
      transition-duration: ['ms'],
      width: ['px', 'em', 'rem', '%', 'vw'],
      max-width: ['px', 'em', 'rem', '%', 'vw'],
      min-width: ['px', 'em', 'rem', '%', 'vw'],
      top: ['px', 'em', 'rem', '%', 'vw'],
      bottom: ['px', 'em', 'rem', '%', 'vw'],
      left: ['px', 'em', 'rem', '%', 'vw'],
      right: ['px', 'em', 'rem', '%', 'vw']
    }

  PseudoElement:
    exclude:
      - 'sass/generic/_reset.scss' # temporary exclusion until some webkit pseudo elements are added
    enabled: true

  QualifyingElement:
    exclude:
      - 'src/components/article_body/article_body.scss' # need to override legacy styles
    enabled: true
    allow_element_with_attribute: false
    allow_element_with_class: false
    allow_element_with_id: false

  SelectorDepth:
    exclude:
      - 'sass/generic/_print.scss' # need for article-body styles
      - 'src/components/article_body/article_body.scss' # because markup from WP is messy and overspecificity is needed
      - 'src/components/interests/_interests.scss' # temporary exclusion; 4 deep, needs refactored
      - 'src/components/navigation/_user-panel.scss' # temporary exclusion; 4 deep, needs refactored
    enabled: true
    max_depth: 3

  SelectorFormat:
    exclude:
      - 'src/components/masthead/_masthead_nav.scss' # temporary exclusion because `masthead_nav` needs refactored
      - 'src/components/top_places/_top_places.scss' # temporary exclusion because `top_places` needs refactored
    enabled: false
    convention: hyphenated_BEM # 'hyphenated_lowercase', or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern

  Shorthand:
    enabled: true
    allowed_shorthands: [1, 2, 3, 4]

  SingleLinePerProperty:
    enabled: true
    allow_single_line_rule_sets: false

  SingleLinePerSelector:
    exclude:
      - 'sass/generic/_reset.scss' # because of the margin and padding reset on every element imaginable
    enabled: true

  SpaceAfterComma:
    enabled: true
    style: one_space # or 'no_space', or 'at_least_one_space'

  SpaceAfterPropertyColon:
    enabled: true
    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'

  SpaceAfterPropertyName:
    enabled: true

  SpaceAfterVariableName:
    enabled: true

  SpaceAroundOperator:
    enabled: true
    style: one_space # or 'no_space'

  SpaceBeforeBrace:
    enabled: true
    style: space # or 'new_line'
    allow_single_line_padding: false

  SpaceBetweenParens:
    enabled: true
    spaces: 0

  StringQuotes:
    enabled: true
    style: double_quotes # or single_quotes

  TrailingSemicolon:
    enabled: true

  TrailingWhitespace:
    enabled: true

  TrailingZero:
    enabled: false

  TransitionAll:
    enabled: true

  UnnecessaryMantissa:
    enabled: true

  UnnecessaryParentReference:
    enabled: true

  UrlFormat:
    enabled: false # because of too many instances of https://assets.staticlp.com

  UrlQuotes:
    enabled: true

  VariableForProperty:
    enabled: false
    properties: []

  VendorPrefix:
    exclude:
      - 'sass/generic/_reset.scss' # because of unstandard properties
      - 'src/components/header/_header.scss' # because of -webkit-mask-image; revisit to see if this is needed
    enabled: true
    identifier_list: base
    additional_identifiers: []
    excluded_identifiers: []

  ZeroUnit:
    enabled: true