NEW: Use sass-lint over scss-lint
SCSS linting now uses the node-based sass-lint tool, since we’re shifting away from CodeClimate. This has the benefit of not requiring a ruby gem on dev tools - everything is provided as npm dev dependencies. This was also necessary to run the linting inside travis.
This commit is contained in:
Sam Minnee
parent
f700d86557
commit
c2ebff5c19
|
|
@ -0,0 +1,178 @@
|
|||
# sass-lint config to match the AirBNB style guide
|
||||
files:
|
||||
include: '**/client/src/**/*.scss'
|
||||
ignore:
|
||||
- 'client/src/styles/legacy/*'
|
||||
- 'admin/client/src/styles/legacy/*'
|
||||
options:
|
||||
formatter: stylish
|
||||
merge-default-rules: false
|
||||
rules:
|
||||
# Warnings
|
||||
# Things that require actual refactoring are marked as warnings
|
||||
class-name-format:
|
||||
- 1
|
||||
- convention: hyphenatedbem
|
||||
placeholder-name-format:
|
||||
- 1
|
||||
- convention: hyphenatedlowercase
|
||||
nesting-depth:
|
||||
- 1
|
||||
- max-depth: 3
|
||||
no-ids: 1
|
||||
no-important: 1
|
||||
no-misspelled-properties:
|
||||
- 1
|
||||
- extra-properties:
|
||||
- "-moz-border-radius-topleft"
|
||||
- "-moz-border-radius-topright"
|
||||
- "-moz-border-radius-bottomleft"
|
||||
- "-moz-border-radius-bottomright"
|
||||
variable-name-format:
|
||||
- 1
|
||||
- allow-leading-underscore: true
|
||||
convention: hyphenatedlowercase
|
||||
no-extends: 1
|
||||
|
||||
# Warnings: these things are preferential rather than mandatory
|
||||
no-css-comments: 1
|
||||
|
||||
# Errors
|
||||
# Things that can be easily fixed are marked as errors
|
||||
indentation:
|
||||
- 2
|
||||
- size: 2
|
||||
final-newline:
|
||||
- 2
|
||||
- include: true
|
||||
no-trailing-whitespace: 2
|
||||
border-zero:
|
||||
- 2
|
||||
- convention: '0'
|
||||
brace-style:
|
||||
- 2
|
||||
- allow-single-line: true
|
||||
clean-import-paths:
|
||||
- 2
|
||||
- filename-extension: false
|
||||
leading-underscore: false
|
||||
no-debug: 2
|
||||
no-empty-rulesets: 2
|
||||
no-invalid-hex: 2
|
||||
no-mergeable-selectors: 2
|
||||
# no-qualifying-elements:
|
||||
# - 1
|
||||
# - allow-element-with-attribute: false
|
||||
# allow-element-with-class: false
|
||||
# allow-element-with-id: false
|
||||
no-trailing-zero: 2
|
||||
no-url-protocols: 2
|
||||
quotes:
|
||||
- 2
|
||||
- style: double
|
||||
space-after-bang:
|
||||
- 2
|
||||
- include: false
|
||||
space-after-colon:
|
||||
- 2
|
||||
- include: true
|
||||
space-after-comma:
|
||||
- 2
|
||||
- include: true
|
||||
space-before-bang:
|
||||
- 2
|
||||
- include: true
|
||||
space-before-brace:
|
||||
- 2
|
||||
- include: true
|
||||
space-before-colon: 2
|
||||
space-between-parens:
|
||||
- 2
|
||||
- include: false
|
||||
trailing-semicolon: 2
|
||||
url-quotes: 2
|
||||
zero-unit: 2
|
||||
single-line-per-selector: 2
|
||||
one-declaration-per-line: 2
|
||||
empty-line-between-blocks:
|
||||
- 2
|
||||
- ignore-single-line-rulesets: true
|
||||
|
||||
|
||||
# Missing rules
|
||||
# There are no sass-lint rules for the following AirBNB style items, but thess
|
||||
# - Put comments on their own line
|
||||
# - Put property delcarations before mixins
|
||||
|
||||
# Disabled rules
|
||||
|
||||
# These are other rules that we may wish to consider using in the future
|
||||
# They are not part of the AirBNB CSS standard but they would introduce some strictness
|
||||
# bem-depth: 0
|
||||
# variable-for-property: 0
|
||||
# no-transition-all: 0
|
||||
# hex-length:
|
||||
# - 1
|
||||
# - style: short
|
||||
# hex-notation:
|
||||
# - 1
|
||||
# - style: lowercase
|
||||
# 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: {}
|
||||
# force-attribute-nesting: 1
|
||||
# force-element-nesting: 1
|
||||
# force-pseudo-nesting: 1
|
||||
# function-name-format:
|
||||
# - 1
|
||||
# - allow-leading-underscore: true
|
||||
# convention: hyphenatedlowercase
|
||||
# no-color-literals: 1
|
||||
# no-duplicate-properties: 1
|
||||
# mixin-name-format:
|
||||
# - 1
|
||||
# - allow-leading-underscore: true
|
||||
# convention: hyphenatedlowercase
|
||||
# shorthand-values:
|
||||
# - 1
|
||||
# - allowed-shorthands:
|
||||
# - 1
|
||||
# - 2
|
||||
# - 3
|
||||
# leading-zero:
|
||||
# - 1
|
||||
# - include: false
|
||||
# no-vendor-prefixes:
|
||||
# - 1
|
||||
# - additional-identifiers: []
|
||||
# excluded-identifiers: []
|
||||
# placeholder-in-extend: 1
|
||||
# no-color-keywords: 2
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
# See https://docs.silverstripe.org/en/4.0/getting_started/css_coding_conventions/
|
||||
# Install instructions: https://github.com/brigade/scss-lint
|
||||
# Adapted from https://github.com/airbnb/css
|
||||
# Used for CodeClimate CI checks.
|
||||
|
||||
scss_files: '**/client/src/**/*.scss'
|
||||
|
||||
exclude:
|
||||
- 'client/src/styles/legacy/*'
|
||||
- 'admin/client/src/styles/legacy/*'
|
||||
- 'admin/client/src/font/styles.css'
|
||||
|
||||
|
||||
severity: error
|
||||
|
||||
linters:
|
||||
|
||||
BorderZero:
|
||||
enabled: true
|
||||
convention: zero
|
||||
|
||||
BemDepth:
|
||||
enabled: true
|
||||
|
||||
DeclarationOrder:
|
||||
enabled: false
|
||||
|
||||
ExtendDirective:
|
||||
enabled: true
|
||||
|
||||
LeadingZero:
|
||||
enabled: false
|
||||
|
||||
NameFormat:
|
||||
enabled: true
|
||||
|
||||
PrivateNamingConvention:
|
||||
enabled: true
|
||||
prefix: _
|
||||
|
||||
PropertySortOrder:
|
||||
enabled: false
|
||||
|
||||
QualifyingElement:
|
||||
enabled: false
|
||||
|
||||
SelectorFormat:
|
||||
enabled: true
|
||||
convention: hyphenated_BEM
|
||||
class_convention: ^(?!js-).*
|
||||
class_convention_explanation: should not be written in the form js-*
|
||||
|
||||
SingleLinePerProperty:
|
||||
enabled: true
|
||||
allow_single_line_rule_sets: false
|
||||
|
||||
StringQuotes:
|
||||
enabled: true
|
||||
style: double_quotes
|
||||
|
||||
UrlQuotes:
|
||||
# TODO Re-enable once it support double quotes
|
||||
enabled: false
|
||||
|
|
@ -48,7 +48,7 @@ before_script:
|
|||
- "if [ \"$DB\" = \"PGSQL\" ]; then composer require silverstripe/postgresql:2.0.x-dev --prefer-dist; fi"
|
||||
- "if [ \"$DB\" = \"SQLITE\" ]; then composer require silverstripe/sqlite3:2.0.x-dev --prefer-dist; fi"
|
||||
- "if [ \"$CMS_TEST\" = \"1\" ]; then COMPOSER_ROOT_VERSION=4.0.x-dev composer require silverstripe/cms:4.0.x-dev silverstripe/siteconfig:4.0.x-dev silverstripe/reports:4.0.x-dev --prefer-dist; fi"
|
||||
- "if [ \"$NPM_TEST\" = \"1\" ]; then nvm install $TRAVIS_NODE_VERSION && npm install && gem install scss_lint; fi"
|
||||
- "if [ \"$NPM_TEST\" = \"1\" ]; then nvm install $TRAVIS_NODE_VERSION && npm install; fi"
|
||||
- "if [ \"$BEHAT_TEST\" = \"1\" ]; then sh -e /etc/init.d/xvfb start; sleep 3; fi"
|
||||
- "if [ \"$BEHAT_TEST\" = \"1\" ]; then (vendor/bin/selenium-server-standalone > selenium.log 2>&1 &); fi"
|
||||
- "if [ \"$BEHAT_TEST\" = \"1\" ]; then (vendor/bin/serve --bootstrap-file tests/behat/serve-bootstrap.php &> serve.log &); fi"
|
||||
|
|
|
|||
|
|
@ -27,11 +27,11 @@ File naming and style include ordering is inspired by
|
|||
|
||||
## Linting
|
||||
|
||||
We use [SCSSLint](https://github.com/brigade/scss-lint) to ensure all new SCSS
|
||||
written complies with the rules below. Please consider installing it
|
||||
in your development environment (you'll need Ruby). There's also
|
||||
quite a few [SCSSLint IDE integrations](https://github.com/brigade/scss-lint#editor-integration)
|
||||
which highlight any linting errors right in your code.
|
||||
We use [sass-lint](hhttps://github.com/sasstools/sass-lint) to ensure all new SCSS
|
||||
written complies with the rules below. It will be provided as an npm dev dependency.
|
||||
Ther eare also quite a few [sass-lint IDE integrations]https://github.com/sasstools/sass-lint#ide-integration) which highlight any linting errors right in your code.
|
||||
We strongly recommend installing one of these into the editor of your choice, to
|
||||
avoid the frustration of failed pull requests.
|
||||
|
||||
## File and Folder Naming
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
"lock": "npm-shrinkwrap --dev",
|
||||
"test": "NODE_PATH=\"./client/src:./admin/client/src\" jest",
|
||||
"coverage": "NODE_PATH=\"./client/src:./admin/client/src\" jest --coverage",
|
||||
"lint": "eslint client/src & eslint admin/client/src & scss-lint -c .scss-lint.yml"
|
||||
"lint": "eslint client/src & eslint admin/client/src & sass-lint -v"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -86,6 +86,7 @@
|
|||
"react-addons-test-utils": "^15.3.1",
|
||||
"redux-logger": "^2.6.1",
|
||||
"resolve-url-loader": "^1.6.0",
|
||||
"sass-lint": "^1.9.1",
|
||||
"sass-loader": "^4.0.0",
|
||||
"script-loader": "^0.7.0",
|
||||
"semver": "^5.1.0",
|
||||
|
|
|
|||
Loading…
Reference in New Issue