Commit 0b535661 authored by Tim Zallmann's avatar Tim Zallmann

Added Stylelint Setup

Added stylelint to static-analysis
Updated yarn dependencies
CSS Fixes and rule adoptions of stylelint
Added stylelint-scss
Deduplicated yarn.lock to clear dependencies
parent ed7144ad
{
"extends": "stylelint-config-recommended",
"plugins": [
"stylelint-scss"
],
"rules": {
"no-descending-specificity": null,
"font-family-no-missing-generic-family-keyword": null,
"at-rule-no-unknown": [ true, {
ignoreAtRules: ["include", "each", "mixin", "extend", "if", "function", "for", "else", "return"]
}],
"selector-type-no-unknown": [true, {
"ignoreTypes": ["gl-emoji"]
}],
"unit-no-unknown" : [true, {
"ignoreFunctions": ["-webkit-image-set"]
}],
"scss/at-extend-no-missing-placeholder": null,
"scss/at-function-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/at-import-no-partial-leading-underscore": true,
"scss/at-import-partial-extension-blacklist": ["scss"],
"scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/at-rule-no-unknown": true,
"scss/dollar-variable-colon-space-after": "always",
"scss/dollar-variable-colon-space-before": "never",
"scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/selector-no-redundant-nesting-selector": true,
}
}
......@@ -63,15 +63,15 @@
//
// Pass in any number of transitions
@mixin transition($transitions...) {
$unfoldedTransitions: ();
$unfolded-transitions: ();
@each $transition in $transitions {
$unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
$unfolded-transitions: append($unfolded-transitions, unfold-transition($transition), comma);
}
transition: $unfoldedTransitions;
transition: $unfolded-transitions;
}
@mixin disableAllAnimation {
@mixin disable-all-animation {
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
......@@ -92,27 +92,27 @@
animation: none !important;
}
@function unfoldTransition ($transition) {
@function unfold-transition ($transition) {
// Default values
$property: all;
$duration: $general-hover-transition-duration;
$easing: $general-hover-transition-curve; // Browser default is ease, which is what we want
$delay: null; // Browser default is 0, which is what we want
$defaultProperties: ($property, $duration, $easing, $delay);
$default-properties: ($property, $duration, $easing, $delay);
// Grab transition properties if they exist
$unfoldedTransition: ();
@for $i from 1 through length($defaultProperties) {
$unfolded-transition: ();
@for $i from 1 through length($default-properties) {
$p: null;
@if $i <= length($transition) {
$p: nth($transition, $i);
} @else {
$p: nth($defaultProperties, $i);
$p: nth($default-properties, $i);
}
$unfoldedTransition: append($unfoldedTransition, $p);
$unfolded-transition: append($unfolded-transition, $p);
}
@return $unfoldedTransition;
@return $unfolded-transition;
}
.btn {
......
......@@ -228,7 +228,7 @@
.cur {
.avatar {
@include disableAllAnimation;
@include disable-all-animation;
border: 1px solid $white-light;
}
}
......
......@@ -49,13 +49,6 @@
word-wrap: normal;
}
// Multi-line code blocks should scroll horizontally
pre {
code {
white-space: pre;
}
}
kbd {
display: inline-block;
padding: 3px 5px;
......@@ -166,6 +159,10 @@
overflow-x: auto;
border-radius: 2px;
// Multi-line code blocks should scroll horizontally
code {
white-space: pre;
}
&.plain-readme {
background: none;
......@@ -303,11 +300,10 @@ body {
}
.page-title-empty {
margin-top: 0;
margin: 12px 0;
line-height: 1.3;
font-size: 1.25em;
font-weight: $gl-font-weight-bold;
margin: 12px 0;
}
h1,
......
......@@ -251,7 +251,7 @@ $gl-padding-top: 10px;
$gl-sidebar-padding: 22px;
$gl-bar-padding: 3px;
$input-horizontal-padding: 12px;
$browserScrollbarSize: 10px;
$browser-scrollbar-size: 10px;
/*
* Misc
......
......@@ -125,7 +125,7 @@ $dark-il: #de935f;
.diff-line-num.new,
.line_content.new {
@include diff_background($dark-new-bg, $dark-new-idiff, $dark-border);
@include diff-background($dark-new-bg, $dark-new-idiff, $dark-border);
&::before,
a {
......@@ -135,7 +135,7 @@ $dark-il: #de935f;
.diff-line-num.old,
.line_content.old {
@include diff_background($dark-old-bg, $dark-old-idiff, $dark-border);
@include diff-background($dark-old-bg, $dark-old-idiff, $dark-border);
&::before,
a {
......
......@@ -125,7 +125,7 @@ $monokai-gi: #a6e22e;
.diff-line-num.new,
.line_content.new {
@include diff_background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border);
@include diff-background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border);
&::before,
a {
......@@ -135,7 +135,7 @@ $monokai-gi: #a6e22e;
.diff-line-num.old,
.line_content.old {
@include diff_background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border);
@include diff-background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border);
&::before,
a {
......
......@@ -4,7 +4,7 @@
@mixin matchLine {
@mixin match-line {
color: $black-transparent;
background-color: $white-normal;
}
......@@ -45,7 +45,7 @@
&.match .line_content,
.new-nonewline.line_content,
.old-nonewline.line_content {
@include matchLine;
@include match-line;
}
.diff-line-num {
......@@ -121,7 +121,7 @@
}
&.match {
@include matchLine;
@include match-line;
}
&.hll:not(.empty-cell) {
......
......@@ -129,7 +129,7 @@ $solarized-dark-il: #2aa198;
.diff-line-num.new,
.line_content.new {
@include diff_background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border);
@include diff-background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border);
&::before,
a {
......@@ -139,7 +139,7 @@ $solarized-dark-il: #2aa198;
.diff-line-num.old,
.line_content.old {
@include diff_background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border);
@include diff-background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border);
&::before,
a {
......
......@@ -90,7 +90,7 @@ $solarized-light-vg: #268bd2;
$solarized-light-vi: #268bd2;
$solarized-light-il: #2aa198;
@mixin matchLine {
@mixin match-line {
color: $black-transparent;
background: $solarized-light-matchline-bg;
}
......@@ -125,7 +125,7 @@ $solarized-light-il: #2aa198;
&.match .line_content,
&.old-nonewline .line_content,
&.new-nonewline .line_content {
@include matchLine;
@include match-line;
}
td.diff-line-num.hll:not(.empty-cell),
......@@ -136,7 +136,7 @@ $solarized-light-il: #2aa198;
.diff-line-num.new,
.line_content.new {
@include diff_background($solarized-light-new-bg,
@include diff-background($solarized-light-new-bg,
$solarized-light-new-idiff, $solarized-light-border);
&::before,
......@@ -147,7 +147,7 @@ $solarized-light-il: #2aa198;
.diff-line-num.old,
.line_content.old {
@include diff_background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border);
@include diff-background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border);
&::before,
a {
......@@ -168,7 +168,7 @@ $solarized-light-il: #2aa198;
}
.line_content.match {
@include matchLine;
@include match-line;
}
&:not(.diff-expanded) + .diff-expanded,
......
......@@ -70,7 +70,7 @@ $white-gc-color: #999;
$white-gc-bg: #eaf2f5;
@mixin matchLine {
@mixin match-line {
color: $black-transparent;
background-color: $gray-light;
}
......@@ -105,7 +105,7 @@ pre.code,
&.match .line_content,
.new-nonewline.line_content,
.old-nonewline.line_content {
@include matchLine;
@include match-line;
}
.diff-line-num {
......@@ -185,7 +185,7 @@ pre.code,
}
&.match {
@include matchLine;
@include match-line;
}
&.hll:not(.empty-cell) {
......
......@@ -34,7 +34,6 @@
.detail-page-header-actions {
align-self: center;
flex-shrink: 0;
flex: 0 0 auto;
@include media-breakpoint-down(xs) {
......
......@@ -602,7 +602,7 @@
}
}
@mixin diff_background($background, $idiff, $border) {
@mixin diff-background($background, $idiff, $border) {
background: $background;
&.line_content span.idiff {
......
......@@ -182,9 +182,8 @@
.template-selector-dropdowns-wrap {
display: inline-block;
margin-left: 8px;
vertical-align: top;
margin: 5px 0 0 8px;
vertical-align: top;
@media(max-width: map-get($grid-breakpoints, md)-1) {
display: block;
......
......@@ -704,8 +704,8 @@
.scrolling-tabs-container {
.scrolling-tabs {
margin-top: $gl-padding-8;
margin-bottom: $gl-padding-8 - $browserScrollbarSize;
padding-bottom: $browserScrollbarSize;
margin-bottom: $gl-padding-8 - $browser-scrollbar-size;
padding-bottom: $browser-scrollbar-size;
flex-wrap: wrap;
border-bottom: 0;
}
......@@ -713,7 +713,7 @@
.fade-left,
.fade-right {
top: 0;
height: calc(100% - #{$browserScrollbarSize});
height: calc(100% - #{$browser-scrollbar-size});
.fa {
top: 50%;
......
......@@ -16,6 +16,7 @@
"prettier-staged-save": "node ./scripts/frontend/prettier.js save",
"prettier-all": "node ./scripts/frontend/prettier.js check-all",
"prettier-all-save": "node ./scripts/frontend/prettier.js save-all",
"stylelint": "node node_modules/stylelint/bin/stylelint.js app/assets/stylesheets/**/*.*",
"webpack": "webpack --config config/webpack.config.js",
"webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
},
......@@ -168,7 +169,11 @@
"karma-webpack": "^4.0.0-beta.0",
"nodemon": "^1.18.9",
"pixelmatch": "^4.0.2",
"postcss": "^7.0.14",
"prettier": "1.16.1",
"stylelint": "^9.10.1",
"stylelint-config-recommended": "^2.1.0",
"stylelint-scss": "^3.5.3",
"vue-jest": "^3.0.2",
"webpack-dev-server": "^3.1.14",
"yarn-deduplicate": "^1.1.0"
......
......@@ -29,6 +29,7 @@ tasks = [
%w[bin/rake lint:all],
%w[bundle exec license_finder],
%w[yarn run eslint],
%w[yarn run stylelint],
%w[yarn run prettier-all],
%w[bundle exec rubocop --parallel],
%w[scripts/lint-conflicts.sh],
......
This diff is collapsed.
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