diff --git a/.sass-lint.yml b/.sass-lint.yml index d2c1d059e..a84adff3f 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -4,261 +4,34 @@ files: include: app/javascript/styles/**/*.scss ignore: - - app/javascript/styles/reset.scss - -linters: - # Reports when you use improper spacing around ! (the "bang") in !default, - # !global, !important, and !optional flags. - BangFormat: - enabled: false - - # Whether or not to prefer `border: 0` over `border: none`. - BorderZero: - enabled: false - - # 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. - 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: false - - # 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: false - - # 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: false - - # 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: false - - # 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: false - - # 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: false - - # 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: 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: false - - # Do not use parent selector references (&) when they would otherwise - # be unnecessary. - UnnecessaryParentReference: - enabled: false - - # 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 + - app/javascript/styles/mastodon/reset.scss + +rules: + # Disallows + no-color-literals: 0 + no-css-comments: 0 + no-duplicate-properties: 0 + no-ids: 0 + no-important: 0 + no-mergeable-selectors: 0 + no-misspelled-properties: 0 + no-qualifying-elements: 0 + no-transition-all: 0 + no-vendor-prefixes: 0 + + # Nesting + force-element-nesting: 0 + force-attribute-nesting: 0 + force-pseudo-nesting: 0 + + # Name Formats + class-name-format: 0 + leading-zero: 0 + + # Style Guide + attribute-quotes: 0 + hex-length: 0 + indentation: 0 + nesting-depth: 0 + property-sort-order: 0 + quotes: 0 diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss index f78e60597..5a40e7d79 100644 --- a/app/javascript/styles/contrast/diff.scss +++ b/app/javascript/styles/contrast/diff.scss @@ -5,7 +5,7 @@ &-description { input { &::placeholder { - opacity: 1.0; + opacity: 1; } } } diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss index f6cadf029..cfe3b21db 100644 --- a/app/javascript/styles/contrast/variables.scss +++ b/app/javascript/styles/contrast/variables.scss @@ -20,5 +20,5 @@ $highlight-text-color: $classic-highlight-color !default; $action-button-color: #8d9ac2; $inverted-text-color: $black !default; -$lighter-text-color: darken($ui-base-color,6%) !default; +$lighter-text-color: darken($ui-base-color, 6%) !default; $light-text-color: darken($ui-primary-color, 40%) !default; diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index 74d1df8ed..b4fb1d709 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -279,6 +279,8 @@ h5 { } .hero-with-button { + padding-bottom: 16px; + h1 { margin-bottom: 4px; } @@ -286,8 +288,6 @@ h5 { p.lead { margin-bottom: 32px; } - - padding-bottom: 16px; } .header { diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss index 08806599e..faaffb30f 100644 --- a/app/javascript/styles/mastodon/_mixins.scss +++ b/app/javascript/styles/mastodon/_mixins.scss @@ -1,21 +1,21 @@ -@mixin avatar-radius() { +@mixin avatar-radius { border-radius: 4px; background: transparent no-repeat; background-position: 50%; background-clip: padding-box; } -@mixin avatar-size($size:48px) { +@mixin avatar-size($size: 48px) { width: $size; height: $size; background-size: $size $size; } -@mixin search-input() { +@mixin search-input { outline: 0; box-sizing: border-box; width: 100%; - border: none; + border: 0; box-shadow: none; font-family: inherit; background: $ui-base-color; @@ -42,7 +42,7 @@ } } -@mixin search-popout() { +@mixin search-popout { background: $simple-background-color; border-radius: 4px; padding: 10px 14px; diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index dd3b47a8f..373a10260 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -171,7 +171,7 @@ $content-width: 840px; text-transform: none; padding-bottom: 0; margin-bottom: 0; - border-bottom: none; + border-bottom: 0; } & > p { diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 4411ca0b4..b5a77ce94 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -2,7 +2,8 @@ @if type-of($color) == 'color' { $color: str-slice(ie-hex-str($color), 4); } - @return '%23' + unquote($color) + + @return '%23' + unquote($color); } body { @@ -15,7 +16,7 @@ body { text-rendering: optimizelegibility; font-feature-settings: "kern"; text-size-adjust: none; - -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; &.system-font { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 543d20128..8c9a9864d 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -128,7 +128,7 @@ display: inline-block; padding: 0; color: $action-button-color; - border: none; + border: 0; background: transparent; cursor: pointer; transition: color 100ms ease-in; @@ -196,7 +196,7 @@ .text-icon-button { color: $lighter-text-color; - border: none; + border: 0; background: transparent; cursor: pointer; font-weight: 600; @@ -353,12 +353,12 @@ .spoiler-input { height: 0; transform-origin: bottom; - opacity: 0.0; + opacity: 0; &.spoiler-input--visible { height: 36px; margin-bottom: 11px; - opacity: 1.0; + opacity: 1; } } @@ -1193,7 +1193,7 @@ } .account__avatar { - @include avatar-radius(); + @include avatar-radius; position: relative; &-inline { @@ -1203,11 +1203,11 @@ } &-composite { - @include avatar-radius(); + @include avatar-radius; overflow: hidden; & > div { - @include avatar-radius(); + @include avatar-radius; float: left; position: relative; box-sizing: border-box; @@ -1223,12 +1223,12 @@ a .account__avatar { @include avatar-size(48px); &-base { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(36px); } &-overlay { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(24px); position: absolute; @@ -1606,13 +1606,13 @@ a.account__display-name { .icon-button.close { position: absolute; pointer-events: none; - transform: scale(0.0, 1.0) translate(-100%, 0); + transform: scale(0, 1) translate(-100%, 0); opacity: 0; } .compose__action-bar .icon-button { pointer-events: auto; - transform: scale(1.0, 1.0) translate(0, 0); + transform: scale(1, 1) translate(0, 0); opacity: 1; } } @@ -2711,7 +2711,7 @@ a.account__display-name { .setting-text { color: $darker-text-color; background: transparent; - border: none; + border: 0; border-bottom: 2px solid $ui-primary-color; box-sizing: border-box; display: block; @@ -3049,7 +3049,7 @@ a.status-card.compact:hover { & > button { margin: 0; - border: none; + border: 0; padding: 15px 0 15px 15px; color: inherit; background: transparent; @@ -3214,11 +3214,11 @@ a.status-card.compact:hover { } .no-reduce-motion .loading-indicator span { - animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } .no-reduce-motion .loading-indicator__figure { - animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } @keyframes loader-figure { @@ -3385,7 +3385,7 @@ a.status-card.compact:hover { .column-select { &__control { - @include search-input(); + @include search-input; } &__placeholder { @@ -3436,7 +3436,7 @@ a.status-card.compact:hover { } &__menu { - @include search-popout(); + @include search-popout; padding: 0; background: $ui-secondary-color; } @@ -3597,7 +3597,7 @@ a.status-card.compact:hover { .no-reduce-motion .shake-bottom { transform-origin: 50% 100%; - animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both; + animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both; } .emoji-picker-dropdown__menu { @@ -3892,10 +3892,11 @@ a.status-card.compact:hover { } .search__input { + @include search-input; + display: block; padding: 10px; padding-right: 30px; - @include search-input(); } .search__icon { @@ -4503,14 +4504,14 @@ a.status-card.compact:hover { } .actions-modal { + max-height: 80vh; + max-width: 80vw; + .status { overflow-y: auto; max-height: 300px; } - max-height: 80vh; - max-width: 80vw; - .actions-modal__item-label { font-weight: 500; } @@ -4725,7 +4726,7 @@ a.status-card.compact:hover { } .media-gallery__item { - border: none; + border: 0; box-sizing: border-box; display: block; float: left; @@ -5185,7 +5186,7 @@ a.status-card.compact:hover { } .account-gallery__item { - border: none; + border: 0; box-sizing: border-box; display: block; position: relative; @@ -5259,7 +5260,7 @@ a.status-card.compact:hover { } .search-popout { - @include search-popout(); + @include search-popout; } noscript { @@ -5361,14 +5362,14 @@ noscript { .icon-button.close { pointer-events: auto; opacity: 1; - transform: scale(1.0, 1.0) translate(0, 0); + transform: scale(1, 1) translate(0, 0); bottom: 5px; } .compose__action-bar .icon-button { pointer-events: none; opacity: 0; - transform: scale(0.0, 1.0) translate(100%, 0); + transform: scale(0, 1) translate(100%, 0); } } } @@ -5398,7 +5399,7 @@ noscript { box-sizing: border-box; display: block; width: 100%; - border: none; + border: 0; padding: 10px; font-family: $font-monospace, monospace; background: $ui-base-color; diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 0eae4939f..2d68d2b70 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -121,7 +121,7 @@ grid-auto-rows: max-content; .column-0 { - grid-column: 1/3; + grid-column: 1 / 3; grid-row: 1; } @@ -136,7 +136,7 @@ } .column-3 { - grid-column: 1/3; + grid-column: 1 / 3; grid-row: 3; } diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index e49084b5f..4bfd66504 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -1,14 +1,14 @@ .emoji-mart { + font-size: 13px; + display: inline-block; + color: $inverted-text-color; + &, * { box-sizing: border-box; line-height: 1.15; } - font-size: 13px; - display: inline-block; - color: $inverted-text-color; - .emoji-mart-emoji { padding: 6px; } diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 2b8d7a682..f3de87791 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -553,7 +553,7 @@ code { box-sizing: border-box; display: block; width: 100%; - border: none; + border: 0; padding: 10px; font-family: $font-monospace, monospace; background: $ui-base-color; diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index 0d55afda4..12f57b7a9 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -47,7 +47,6 @@ width: 100%; font-size: 14px; color: $inverted-text-color; - display: block; outline: 0; font-family: inherit; background: $simple-background-color; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 940dc8af2..a59f59f59 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -180,7 +180,6 @@ body.rtl { } .fa-ul { - margin-left: 0; margin-left: 2.14285714em; } diff --git a/package.json b/package.json index 6c476bd79..26ff64851 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,10 @@ "build:production": "cross-env RAILS_ENV=production NODE_ENV=production ./bin/webpack", "manage:translations": "node ./config/webpack/translationRunner.js", "start": "node ./streaming/index.js", - "test": "${npm_execpath} run test:lint && ${npm_execpath} run test:jest", - "test:lint": "eslint --ext=js .", - "test:lint:sass": "sass-lint .", + "test": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:jest", + "test:lint": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:lint:sass", + "test:lint:js": "eslint --ext=js .", + "test:lint:sass": "sass-lint -v", "test:jest": "cross-env NODE_ENV=test jest --coverage" }, "repository": {