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
