Esanders has uploaded a new change for review. https://gerrit.wikimedia.org/r/289235
Change subject: [WIP] Add more stylelint rules ...................................................................... [WIP] Add more stylelint rules Change-Id: I081473cf2e826cb9aa2c08a0b404c32370d9a95b --- M .stylelintrc M demos/styles/demo.css M src/styles/layouts/FieldLayout.less M src/styles/widgets/NumberInputWidget.less M src/styles/widgets/SelectFileWidget.less M src/styles/widgets/TextInputWidget.less M src/themes/apex/widgets.less M src/themes/mediawiki/common.less M src/themes/mediawiki/widgets.less M src/themes/mediawiki/windows.less 10 files changed, 156 insertions(+), 58 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/35/289235/1 diff --git a/.stylelintrc b/.stylelintrc index b10435c..5707f13 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,8 +1,96 @@ { "rules": { + + "indentation": [ "tab" ], + "max-empty-lines": 1, + "no-eol-whitespace": true, + "no-missing-eof-newline": true, + + "no-duplicate-selectors": true, + "declaration-no-important": true, + "selector-no-id": true, + + "no-unknown-animations": true, + "color-hex-case": [ "lower" ], "color-hex-length": [ "short" ], "color-named": [ "never" ], - "color-no-invalid-hex": true + "color-no-invalid-hex": true, + + "font-family-name-quotes": [ "single-unless-keyword" ], + "font-weight-notation": [ "named-where-possible" ], + + "function-calc-no-unspaced-operator": true, + "function-comma-newline-after": "never-multi-line", + "function-comma-newline-before": "never-multi-line", + "function-comma-space-after": [ "always" ], + "function-comma-space-before": [ "never" ], + "function-parentheses-newline-inside": [ "never-multi-line" ], + "function-parentheses-space-inside": [ "always" ], + "function-url-quotes": [ "none" ], + "function-whitespace-after": [ "always" ], + + "value-list-comma-newline-after": [ "never-multi-line" ], + "value-list-comma-newline-before": [ "always-multi-line" ], + "value-list-comma-space-after": [ "always-single-line" ], + "value-list-comma-space-before": [ "never" ], + + "declaration-bang-space-after": [ "never" ], + "declaration-bang-space-before": [ "always" ], + "declaration-colon-space-after": [ "always" ], + "declaration-colon-space-before": [ "never" ], + + "string-no-newline": true, + "string-quotes": [ "single" ], + + "declaration-block-no-duplicate-properties": [ true, { ignore: [ "consecutive-duplicates" ] } ], + "declaration-block-no-shorthand-property-overrides": true, + + "declaration-block-semicolon-newline-after": [ "always" ], + "declaration-block-semicolon-newline-before": [ "never-multi-line" ], + "declaration-block-semicolon-space-after": [ "always-single-line" ], + "declaration-block-semicolon-space-before": [ "never" ], + "declaration-block-single-line-max-declarations": 1, + "declaration-block-trailing-semicolon": [ "always" ], + + "block-closing-brace-newline-after": [ "always" ], + "block-closing-brace-newline-before": [ "always-multi-line" ], + "block-closing-brace-space-before": [ "always-single-line" ], + "block-opening-brace-newline-after": [ "always-multi-line" ], + "block-opening-brace-space-after": [ "always-single-line" ], + "block-opening-brace-space-before": [ "always" ], + + "selector-combinator-space-after": [ "always" ], + "selector-combinator-space-before": [ "always" ], + "selector-no-vendor-prefix": true, + "selector-root-no-composition": true, + "selector-pseudo-element-colon-notation": [ "double" ], + + "selector-list-comma-newline-after": [ "always" ], + "selector-list-comma-newline-before": [ "never-multi-line" ], + "selector-list-comma-space-after": [ "always-single-line" ], + "selector-list-comma-space-before": [ "never" ], + + "media-feature-colon-space-after": [ "always" ], + "media-feature-colon-space-before": [ "never" ], + "media-feature-name-no-vendor-prefix": true, + "media-feature-no-missing-punctuation": true, + "media-feature-range-operator-space-after": [ "always" ], + "media-feature-range-operator-space-before": [ "always" ], + + "media-query-parentheses-space-inside": [ "always" ], + + "media-query-list-comma-newline-after": [ "always-multi-line" ], + "media-query-list-comma-newline-before": [ "never-multi-line" ], + "media-query-list-comma-space-after": [ "always-single-line" ], + "media-query-list-comma-space-before": [ "never" ], + + "at-rule-empty-line-before": [ "always", { + except: [ "blockless-group", "first-nested" ], + ignore: ["after-comment"], + } ], + "at-rule-name-case": "lower", + "at-rule-name-space-after": "always-single-line" + } -} \ No newline at end of file +} diff --git a/demos/styles/demo.css b/demos/styles/demo.css index be9dc89..d1014ad 100644 --- a/demos/styles/demo.css +++ b/demos/styles/demo.css @@ -136,7 +136,7 @@ line-height: 1.6em; color: #999; text-align: center; - content: "→"; + content: '→'; } .oo-ui-demo-console-toggle:hover::after, @@ -146,7 +146,7 @@ } .oo-ui-demo-console-expanded .oo-ui-demo-console-toggle::after { - content: "↑"; + content: '↑'; } .oo-ui-demo-console-collapsed .oo-ui-demo-console-log, @@ -180,7 +180,7 @@ width: 20px; text-align: center; bottom: 0; - content: "→"; + content: '→'; } .oo-ui-demo-console-log-line-error { diff --git a/src/styles/layouts/FieldLayout.less b/src/styles/layouts/FieldLayout.less index 799f9f4..a1d18fa 100644 --- a/src/styles/layouts/FieldLayout.less +++ b/src/styles/layouts/FieldLayout.less @@ -3,13 +3,13 @@ .oo-ui-fieldLayout { display: block; - &:before, - &:after { - content: " "; + &::before, + &::after { + content: ' '; display: table; } - &:after { + &::after { clear: both; } diff --git a/src/styles/widgets/NumberInputWidget.less b/src/styles/widgets/NumberInputWidget.less index 2a9ea3d..23107fb 100644 --- a/src/styles/widgets/NumberInputWidget.less +++ b/src/styles/widgets/NumberInputWidget.less @@ -19,13 +19,13 @@ &-field > .oo-ui-textInputWidget { width: 100%; - [type="number"]::-webkit-outer-spin-button, - [type="number"]::-webkit-inner-spin-button { + [type='number']::-webkit-outer-spin-button, + [type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } - [type="number"] { + [type='number'] { -moz-appearance: textfield; } } diff --git a/src/styles/widgets/SelectFileWidget.less b/src/styles/widgets/SelectFileWidget.less index 759b048..555f946 100644 --- a/src/styles/widgets/SelectFileWidget.less +++ b/src/styles/widgets/SelectFileWidget.less @@ -12,7 +12,7 @@ position: relative; overflow: hidden; - > [type="file"] { + > [type='file'] { position: absolute; margin: 0; top: 0; @@ -30,7 +30,7 @@ } &.oo-ui-widget-disabled { - & > .oo-ui-buttonElement-button > [type="file"] { + & > .oo-ui-buttonElement-button > [type='file'] { display: none; } } diff --git a/src/styles/widgets/TextInputWidget.less b/src/styles/widgets/TextInputWidget.less index 43c0b1b..d807a55 100644 --- a/src/styles/widgets/TextInputWidget.less +++ b/src/styles/widgets/TextInputWidget.less @@ -21,7 +21,7 @@ // Normalize styling for `<input type=search>` and // remove proprietary vendor UI extensions - [type="search"] { + [type='search'] { // Safari 5, Chrome -webkit-appearance: textfield; diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less index 4121eef..4a18c09 100644 --- a/src/themes/apex/widgets.less +++ b/src/themes/apex/widgets.less @@ -828,9 +828,9 @@ margin-top: @anchor-size; } - .oo-ui-popupWidget-anchor:before, - .oo-ui-popupWidget-anchor:after { - content: ""; + .oo-ui-popupWidget-anchor::before, + .oo-ui-popupWidget-anchor::after { + content: ''; position: absolute; width: 0; height: 0; @@ -839,14 +839,14 @@ border-top: 0; } - .oo-ui-popupWidget-anchor:before { + .oo-ui-popupWidget-anchor::before { bottom: -@anchor-size - 1px; left: -@anchor-size; border-bottom-color: #aaa; border-width: @anchor-size + 1px; } - .oo-ui-popupWidget-anchor:after { + .oo-ui-popupWidget-anchor::after { bottom: -@anchor-size - 1px; left: -@anchor-size + 1px; border-bottom-color: #fff; @@ -1055,10 +1055,23 @@ } .oo-ui-progressBarWidget-slide-frames () { - from { margin-left: -40%; } - to { margin-left: 100%; } + from { + margin-left: -40%; + } + to { + margin-left: 100%; + } } - @-webkit-keyframes oo-ui-progressBarWidget-slide { .oo-ui-progressBarWidget-slide-frames } - @-moz-keyframes oo-ui-progressBarWidget-slide { .oo-ui-progressBarWidget-slide-frames } - @keyframes oo-ui-progressBarWidget-slide { .oo-ui-progressBarWidget-slide-frames } + + @-webkit-keyframes oo-ui-progressBarWidget-slide { + .oo-ui-progressBarWidget-slide-frames; + } + + @-moz-keyframes oo-ui-progressBarWidget-slide { + .oo-ui-progressBarWidget-slide-frames; + } + + @keyframes oo-ui-progressBarWidget-slide { + .oo-ui-progressBarWidget-slide-frames; + } } diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less index 389eeef..affb1ec 100644 --- a/src/themes/mediawiki/common.less +++ b/src/themes/mediawiki/common.less @@ -36,7 +36,6 @@ // Invalid Widget (validation error feedback) @color-invalid: #f00; - // Box Sizes @max-width-input-default: 50em; @@ -76,7 +75,7 @@ // Theme mixins -// Workaround for Safari 8 bug. Combining a selector like `input[type="checkbox"]:checked + span` +// Workaround for Safari 8 bug. Combining a selector like `input[type='checkbox']:checked + span` // with transition on background-size, background-color, and a single background-image using SVG // causes the selector to sometimes not be applied. (T89309) // @@ -96,4 +95,4 @@ @color-constructive: #00af89; @color-constructive-hover: #008064; @color-constructive-active: #005946; -@color-constructive-fade: #e6f7f3; // equivalents `fade( @color-constructive, 10% )` \ No newline at end of file +@color-constructive-fade: #e6f7f3; // equivalents `fade( @color-constructive, 10% )` diff --git a/src/themes/mediawiki/widgets.less b/src/themes/mediawiki/widgets.less index da00318..a0bea89 100644 --- a/src/themes/mediawiki/widgets.less +++ b/src/themes/mediawiki/widgets.less @@ -113,25 +113,19 @@ border-radius: @border-radius-default; .oo-ui-indicatorElement-indicator { - right: 0; - } - - .oo-ui-iconElement-icon { - left: 0.25em; - } - - .oo-ui-labelElement-label { - margin: 0 1em; - } - - .oo-ui-indicatorElement-indicator { top: 0; + right: 0; margin: 0.775em; } .oo-ui-iconElement-icon { top: 0; + left: 0.25em; margin: 0.3em; + } + + .oo-ui-labelElement-label { + margin: 0 1em; } } @@ -353,7 +347,7 @@ } // `<input type=checkbox>` element is visually replaced by `span` that follows - [type="checkbox"] { + [type='checkbox'] { // Use opacity so that VoiceOver can still identify it opacity: 0; // Render "on top of" the span, so that it's still clickable @@ -390,7 +384,7 @@ border-radius: @border-radius-default; } - &:checked + span { + &:checked + span { background-size: 100% 100%; } @@ -476,7 +470,7 @@ } // `<input type=radio>` element is visually replaced by `span` that follows - [type="radio"] { + [type='radio'] { // Use opacity so that VoiceOver can still identify it opacity: 0; // Render "on top of" the span, so that it's still clickable @@ -513,7 +507,7 @@ border-radius: 100%; } - &:checked + span { + &:checked + span { background-size: 100% 100%; } @@ -1035,7 +1029,7 @@ .oo-ui-selectWidget-depressed &.oo-ui-optionWidget-selected, &.oo-ui-optionWidget-selected:hover { background-color: @background-color-default; - color: #333; + color: #333; } } @@ -1054,9 +1048,9 @@ margin-top: @anchor-size; } - .oo-ui-popupWidget-anchor:before, - .oo-ui-popupWidget-anchor:after { - content: ""; + .oo-ui-popupWidget-anchor::before, + .oo-ui-popupWidget-anchor::after { + content: ''; position: absolute; width: 0; height: 0; @@ -1065,14 +1059,14 @@ border-top: 0; } - .oo-ui-popupWidget-anchor:before { + .oo-ui-popupWidget-anchor::before { bottom: -@anchor-size - 1px; left: -@anchor-size; border-bottom-color: #888; border-width: @anchor-size + 1px; } - .oo-ui-popupWidget-anchor:after { + .oo-ui-popupWidget-anchor::after { bottom: -@anchor-size - 1px; left: -@anchor-size + 1px; border-bottom-color: #fff; @@ -1166,7 +1160,7 @@ outline: 0; .oo-ui-radioOptionWidget.oo-ui-optionWidget-selected { - .oo-ui-radioInputWidget [type="radio"] + span { + .oo-ui-radioInputWidget [type='radio'] + span { border-width: @border-width-input-binary-focus; } } @@ -1226,8 +1220,8 @@ border-color @transition-ease-quick ); - &:before { - content: ""; + &::before { + content: ''; display: block; position: absolute; top: 0; @@ -1296,7 +1290,7 @@ &.oo-ui-toggleWidget-on { border-color: @color-progressive; - &:before { + &::before { border-color: #fff; } } @@ -1359,13 +1353,17 @@ margin-left: 100%; } } + @-webkit-keyframes oo-ui-progressBarWidget-slide { - .oo-ui-progressBarWidget-slide-frames + .oo-ui-progressBarWidget-slide-frames; } + @-moz-keyframes oo-ui-progressBarWidget-slide { - .oo-ui-progressBarWidget-slide-frames + .oo-ui-progressBarWidget-slide-frames; } + @keyframes oo-ui-progressBarWidget-slide { - .oo-ui-progressBarWidget-slide-frames + .oo-ui-progressBarWidget-slide-frames; } + } diff --git a/src/themes/mediawiki/windows.less b/src/themes/mediawiki/windows.less index f994380..a92fc22 100644 --- a/src/themes/mediawiki/windows.less +++ b/src/themes/mediawiki/windows.less @@ -280,7 +280,7 @@ } &.oo-ui-window-ready { - > .oo-ui-window-frame { + > .oo-ui-window-frame { // Fade frame opacity: 1; .oo-ui-transform( scale( 1 ) ); -- To view, visit https://gerrit.wikimedia.org/r/289235 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I081473cf2e826cb9aa2c08a0b404c32370d9a95b Gerrit-PatchSet: 1 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Esanders <esand...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits