Commit c84863d1 authored by Vitaly Slobodin's avatar Vitaly Slobodin Committed by Natalia Tepluhina

Replace scss with stylelint in documentation

Replace all scss-lint mentions with stylelint.
parent fe24839d
......@@ -185,7 +185,7 @@
- "vendor/assets/**/*"
- ".gitlab/ci/**/*"
- ".{eslintignore,gitattributes,nvmrc,prettierrc,stylelintrc,yamllint}"
- ".{codeclimate,eslintrc,gitlab-ci,haml-lint,haml-lint_todo,rubocop,rubocop_todo,rubocop_manual_todo,scss-lint}.yml"
- ".{codeclimate,eslintrc,gitlab-ci,haml-lint,haml-lint_todo,rubocop,rubocop_todo,rubocop_manual_todo}.yml"
- "*_VERSION"
- "Gemfile{,.lock}"
- "Rakefile"
......@@ -207,7 +207,7 @@
- "vendor/assets/**/*"
- ".gitlab/ci/**/*"
- ".{eslintignore,gitattributes,nvmrc,prettierrc,stylelintrc,yamllint}"
- ".{codeclimate,eslintrc,gitlab-ci,haml-lint,haml-lint_todo,rubocop,rubocop_todo,rubocop_manual_todo,scss-lint}.yml"
- ".{codeclimate,eslintrc,gitlab-ci,haml-lint,haml-lint_todo,rubocop,rubocop_todo,rubocop_manual_todo}.yml"
- "*_VERSION"
- "Gemfile{,.lock}"
- "Rakefile"
......@@ -232,7 +232,7 @@
- "vendor/assets/**/*"
- ".gitlab/ci/**/*"
- ".{eslintignore,gitattributes,nvmrc,prettierrc,stylelintrc,yamllint}"
- ".{codeclimate,eslintrc,gitlab-ci,haml-lint,haml-lint_todo,rubocop,rubocop_todo,rubocop_manual_todo,scss-lint}.yml"
- ".{codeclimate,eslintrc,gitlab-ci,haml-lint,haml-lint_todo,rubocop,rubocop_todo,rubocop_manual_todo}.yml"
- "*_VERSION"
- "Gemfile{,.lock}"
- "Rakefile"
......@@ -253,7 +253,7 @@
- "vendor/assets/**/*"
- ".gitlab/ci/**/*"
- ".{eslintignore,gitattributes,nvmrc,prettierrc,stylelintrc,yamllint}"
- ".{codeclimate,eslintrc,gitlab-ci,haml-lint,haml-lint_todo,rubocop,rubocop_todo,rubocop_manual_todo,scss-lint}.yml"
- ".{codeclimate,eslintrc,gitlab-ci,haml-lint,haml-lint_todo,rubocop,rubocop_todo,rubocop_manual_todo}.yml"
- "*_VERSION"
- "Gemfile{,.lock}"
- "Rakefile"
......
# Linter Documentation:
# https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md
scss_files:
- 'app/assets/stylesheets/**/*.scss'
- 'ee/app/assets/stylesheets/**/*.scss'
exclude:
- 'app/assets/stylesheets/pages/emojis.scss'
- 'app/assets/stylesheets/startup/startup-*.scss'
- 'app/assets/stylesheets/lazy_bundles/select2.scss'
linters:
# Reports when you use improper spacing around ! (the "bang") in !default,
# !global, !important, and !optional flags.
BangFormat:
enabled: true
# Whether or not to prefer `border: 0` over `border: none`.
BorderZero:
enabled: true
# Reports when you define a rule set using a selector with chained classes
# (a.k.a. adjoining classes).
ChainedClasses:
enabled: false
# Prefer hexadecimal color codes over color keywords.
# (e.g. `color: green` is a color keyword)
ColorKeyword:
enabled: false
# Prefer color literals (keywords or hexadecimal codes) to be used only in
# variable declarations. They should be referred to via variables everywhere
# else.
ColorVariable:
enabled: true
# Which form of comments to prefer in CSS.
Comment:
enabled: false
# Reports @debug statements (which you probably left behind accidentally).
DebugStatement:
enabled: false
# Rule sets should be ordered as follows:
# - @extend declarations
# - @include declarations without inner @content
# - properties
# - @include declarations with inner @content
# - nested rule sets.
# Disabled to minimize Bootstrap migration footprint
DeclarationOrder:
enabled: false
# `scss-lint:disable` control comments should be preceded by a comment
# explaining why these linters are being disabled for this file.
# See https://github.com/brigade/scss-lint#disabling-linters-via-source for
# more information.
DisableLinterReason:
enabled: true
# Reports when you define the same property twice in a single rule set.
DuplicateProperty:
enabled: true
ignore_consecutive:
- cursor
# Separate rule, function, and mixin declarations with empty lines.
EmptyLineBetweenBlocks:
enabled: true
# Reports when you have an empty rule set.
EmptyRule:
enabled: true
# Reports when you have an @extend directive.
ExtendDirective:
enabled: false
# Files should always have a final newline. This results in better diffs
# when adding lines to the file, since SCM systems such as git won't
# think that you touched the last line.
FinalNewline:
enabled: true
# HEX colors should use three-character values where possible.
HexLength:
enabled: false
# HEX color values should use lower-case colors to differentiate between
# letters and numbers, e.g. `#E3E3E3` vs. `#e3e3e3`.
HexNotation:
enabled: true
# Avoid using ID selectors.
IdSelector:
enabled: false
# The basenames of @imported SCSS partials should not begin with an
# underscore and should not include the filename extension.
ImportPath:
enabled: true
# Avoid using !important in properties. It is usually indicative of a
# misunderstanding of CSS specificity and can lead to brittle code.
ImportantRule:
enabled: false
# Indentation should always be done in increments of 2 spaces.
Indentation:
enabled: true
width: 2
# Don't write leading zeros for numeric values with a decimal point.
LeadingZero:
enabled: false
# Reports when you define the same selector twice in a single sheet.
MergeableSelector:
enabled: true
# Functions, mixins, variables, and placeholders should be declared
# with all lowercase letters and hyphens instead of underscores.
NameFormat:
enabled: false
# Avoid nesting selectors too deeply.
NestingDepth:
enabled: true
max_depth: 6
# Always use placeholder selectors in @extend.
PlaceholderInExtend:
enabled: false
# Sort properties in a strict order.
PropertySortOrder:
enabled: false
# Reports when you use an unknown or disabled CSS property
# (ignoring vendor-prefixed properties).
PropertySpelling:
enabled: true
# Configure which units are allowed for property values.
PropertyUnits:
enabled: false
# Pseudo-elements, like ::before, and ::first-letter, should be declared
# with two colons. Pseudo-classes, like :hover and :first-child, should
# be declared with one colon.
PseudoElement:
enabled: true
# Avoid qualifying elements in selectors (also known as "tag-qualifying").
QualifyingElement:
enabled: false
# Don't write selectors with a depth of applicability greater than 3.
SelectorDepth:
enabled: false
# Selectors should always use hyphenated-lowercase, rather than camelCase or
# snake_case.
SelectorFormat:
enabled: false
convention: hyphenated_lowercase
# Prefer the shortest shorthand form possible for properties that support it.
Shorthand:
enabled: true
# Each property should have its own line, except in the special case of
# single line rulesets.
SingleLinePerProperty:
enabled: true
allow_single_line_rule_sets: true
# Split selectors onto separate lines after each comma, and have each
# individual selector occupy a single line.
SingleLinePerSelector:
enabled: true
# Commas in lists should be followed by a space.
SpaceAfterComma:
enabled: true
# Comment literals should be followed by a space.
SpaceAfterComment:
enabled: false
# Properties should be formatted with a single space separating the colon
# from the property's value.
SpaceAfterPropertyColon:
enabled: true
# Properties should be formatted with no space between the name and the
# colon.
SpaceAfterPropertyName:
enabled: true
# Variables should be formatted with a single space separating the colon
# from the variable's value.
SpaceAfterVariableColon:
enabled: true
# Variables should be formatted with no space between the name and the
# colon.
SpaceAfterVariableName:
enabled: false
# Operators should be formatted with a single space on both sides of an
# infix operator.
SpaceAroundOperator:
enabled: true
# Opening braces should be preceded by a single space.
SpaceBeforeBrace:
enabled: true
# Parentheses should not be padded with spaces.
SpaceBetweenParens:
enabled: false
# Enforces that string literals should be written with a consistent form
# of quotes (single or double).
StringQuotes:
enabled: false
# Property values, @extend, @include, and @import directives, and variable
# declarations should always end with a semicolon.
TrailingSemicolon:
enabled: true
# Reports lines containing trailing whitespace.
TrailingWhitespace:
enabled: true
# Don't write trailing zeros for numeric values with a decimal point.
TrailingZero:
enabled: false
# Don't use the `all` keyword to specify transition properties.
TransitionAll:
enabled: false
# Numeric values should not contain unnecessary fractional portions.
UnnecessaryMantissa:
enabled: true
# Do not use parent selector references (&) when they would otherwise
# be unnecessary.
UnnecessaryParentReference:
enabled: true
# URLs should be valid and not contain protocols or domain names.
UrlFormat:
enabled: true
# URLs should always be enclosed within quotes.
UrlQuotes:
enabled: true
# Properties, like color and font, are easier to read and maintain
# when defined using variables rather than literals.
VariableForProperty:
enabled: false
# Avoid vendor prefixes. Or rather: don't write them yourself.
VendorPrefix:
enabled: false
# Omit length units on zero values, e.g. `0px` vs. `0`.
ZeroUnit:
enabled: true
{
"extends": ["@gitlab/stylelint-config"],
"ignoreFiles": [
"app/assets/stylesheets/pages/emojis.scss",
"app/assets/stylesheets/startup/startup-*.scss",
"app/assets/stylesheets/lazy_bundles/select2.scss",
"app/assets/stylesheets/highlight/themes/*.scss"
"app/assets/stylesheets/highlight/themes/*.scss",
"app/assets/stylesheets/lazy_bundles/cropper.css"
],
"plugins":[
"./scripts/frontend/stylelint/stylelint-duplicate-selectors.js",
"./scripts/frontend/stylelint/stylelint-utility-classes.js",
"stylelint-scss"
],
"rules":{
"at-rule-blacklist":[
"at-rule-disallowed-list": [
"debug"
],
"at-rule-no-unknown":null,
"at-rule-no-vendor-prefix":true,
"block-no-empty":true,
"block-opening-brace-space-before":"always",
"color-hex-case":"lower",
"color-hex-length":"short",
"color-named":"never",
"color-no-invalid-hex":true,
"declaration-bang-space-after":"never",
"declaration-bang-space-before":"always",
"declaration-block-semicolon-newline-after":"always",
"declaration-block-semicolon-space-before":"never",
"declaration-block-single-line-max-declarations":1,
"declaration-block-trailing-semicolon":"always",
"declaration-colon-space-after":"always-single-line",
"declaration-colon-space-before":"never",
"declaration-property-value-blacklist":{
"at-rule-no-unknown": null,
"at-rule-no-vendor-prefix": true,
"block-no-empty": true,
"block-opening-brace-space-before": "always",
"color-hex-case": "lower",
"color-hex-length": "short",
"color-named": "never",
"color-no-invalid-hex": true,
"declaration-bang-space-after": "never",
"declaration-bang-space-before": "always",
"declaration-block-semicolon-newline-after": "always",
"declaration-block-semicolon-space-before": "never",
"declaration-block-single-line-max-declarations": 1,
"declaration-block-trailing-semicolon": "always",
"declaration-colon-space-after": "always-single-line",
"declaration-colon-space-before": "never",
"declaration-property-value-disallowed-list": {
"border":[
"none"
],
......@@ -47,12 +48,12 @@
"none"
]
},
"function-comma-space-after":"always-single-line",
"function-parentheses-space-inside":"never",
"function-url-quotes":"always",
"indentation":2,
"length-zero-no-unit":true,
"max-nesting-depth":[
"function-comma-space-after": "always-single-line",
"function-parentheses-space-inside": "never",
"function-url-quotes": "always",
"indentation": 2,
"length-zero-no-unit": true,
"max-nesting-depth": [
6,
{
"ignoreAtRules":[
......@@ -111,7 +112,6 @@
"shorthand-property-no-redundant-values":true,
"string-quotes":"single",
"value-no-vendor-prefix": [true, { "ignoreValues": ["sticky"] }],
"stylelint-gitlab/duplicate-selectors":[true,{ "severity": "warning" }],
"stylelint-gitlab/utility-classes":[true,{ "severity": "warning" }],
"declaration-block-no-duplicate-properties": [
true,
......
......@@ -375,7 +375,6 @@ group :development, :test do
gem 'gitlab-styles', '~> 6.0.0', require: false
gem 'scss_lint', '~> 0.59.0', require: false
gem 'haml_lint', '~> 0.36.0', require: false
gem 'bundler-audit', '~> 0.7.0.1', require: false
......
......@@ -1107,8 +1107,6 @@ GEM
addressable (>= 2.3.5)
faraday (> 0.8, < 2.0)
scientist (1.5.0)
scss_lint (0.59.0)
sass (~> 3.5, >= 3.5.5)
securecompare (1.0.0)
seed-fu (2.3.7)
activerecord (>= 3.1)
......@@ -1515,7 +1513,6 @@ DEPENDENCIES
rugged (~> 1.0.1)
sanitize (~> 5.2.1)
sassc-rails (~> 2.1.0)
scss_lint (~> 0.59.0)
seed-fu (~> 2.3.7)
selenium-webdriver (~> 3.142)
sentry-raven (~> 3.0)
......
......@@ -1035,7 +1035,6 @@ table.code {
auto;
// Retina cursor
// scss-lint:disable DuplicateProperty
cursor: image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x,
image-url('illustrations/image_comment_light_cursor@2x.svg') 2x) $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
auto;
......
......@@ -8,9 +8,8 @@ html {
body {
// Improves readability for dyslexic users; supported only in Chrome/Safari so far
// scss-lint:disable PropertySpelling
text-decoration-skip: ink;
// scss-lint:enable PropertySpelling
&.navless {
background-color: $white !important;
}
......
......@@ -433,7 +433,6 @@
@mixin middle-dot-divider {
&::after {
// Duplicate `content` property used as a fallback
// scss-lint:disable DuplicateProperty
content: '\00B7'; // middle dot fallback if browser does not support alternative content
content: '\00B7' / ''; // tell screen readers to ignore the content https://www.w3.org/TR/css-content-3/#accessibility
padding: 0 0.375rem;
......
......@@ -699,13 +699,11 @@ textarea {
opacity: 1; // FF defaults to 0.54
}
// scss-lint:disable PseudoElement
// support Edge vendor prefix
&::-ms-input-placeholder {
color: $gl-text-color-tertiary;
}
// scss-lint:disable PseudoElement
// support IE vendor prefix
&:-ms-input-placeholder {
color: $gl-text-color-tertiary;
......
// Disabled to use the color map for creating color schemes
// scss-lint:disable ColorVariable
$conflict-colors: (
white-header-head-neutral : #e1fad7,
white-line-head-neutral : #effdec,
......@@ -116,4 +115,3 @@ $conflict-colors: (
none_line_not_chosen : $gray-light
);
// scss-lint:enable ColorVariable
......@@ -3,7 +3,6 @@
// These are client-specific rules, ignore some linting rules
//
// stylelint-disable property-no-vendor-prefix, property-no-unknown, length-zero-no-unit
// scss-lint:disable PropertySpelling, ZeroUnit
body,
table,
......
......@@ -105,6 +105,7 @@
border: 0;
&.table-row-header {
// stylelint-disable-next-line
background-color: none;
border: 0;
font-weight: bold;
......
......@@ -92,6 +92,7 @@
.notification-dot {
will-change: border-color, background-color;
// stylelint-disable-next-line
border-color: $nav-svg-color + 33;
}
......
---
title: Replace scss with stylelint in documentation
merge_request: 53700
author:
type: added
......@@ -59,7 +59,7 @@ Before you push your changes, Lefthook automatically runs the following checks:
- ES lint: Run `yarn run internal:eslint` checks (with the [`.eslintrc.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.eslintrc.yml) configuration) on the modified `*.{js,vue}` files. Tags: `frontend`, `style`.
- HAML lint: Run `bundle exec haml-lint` checks (with the [`.haml-lint.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.haml-lint.yml) configuration) on the modified `*.html.haml` files. Tags: `view`, `haml`, `style`.
- Markdown lint: Run `yarn markdownlint` checks on the modified `*.md` files. Tags: `documentation`, `style`.
- SCSS lint: Run `bundle exec scss-lint` checks (with the [`.scss-lint.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.scss-lint.yml) configuration) on the modified `*.scss{,.css}` files. Tags: `stylesheet`, `css`, `style`.
- SCSS lint: Run `yarn stylelint` checks (with the [`.stylelintrc`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.stylelintrc) configuration) on the modified `*.scss{,.css}` files. Tags: `stylesheet`, `css`, `style`.
- RuboCop: Run `bundle exec rubocop` checks (with the [`.rubocop.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.rubocop.yml) configuration) on the modified `*.rb` files. Tags: `backend`, `style`.
- Vale: Run `vale` checks (with the [`.vale.ini`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.vale.ini) configuration) on the modified `*.md` files. Tags: `documentation`, `style`.
......
......@@ -104,7 +104,7 @@ See the relevant style guides for our guidelines and for information on linting:
- [JavaScript](style/javascript.md). Our guide is based on
the excellent [Airbnb](https://github.com/airbnb/javascript) style guide with a few small
changes.
- [SCSS](style/scss.md): our SCSS conventions which are enforced through [`scss-lint`](https://github.com/sds/scss-lint).
- [SCSS](style/scss.md): [our SCSS conventions](https://gitlab.com/gitlab-org/frontend/gitlab-stylelint-config) which are enforced through [`stylelint`](https://stylelint.io).
- [HTML](style/html.md). Guidelines for writing HTML code consistent with the rest of the codebase.
- [Vue](style/vue.md). Guidelines and conventions for Vue code may be found here.
......
......@@ -16,7 +16,7 @@ changes.
## SCSS style guide
Our [SCSS conventions](scss.md) which are enforced through [`scss-lint`](https://github.com/sds/scss-lint).
Our [SCSS conventions](scss.md) which are enforced through [`stylelint`](https://stylelint.io).
## HTML style guide
......
......@@ -132,16 +132,14 @@ Before adding a new variable for a color or a size, guarantee:
## Linting
We use [SCSS Lint](https://github.com/sds/scss-lint) to check for style guide conformity. It uses the
ruleset in `.scss-lint.yml`, which is located in the home directory of the
project.
We use [stylelint](https://stylelint.io) to check for style guide conformity. It uses the
ruleset in `.stylelintrc` and rules from [our SCSS configuration](https://gitlab.com/gitlab-org/frontend/gitlab-stylelint-config). `.stylelintrc` is located in the home directory of the project.
To check if any warnings are produced by your changes, run `rake
scss_lint` in the GitLab directory. SCSS Lint also runs in GitLab CI/CD to
To check if any warnings are produced by your changes, run `yarn stylelint` in the GitLab directory. Stylelint also runs in GitLab CI/CD to
catch any warnings.
If the Rake task is throwing warnings you don't understand, SCSS Lint's
documentation includes [a full list of their linters](https://github.com/sds/scss-lint/blob/master/lib/scss_lint/linter/README.md).
documentation includes [a full list of their rules](https://stylelint.io/user-guide/rules/list).
### Fixing issues
......
......@@ -82,10 +82,10 @@ $subscriptions-full-width-lg: 541px;
&.payment-method {
// Use literals here to avoid dark theme from changing the color
// scss-lint:disable ColorVariable
// stylelint-disable-next-line
background-color: #fff;
// stylelint-disable-next-line
color: #303030;
// scss-lint:enable ColorVariable
}
}
......@@ -152,10 +152,9 @@ $subscriptions-full-width-lg: 541px;
}
iframe {
// Use literal to avoid dark theme from changing the color
// scss-lint:disable ColorVariable
// Use literals here to avoid dark theme from changing the color
// stylelint-disable-next-line
background-color: #fff;
// scss-lint:enable ColorVariable
margin: -4px;
width: 100% !important;
}
......@@ -182,6 +181,7 @@ $subscriptions-full-width-lg: 541px;
font-weight: $gl-font-weight-normal;
}
// stylelint-disable-next-line
.field_with_errors {
@include gl-flex-grow-1;
display: inline;
......
......@@ -18,12 +18,11 @@ pre-push:
files: git diff --name-only $(git merge-base origin/master HEAD)..HEAD
glob: "doc/*.md"
run: yarn markdownlint {files}
scss-lint:
stylelint:
tags: stylesheet css style
files: git diff --name-only $(git merge-base origin/master HEAD)..HEAD
glob: "*.scss{,.css}"
exclude: "app/assets/stylesheets/pages/emojis.scss"
run: bundle exec scss-lint --config .scss-lint.yml {files}
run: yarn stylelint -q {files}
prettier:
tags: frontend style
files: git diff --name-only $(git merge-base origin/master HEAD)..HEAD
......
......@@ -33,7 +33,6 @@ unless Rails.env.production?
tasks = %w[
config_lint
lint:haml
scss_lint
gettext:lint
lint:static_verification
gitlab:sidekiq:all_queues_yml:check
......
# frozen_string_literal: true
unless Rails.env.production?
require 'scss_lint/rake_task'
SCSSLint::RakeTask.new do |t|
t.config = '.scss-lint.yml'
# See https://github.com/brigade/scss-lint/issues/726
# Hack, otherwise linter won't respect scss_files option in config file.
t.files = []
end
end
......@@ -29,7 +29,6 @@ class StaticAnalysis
%w[yarn run lint:prettier] => 124,
%w[bin/rake gettext:lint] => 96,
%w[bundle exec license_finder] => 49,
%w[bin/rake scss_lint] => 38,
%w[bin/rake lint:static_verification] => 22,
%w[bin/rake gitlab:sidekiq:all_queues_yml:check] => 13,
(Gitlab.ee? ? %w[bin/rake gitlab:sidekiq:sidekiq_queues_yml:check] : nil) => 13,
......
......@@ -145,7 +145,6 @@ module Tooling
\.nvmrc |
\.prettierignore |
\.prettierrc |
\.scss-lint.yml |
\.stylelintrc |
\.haml-lint.yml |
\.haml-lint_todo.yml |
......
......@@ -5,5 +5,4 @@ source 'https://rubygems.org'
gem 'overcommit'
gem 'gitlab-styles', '~> 5.4.0', require: false
gem 'scss_lint', '~> 0.56.0', require: false
gem 'haml_lint', '~> 0.34.0', require: false
......@@ -10,7 +10,6 @@ GEM
ast (2.4.1)
childprocess (3.0.0)
concurrent-ruby (1.1.7)
ffi (1.12.2)
gitlab-styles (5.4.0)
rubocop (~> 0.89.1)
rubocop-gitlab-security (~> 0.1.0)
......@@ -37,10 +36,6 @@ GEM
ast (~> 2.4.1)
rack (2.2.3)
rainbow (3.0.0)
rake (12.3.3)
rb-fsevent (0.10.2)
rb-inotify (0.9.10)
ffi (>= 0.5.0, < 2)
regexp_parser (1.8.2)
rexml (3.2.4)
rubocop (0.89.1)
......@@ -67,14 +62,6 @@ GEM
rubocop (~> 0.87)
rubocop-ast (>= 0.7.1)
ruby-progressbar (1.10.1)
sass (3.5.5)
sass-listen (~> 4.0.0)
sass-listen (4.0.0)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
scss_lint (0.56.0)
rake (>= 0.9, < 13)
sass (~> 3.5.3)
sysexits (1.2.0)
temple (0.8.2)
thread_safe (0.3.6)
......@@ -91,7 +78,6 @@ DEPENDENCIES
gitlab-styles (~> 5.4.0)
haml_lint (~> 0.34.0)
overcommit
scss_lint (~> 0.56.0)
BUNDLED WITH
2.1.4
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment