Skip to content

Instantly share code, notes, and snippets.

@herkulano
Last active December 21, 2019 20:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save herkulano/e2d36e67a090824f7f0c06b1e09fb151 to your computer and use it in GitHub Desktop.
Save herkulano/e2d36e67a090824f7f0c06b1e09fb151 to your computer and use it in GitHub Desktop.
SCSS Styling, Sorting and Linting Rules
{
"extends": "stylelint-config-standard",
"rules": {
"string-quotes": "single",
"selector-type-no-unknown": null
}
}
{
"name": "scss-style-lint-template",
"scripts": {
"lint:css": "stylelint \"src/**/*.scss\" --syntax scss",
"fix:css": "postcss \"src/**/*.scss\" --replace"
},
"private": true,
"dependencies": {},
"devDependencies": {
"postcss": "^6.0.1",
"postcss-cli": "^4.0.0",
"postcss-scss": "^1.0.0",
"postcss-sorting": "^2.1.0",
"sass-mq": "^3.3.2",
"stylefmt": "^6.0.0",
"stylelint": "^7.10.1",
"stylelint-config-standard": "^16.0.0",
}
}
module.exports = {
syntax: 'postcss-scss',
plugins: {
'stylefmt': {
'configFile': '.stylelintrc'
},
'postcss-sorting': {
'declaration-empty-line-before': [
true, {
'except': ['after-comment', 'after-declaration', 'first-nested'],
'ignore': ['after-comment', 'after-declaration']
}
],
'custom-property-empty-line-before': [
true, {
'except': ['after-comment', 'after-custom-property', 'first-nested'],
'ignore': ['after-comment']
}
],
'dollar-variable-empty-line-before': [
true, {
'except': ['after-comment', 'after-dollar-variable', 'first-nested'],
'ignore': ['after-comment']
}
],
'comment-empty-line-before': [
true, {
'except': ['first-nested'],
'ignore': ['after-comment']
}
],
'rule-nested-empty-line-before': [
true, {
'except': ['first-nested'],
'ignore': ['after-comment']
}
],
'at-rule-nested-empty-line-before': [
true, {
'except': ['after-same-name', 'blockless-after-blockless', 'blockless-after-same-name-blockless', 'first-nested'],
'ignore': ['after-comment', 'blockless-after-blockless', 'blockless-after-same-name-blockless'],
'ignoreAtRules': ['import', 'if', 'else', 'array', 'of', 'at-rules']
}
],
'order': [
'custom-properties',
'dollar-variables',
'at-rules',
'declarations',
{
'type': 'at-rule',
'name': 'include',
'parameter': 'mq'
},
'rules'
],
'properties-order': [
'lost-utility',
'lost-flex-container',
'lost-center',
'lost-align',
'lost-column',
'lost-row',
'lost-waffle',
'lost-offset',
'lost-move',
'lost-masonry-wrap',
'lost-masonry-column',
'position',
'top',
'right',
'bottom',
'left',
'z-index',
'display',
'visibility',
'flex',
'flex-grow',
'flex-shrink',
'flex-basis',
'flex-direction',
'flex-flow',
'flex-wrap',
'align-content',
'align-items',
'align-self',
'justify-content',
'order',
'float',
'clear',
'overflow',
'overflow-x',
'overflow-y',
'overflow-scrolling',
'clip',
'box-sizing',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'min-width',
'min-height',
'max-width',
'max-height',
'width',
'height',
'outline',
'outline-width',
'outline-style',
'outline-color',
'outline-offset',
'border',
'border-spacing',
'border-collapse',
'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',
'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',
'border-top-image',
'border-right-image',
'border-bottom-image',
'border-left-image',
'border-corner-image',
'border-top-left-image',
'border-top-right-image',
'border-bottom-right-image',
'border-bottom-left-image',
'background',
'background-color',
'background-image',
'background-attachment',
'background-position',
'background-position-x',
'background-position-y',
'background-clip',
'background-origin',
'background-size',
'background-repeat',
'box-decoration-break',
'box-shadow',
'color',
'table-layout',
'caption-side',
'empty-cells',
'list-style',
'list-style-position',
'list-style-type',
'list-style-image',
'quotes',
'content',
'counter-increment',
'counter-reset',
'writing-mode',
'vertical-align',
'text-align',
'text-align-last',
'text-decoration',
'text-emphasis',
'text-emphasis-position',
'text-emphasis-style',
'text-emphasis-color',
'text-indent',
'text-justify',
'text-outline',
'text-transform',
'text-wrap',
'text-overflow',
'text-overflow-ellipsis',
'text-overflow-mode',
'text-shadow',
'white-space',
'word-spacing',
'word-wrap',
'word-break',
'tab-size',
'hyphens',
'letter-spacing',
'font',
'font-weight',
'font-style',
'font-variant',
'font-size-adjust',
'font-stretch',
'font-size',
'font-family',
'src',
'line-height',
'opacity',
'interpolation-mode',
'filter',
'resize',
'cursor',
'nav-index',
'nav-up',
'nav-right',
'nav-down',
'nav-left',
'transition',
'transition-delay',
'transition-timing-function',
'transition-duration',
'transition-property',
'transform',
'transform-origin',
'animation',
'animation-name',
'animation-duration',
'animation-play-state',
'animation-timing-function',
'animation-delay',
'animation-iteration-count',
'animation-direction',
'animation-fill-mode',
'pointer-events',
'unicode-bidi',
'direction',
'columns',
'column-span',
'column-width',
'column-count',
'column-fill',
'column-gap',
'column-rule',
'column-rule-width',
'column-rule-style',
'column-rule-color',
'break-before',
'break-inside',
'break-after',
'page-break-before',
'page-break-inside',
'page-break-after',
'orphans',
'widows',
'zoom',
'max-zoom',
'min-zoom',
'user-zoom',
'orientation',
'user-select',
'fill',
'stroke'
],
'unspecified-properties-position': 'bottom'
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment