From f2f9b1427de6a410f0f1ffb4fe8ef30268348924 Mon Sep 17 00:00:00 2001 From: Sabina Talipova Date: Fri, 19 Apr 2024 13:49:29 +1200 Subject: [PATCH] MNT Replace sass-lint with stylelint --- .sass-lint.yml | 178 ----------------------------------------------- .stylelintrc.yml | 75 ++++++++++++++++++++ package.json | 6 +- 3 files changed, 78 insertions(+), 181 deletions(-) delete mode 100644 .sass-lint.yml create mode 100644 .stylelintrc.yml diff --git a/.sass-lint.yml b/.sass-lint.yml deleted file mode 100644 index 22d07f5b8..000000000 --- a/.sass-lint.yml +++ /dev/null @@ -1,178 +0,0 @@ -# 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/.stylelintrc.yml b/.stylelintrc.yml new file mode 100644 index 000000000..0ef8ff7da --- /dev/null +++ b/.stylelintrc.yml @@ -0,0 +1,75 @@ +defaultSeverity: warning +extends: + - stylelint-config-recommended-scss + - stylelint-config-sass-guidelines + - stylelint-config-standard +plugins: + - stylelint-scss +ignoreFiles: + - 'client/src/styles/legacy/*' + - 'admin/client/src/styles/legacy/*' +rules: + # Line Spacing + rule-empty-line-before: + - always-multi-line + - ignore: + - after-comment + - first-nested + - inside-block + # Selector rules + selector-no-qualifying-type: + - true + - ignore: + - attribute + - class + selector-max-id: 2 + selector-max-compound-selectors: 5 + selector-pseudo-element-colon-notation: + - single + no-descending-specificity: + - true + - ignore: + - selectors-within-list + max-nesting-depth: + - 3 + - ignore: + - blockless-at-rules + - pseudo-classes + # Color rules + color-function-notation: + - legacy + alpha-value-notation: + - number + number-max-precision: 5 + color-named: + - never + - ignore: + - inside-function + # Common rules + function-url-quotes: always + import-notation: string + annotation-no-unknown: + - true + - ignoreAnnotations: + - 'default' + comment-no-empty: + - true + declaration-block-no-duplicate-properties: + - true + no-irregular-whitespace: + - true + block-no-empty: + - true + - ignore: + - comments + font-family-name-quotes: + - always-unless-keyword + # Turn off rules + selector-class-pattern: null + function-no-unknown: null + property-no-vendor-prefix: null + value-no-vendor-prefix: null + font-family-no-missing-generic-family-keyword: null + scss/dollar-variable-colon-space-after: null + scss/no-global-function-names: null + value-keyword-case: null diff --git a/package.json b/package.json index 68115a623..5bd19977e 100644 --- a/package.json +++ b/package.json @@ -23,10 +23,10 @@ "test": "jest", "coverage": "jest --coverage", "lock": "npm-shrinkwrap --dev", - "lint": "eslint client/src && sass-lint client/src", + "lint": "eslint client/src && lint-sass", "lint-js": "eslint client/src", "lint-js-fix": "eslint client/src --fix", - "lint-sass": "sass-lint client/src" + "lint-sass": "stylelint **/client/src/**/*.scss" }, "jest": { "testEnvironment": "jsdom", @@ -49,7 +49,7 @@ }, "devDependencies": { "@silverstripe/eslint-config": "^1.1.0", - "@silverstripe/webpack-config": "^2.0.0", + "@silverstripe/webpack-config": "^2.1.0", "@storybook/addon-actions": "^7.0.18", "@testing-library/react": "^14.0.0", "babel-jest": "^29.3.0",