tjwsasslint.yml

####################################
## TheJaredWilcurt Sass-Lint Rules
####################################
## Designed with Sass-Lint in mind:
## github.com/sasstools/sass-lint
####################################

# Linter Options
options:
  # Don't merge default rules
  merge-default-rules: false
  # Raise an error if more than 50 warnings are generated
  max-warnings: 50
  formatter: json

# File Options
files:
  ignore:
    - 'node_modules/**'
  # Uncomment the include if not defined via CLI
  # include: 'src/**/*.s+(a|c)ss'

# Rule Configuration
rules:
  # Error if attributes are missing quotes. [type="checkbox"] instead of [type=checkbox]
  attribute-quotes: 2
  # Error if curly braces are on same line, require block content to have 1 level of indentation
  brace-style:
    - 2
    - allow-single-line: false
      style: '1tbs'
  # Error if your nesting comes before the properties in a rule
  declarations-before-nesting: 2
  # Error if using parens in mixin definitions or calls when not needed
  empty-args:
    - 2
    - include: false
  # Extends must be at the top of a rule (before mixins, properties, and nesting)
  extends-before-declarations: 2
  extends-before-mixins: 2
  # Make sure there is at least 1 empty line at the end of all files to make git happy (CRLF/LF)
  final-newline:
    - 2
    - include: true
  # Prefer short hex when possible. #F0A instead of #FF00AA
  hex-length:
    - 2
    - style: short
  # All hex will be uppercase. #F0A instead of #F0a, #f0A, or #f0a
  hex-notation:
    - 2
    - style: uppercase
  # Require all files use 4 spaces for indentation
  indentation:
    - 2
    - size: 4
  # Require leading zeros. opacity: 0.4 instead of opacity: .4
  leading-zero:
    - 2
    - include: true
  # Mixins must be at the top of a rule (after extends, before properties and nesting)
  mixins-before-declarations:
    - 2
    - exclude:
        - breakpoint
        - mq
  # Warn if using $brandColor: red instead of $brandColor: #F00
  no-color-keywords: 1
  # All colors must be defined as a Sass variable before actual usage. background: $brandColor instead of background: #F00
  no-color-literals: 1
  # Warn if debugger found
  no-debug: 1
  # Do not allow the same property multiple times in a rule
  no-duplicate-properties: 2
  # Rules must contain properties or be removed
  no-empty-rulesets: 2
  # Never use !important, you know better
  no-important: 2
  # Warn if using a typo'd a hex value, #F00 instead of #G00
  no-invalid-hex: 1
  # Do not nest things without a need to
  no-mergeable-selectors: 2
  # Warn about colour or backgorund
  no-misspelled-properties: 1
  # div.thing and div#thing are not allowed, use .thing or #thing
  # div and input[type="checkbox"] are allowed
  no-qualifying-elements:
   - 2
   - allow-element-with-attribute: true
     allow-element-with-class: false
     allow-element-with-id: false
  # Warn if a line ends in a space
  no-trailing-whitespace: 1
  # Warn if an @warn was left in
  no-warn: 1
  # Requires @extend to use %placeholders
  placeholder-in-extend: 2
  # Organize all properties into a logical hierarchy described below, warn if they are not in this order.
  # Consistent propery ordering makes the codebase more predictable and improves GZip results
  property-sort-order:
    - 1
    - ignore-custom-properties: true
      order:
        # Effects if the element exists
        - content
        # Highest effect of where pixel painting begins
        - position
        - top
        - right
        - bottom
        - left
        # How the element is displayed and layout
        - display
        - columns
        - column-count
        - column-gap
        - column-fill
        - column-rule
        - column-rule-width
        - column-rule-style
        - column-rule-color
        - column-span
        - column-width
        - flex
        - flex-basis
        - flex-direction
        - flex-flow
        - flex-grow
        - flex-shrink
        - flex-wrap
        - align-content
        - align-items
        - -ms-grid-row-align
        - align-self
        - justify-content
        - justify-items
        - -ms-grid-column-align
        - justify-self
        - place-content
        - place-items
        - place-self
        - order
        - grid
        - grid-start
        - grid-end
        - grid-before
        - grid-after
        - grid-area
        - grid-gap
        - gap
        - grid-template
        - grid-template-areas
        - -ms-grid-columns
        - grid-template-columns
        - -ms-grid-rows
        - grid-template-rows
        - grid-columns
        - grid-column
        - -ms-grid-column
        - grid-column-start
        - -ms-grid-column-span
        - grid-column-end
        - grid-column-gap
        - grid-rows
        - grid-row
        - -ms-grid-row
        - grid-row-start
        - -ms-grid-row-span
        - grid-row-end
        - grid-row-gap
        - row-gap
        - grid-auto-columns
        - grid-auto-rows
        - grid-auto-flow
        - table-layout
        - caption-side
        # Overall size, max amount of pixels that can be painted
        - width
        - height
        - min-width
        - min-height
        - max-width
        - max-height
        # Effects the most amount of pixel paint in the element
        - background
        - background-attachment
        - background-blend-mode
        - background-clip
        - background-color
        - background-image
        - background-origin
        - background-position
        - background-repeat
        - background-size
        # Box model
        - border
        - border-width
        - border-style
        - border-color
        - border-collapse
        - border-spacing
        - border-top
        - border-top-width
        - border-top-style
        - border-top-color
        - border-right
        - border-right-width
        - border-right-style
        - border-right-color
        - border-bottom
        - border-bottom-width
        - border-bottom-style
        - border-bottom-color
        - border-left
        - border-left-width
        - border-left-style
        - border-left-color
        - border-radius
        - border-top-left-radius
        - border-top-right-radius
        - border-bottom-right-radius
        - border-bottom-left-radius
        - border-block
        - border-block-width
        - border-block-style
        - border-block-color
        - -webkit-border-before
        - border-block-start
        - border-block-start-color
        - border-block-start-style
        - border-block-start-width
        - -webkit-border-after
        - border-block-end
        - border-block-end-color
        - border-block-end-style
        - border-block-end-width
        - border-inline
        - border-inline-width
        - border-inline-style
        - border-inline-color
        - -webkit-border-start
        - border-inline-start
        - border-inline-start-width
        - border-inline-start-style
        - border-inline-start-color
        - -webkit-border-end
        - border-inline-end
        - border-inline-end-width
        - border-inline-end-style
        - border-inline-end-color
        - border-start-start-radius
        - border-start-end-radius
        - border-end-start-radius
        - border-end-end-radius
        - border-image
        - border-image-source
        - border-image-width
        - border-image-outset
        - border-image-repeat
        - border-image-slice
        - empty-cells
        - margin
        - margin-collapse
        - margin-top
        - margin-top-collapse
        - margin-right
        - margin-right-collapse
        - margin-bottom
        - margin-bottom-collapse
        - margin-left
        - margin-left-collapse
        - margin-block
        - -webkit-margin-before
        - margin-block-start
        - -webkit-margin-after
        - margin-block-end
        - margin-inline
        - -webkit-margin-start
        - margin-inline-start
        - -webkit-margin-end
        - margin-inline-end
        - padding
        - padding-top
        - padding-right
        - padding-bottom
        - padding-left
        - padding-block
        - -webkit-padding-before
        - padding-block-start
        - -webkit-padding-after
        - padding-block-end
        - padding-inline
        - -webkit-padding-start
        - padding-inline-start
        - -webkit-padding-end
        - padding-inline-end
        # Text treatment
        - color
        - direction
        - font
        - font-effect
        - font-emphasize
        - font-emphasize-position
        - font-emphasize-style
        - font-family
        - font-feature-settings
        - -webkit-font-kerning
        - font-kerning
        - font-language-override
        - font-optical-sizing
        - font-size
        - font-size-adjust
        - osx-font-smoothing
        - -webkit-font-smoothing
        - -moz-osx-font-smoothing
        - font-smoothing
        - font-stretch
        - font-style
        - font-synthesis
        - font-variant
        - font-variant-alternates
        - font-variant-caps
        - font-variant-east-asian
        - font-variant-ligatures
        - font-variant-numeric
        - font-variant-position
        - font-variation-settings
        - font-weight
        - hanging-punctuation
        - -webkit-hyphens
        - -ms-hyphens
        - hyphens
        - letter-spacing
        - line-break
        - -webkit-line-clamp
        - line-clamp
        - line-height
        - list-style
        - list-style-image
        - list-style-position
        - list-style-type
        - orphans
        - quotes
        - speak
        - src
        - -moz-tab-size
        - tab-size
        - text-align
        - text-align-last
        - text-combine-upright
        - -webkit-text-decoration
        - text-decoration
        - -webkit-text-decoration-width
        - text-decoration-width
        - -webkit-text-decoration-thickness
        - text-decoration-thickness
        - -webkit-text-decoration-color
        - text-decoration-color
        - -webkit-text-decoration-line
        - text-decoration-line
        - -webkit-text-decoration-skip
        - text-decoration-skip
        - text-decoration-skip-ink
        - -webkit-text-decoration-style
        - text-decoration-style
        - -webkit-text-emphasis
        - text-emphasis
        - -webkit-text-emphasis-color
        - text-emphasis-color
        - -webkit-text-emphasis-style
        - text-emphasis-style
        - -webkit-text-emphasis-position
        - text-emphasis-position
        - text-indent
        - text-justify
        - text-orientation
        - text-outline
        - text-overflow
        - text-overflow-ellipsis
        - text-overflow-mode
        - text-rendering
        - text-shadow
        - -webkit-text-size-adjust
        - -moz-text-size-adjust
        - -ms-text-size-adjust
        - text-size-adjust
        - text-transform
        - text-underline-position
        - text-wrap
        - unicode-bidi
        - unicode-range
        - white-space
        - widows
        - word-break
        - word-spacing
        - word-wrap
        - -ms-writing-mode
        - writing-mode
        # Less common properties go to the bottom
        - additive-symbols
        - all
        - animation
        - animation-name
        - animation-duration
        - animation-timing-function
        - animation-delay
        - animation-iteration-count
        - animation-direction
        - animation-fill-mode
        - animation-play-state
        - -moz-appearance
        - -webkit-appearance
        - appearance
        - -webkit-backface-visibility
        - backface-visibility
        - block-size
        - min-block-size
        - -webkit-box-decoration-break
        - box-decoration-break
        - box-shadow
        - box-sizing
        - page-break-before
        - break-before
        - page-break-inside
        - break-inside
        - page-break-after
        - break-after
        - caret-color
        - clear
        - clip
        - -webkit-clip-path
        - clip-path
        - -webkit-print-color-adjust
        - color-adjust
        - counter-reset
        - counter-increment
        - cursor
        - fallback
        - fill
        - -webkit-filter
        - filter
        - float
        - image-orientation
        - -ms-interpolation-mode
        - image-rendering
        - inline-size
        - min-inline-size
        - inset
        - inset-block
        - inset-block-start
        - inset-block-end
        - inset-inline
        - inset-inline-start
        - inset-inline-end
        - isolation
        - marks
        - -webkit-mask
        - mask
        - -webkit-mask-clip
        - mask-clip
        - -webkit-mask-composite
        - mask-composite
        - -webkit-mask-image
        - mask-image
        - mask-mode
        - -webkit-mask-origin
        - mask-origin
        - -webkit-mask-position
        - mask-position
        - -webkit-mask-repeat
        - mask-repeat
        - -webkit-mask-size
        - mask-size
        - mask-type
        - mix-blend-mode
        - nav-index
        - nav-up
        - nav-right
        - nav-down
        - nav-left
        - negative
        - object-fit
        - object-position
        - opacity
        - orientation
        - outline
        - outline-width
        - outline-style
        - outline-color
        - outline-offset
        - overflow
        - overflow-wrap
        - overflow-x
        - overflow-y
        - pad
        - page
        - perspective
        - perspective-origin
        - pointer-events
        - prefix
        - range
        - resize
        - rotate
        - scale
        - scroll-behavior
        - scroll-margin
        - scroll-margin-top
        - scroll-margin-right
        - scroll-margin-bottom
        - scroll-margin-left
        - scroll-margin-block
        - scroll-margin-block-start
        - scroll-margin-block-end
        - scroll-margin-inline
        - scroll-margin-inline-start
        - scroll-margin-inline-end
        - scroll-padding
        - scroll-padding-top
        - scroll-padding-right
        - scroll-padding-bottom
        - scroll-padding-block
        - scroll-padding-left
        - scroll-padding-block-start
        - scroll-padding-block-end
        - scroll-padding-inline
        - scroll-padding-inline-start
        - scroll-padding-inline-end
        - scroll-snap-align
        - scroll-snap-stop
        - -ms-scroll-snap-type
        - scroll-snap-type
        - scrollbar-width
        - scrollbar-color
        - shape-image-threshold
        - shape-margin
        - shape-outside
        - size
        - speak-as
        - stroke
        - stroke-width
        - stroke-linecap
        - stroke-dasharray
        - stroke-dashoffset
        - suffix
        - symbols
        - system
        - touch-action
        - -webkit-transform
        - transform
        - transform-box
        - transform-origin
        - transform-style
        - -webkit-transition
        - transition
        - transition-property
        - transition-duration
        - transition-timing-function
        - transition-delay
        - translate
        - -webkit-user-select
        - -moz-user-select
        - -ms-user-select
        - user-select
        - user-zoom
        - vertical-align
        - visibility
        - will-change
        - zoom
        - min-zoom
        - max-zoom
        - z-index
  # Comma separated selectors should be on their own lines
  single-line-per-selector: 1
  # Do not allow ! important, only !important
  space-after-bang:
    - 2
    - include: false
  # Warn if no space after colon. color: $red instead of color:$red
  space-after-colon:
    - 1
    - include: true
  # Warn if commas are not followed by a space. rgb(0, 0, 0) instead of rgb(0,0,0)
  space-after-comma:
    - 1
    - include: true
  # Warn if there are no spaces around an operator. width: 4px + 10px instead of width: 4px+10px
  space-around-operator:
    - 1
    - include: true
  # Warn if there is no space before !. 200px !important instead of 200px!important
  space-before-bang:
    - 1
    - include: true
  # Warn if no space before brace. .thing { instead of .thing{
  space-before-brace:
    - 1
    - include: true
  # Warn if space occurs before colon. color: $red instead of color : $red
  space-before-colon:
    - 1
    - include: false
  # Warn if space between paren and arg. +MyMixin(100px) instead of +MyMixin( 100px )
  space-between-parens:
    - 1
    - include: false
  # Warn if you leave off the last semi-colon in a rule (in SCSS)
  trailing-semicolon:
    - 1
    - include: true
  # Warn if you are missing quotes in url. background: url('file.png') instead of background: url(file.png)
  url-quotes: 1
  ## Warn if variables begin with underscore and are not camelCase. $mainContent instead of $_main-content
  variable-name-format:
    - 1
    - allow-leading-underscore: false
      convention: camelcase
  # Warn if zero does not have a unit. margin: 0px instead of margin: 0
  # This will infer intent to future devs and can be removed during uglification
  zero-unit:
    - 1
    - include: true