From c2ebff5c19ada06110f6422e9a74ffde8dacb182 Mon Sep 17 00:00:00 2001 From: Sam Minnee Date: Sat, 17 Sep 2016 15:30:30 +1200 Subject: [PATCH] NEW: Use sass-lint over scss-lint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .sass-lint.yml | 178 ++++++++++++++++++ .scss-lint.yml | 63 ------- .travis.yml | 2 +- .../13_CSS_Coding_Conventions.md | 10 +- package.json | 3 +- 5 files changed, 186 insertions(+), 70 deletions(-) create mode 100644 .sass-lint.yml delete mode 100644 .scss-lint.yml diff --git a/.sass-lint.yml b/.sass-lint.yml new file mode 100644 index 000000000..22d07f5b8 --- /dev/null +++ b/.sass-lint.yml @@ -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 diff --git a/.scss-lint.yml b/.scss-lint.yml deleted file mode 100644 index e652ce651..000000000 --- a/.scss-lint.yml +++ /dev/null @@ -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 diff --git a/.travis.yml b/.travis.yml index 509ed3c35..1fb12941c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -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" diff --git a/docs/en/05_Contributing/13_CSS_Coding_Conventions.md b/docs/en/05_Contributing/13_CSS_Coding_Conventions.md index 11e29403a..f397ad74b 100644 --- a/docs/en/05_Contributing/13_CSS_Coding_Conventions.md +++ b/docs/en/05_Contributing/13_CSS_Coding_Conventions.md @@ -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 diff --git a/package.json b/package.json index 4abdd6369..e711910a3 100644 --- a/package.json +++ b/package.json @@ -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",