ain
commented
8 years ago grunt-scss-lint has a dependency on Ruby gem, making it very dodgy to scaffold. Much better solution would be to use grunt-sass-lint that is purely Node.js-driven.
The problem is the limited support though. We'd not get all of our rules.
Our current .scss-lint.yml converted to .sass-lint.yml by http://sasstools.github.io/make-sass-lint-config/ would be as below.
So the open question on Node.js projects. Ideas?
# sass-lint config generated by make-sass-lint-config v0.1.2
#
# The following scss-lint Linters are not yet supported by sass-lint:
# ElsePlacement, PropertyCount, SelectorDepth, TrailingWhitespace
# UnnecessaryParentReference, Compass::*
#
# The following settings/values are unsupported by sass-lint:
# Linter Indentation, option "allow_non_nested_indentation"
# Linter Indentation, option "character"
# Linter NestingDepth, option "ignore_parent_selectors"
# Linter PropertySortOrder, option "min_properties"
# Linter PropertySortOrder, option "separate_groups"
# Linter SpaceBeforeBrace, option "allow_single_line_padding"
# Linter VendorPrefix, option "identifier_list"
files:
include: app/styles/*.scss
options:
formatter: stylish
merge-default-rules: false
rules:
bem-depth:
- 1
- max-depth: 2
border-zero:
- 1
- convention: zero
brace-style:
- 1
- allow-single-line: true
class-name-format:
- 0
- convention: hyphenatedlowercase
clean-import-paths:
- 1
- filename-extension: false
leading-underscore: false
empty-line-between-blocks:
- 1
- ignore-single-line-rulesets: true
extends-before-declarations: 1
extends-before-mixins: 1
final-newline:
- 1
- include: true
force-attribute-nesting: 0
force-element-nesting: 0
force-pseudo-nesting: 0
function-name-format:
- 0
- allow-leading-underscore: true
convention: hyphenatedlowercase
hex-length:
- 1
- style: short
hex-notation:
- 1
- style: lowercase
id-name-format:
- 0
- convention: hyphenatedlowercase
indentation:
- 1
- size: 2
leading-zero:
- 1
- include: true
mixin-name-format:
- 0
- allow-leading-underscore: true
convention: hyphenatedlowercase
mixins-before-declarations: 1
nesting-depth:
- 1
- max-depth: 8
no-color-keywords: 1
no-color-literals: 0
no-css-comments: 0
no-debug: 1
no-duplicate-properties: 0
no-empty-rulesets: 1
no-extends: 0
no-ids: 1
no-important: 1
no-invalid-hex: 1
no-mergeable-selectors: 1
no-misspelled-properties:
- 1
- extra-properties: []
no-qualifying-elements:
- 1
- allow-element-with-attribute: true
allow-element-with-class: false
allow-element-with-id: false
no-trailing-zero: 1
no-url-protocols: 1
no-vendor-prefixes:
- 1
- additional-identifiers: []
excluded-identifiers: []
placeholder-in-extend: 1
placeholder-name-format:
- 0
- convention: hyphenatedlowercase
property-sort-order:
- 1
- ignore-custom-properties: false
order:
- position
- top
- right
- bottom
- left
- z-index
- float
- clear
- null
- display
- overflow
- overflow-x
- overflow-y
- box-sizing
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
- width
- min-width
- max-width
- height
- min-height
- max-height
- border-collapse
- border-spacing
- border
- border-width
- border-style
- border-color
- 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
- flex
- flex-flow
- flex-direction
- flex-wrap
- flex-grow
- flex-shrink
- flex-basis
- justify-content
- align-items
- align-content
- align-self
- order
- table-layout
- caption-side
- empty-cells
- columns
- column-gap
- column-fill
- column-rule
- column-span
- column-count
- column-width
- clip
- clip-path
- null
- visibility
- opacity
- border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- border-image
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-position-x
- background-position-y
- background-origin
- background-size
- background-clip
- box-shadow
- filter
- null
- color
- font
- font-family
- font-size
- font-size-adjust
- font-smoothing
- font-style
- font-variant
- font-weight
- line-height
- vertical-align
- direction
- text-align
- text-align-last
- text-decoration
- text-indent
- text-overflow
- text-rendering
- text-shadow
- text-size-adjust
- text-transform
- text-wrap
- word-wrap
- overflow-wrap
- letter-spacing
- word-spacing
- word-break
- hyphens
- white-space
- tab-size
- list-style
- list-style-position
- list-style-type
- list-style-image
- null
- transform
- transform-function
- transform-origin
- transform-style
- perspective
- perspective-origin
- backface-visibility
- null
- transition
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- animation
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
- null
- cursor
- pointer-events
- resize
- user-select
property-units:
- 1
- global:
- ch
- em
- ex
- rem
- cm
- in
- mm
- pc
- pt
- px
- q
- vh
- vw
- vmin
- vmax
- deg
- grad
- rad
- turn
- ms
- s
- Hz
- kHz
- dpi
- dpcm
- dppx
- '%'
per-property: {}
quotes:
- 1
- style: single
shorthand-values: 0
single-line-per-selector: 1
space-after-bang:
- 1
- include: false
space-after-colon:
- 1
- include: true
space-after-comma: 1
space-before-bang:
- 1
- include: true
space-before-brace:
- 1
- include: true
space-before-colon: 1
space-between-parens:
- 1
- include: false
trailing-semicolon: 1
url-quotes: 1
variable-for-property:
- 0
- properties: []
variable-name-format:
- 0
- allow-leading-underscore: true
convention: hyphenatedlowercase
zero-unit: 1
GeorgMeyer23
Generator should scaffold grunt-scss-lint to QA task(s). Ruleset needs to be defined beforehand.