PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Style lint: Disallow shorthand & selectors (#8131)

Browse source 
* Impose and apply rule to prevent shorthand selectors

* Put one back to test the CI

* Put it back to pass CI
This commit is contained in:
Travis Ralston 2022-03-23 12:23:23 -06:00 committed by GitHub
parent 3bb0dc08e8
commit 39a08e1f4f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.stylelintrc.js
View file

@ -23,5 +23,10 @@ module.exports = {
// https://github.com/vector-im/element-web/issues/10544 // https://github.com/vector-im/element-web/issues/10544
"ignoreAtRules": ["define-mixin"], "ignoreAtRules": ["define-mixin"],
}], }],
// Disable `&_kind`-style selectors while our unused CSS approach is "Find & Replace All"
// rather than a CI thing. Shorthand selectors are harder to detect when searching for a
// class name. This regex is trying to *allow* anything except `&words`, such as `&::before`,
// `&.mx_Class`, etc.
"selector-nested-pattern": "^((&[ :.\\\[,])|([^&]))"
} }
} }

44
res/css/structures/_SpaceRoomView.scss
View file

@ -154,7 +154,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
// XXX remove this when spaces leaves Beta // XXX remove this when spaces leaves Beta
&_spaceBetaPrompt { .mx_SpaceRoomView_preview_spaceBetaPrompt {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-14px; font-size: $font-14px;
line-height: $font-24px; line-height: $font-24px;
@ -184,7 +184,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
&_inviter { .mx_SpaceRoomView_preview_inviter {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
@ -214,7 +214,7 @@ $SpaceRoomViewInnerWidth: 428px;
margin: 20px 0 !important; // override default margin from above margin: 20px 0 !important; // override default margin from above
} }
&_topic { .mx_SpaceRoomView_preview_topic {
font-size: $font-14px; font-size: $font-14px;
line-height: $font-22px; line-height: $font-22px;
color: $secondary-content; color: $secondary-content;
@ -223,7 +223,7 @@ $SpaceRoomViewInnerWidth: 428px;
overflow-y: auto; overflow-y: auto;
} }
&_joinButtons { .mx_SpaceRoomView_preview_joinButtons {
margin-top: 20px; margin-top: 20px;
.mx_AccessibleButton { .mx_AccessibleButton {
@ -243,14 +243,14 @@ $SpaceRoomViewInnerWidth: 428px;
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
&_header { .mx_SpaceRoomView_landing_header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.mx_BaseAvatar { .mx_BaseAvatar {
width: 80px; width: 80px;
&_image { .mx_BaseAvatar_image {
border-radius: 12px; border-radius: 12px;
} }
} }
@ -266,7 +266,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
&_name { .mx_SpaceRoomView_landing_name {
margin: 24px 0 16px; margin: 24px 0 16px;
font-size: $font-15px; font-size: $font-15px;
color: $secondary-content; color: $secondary-content;
@ -289,7 +289,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
&_infoBar { .mx_SpaceRoomView_landing_infoBar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -302,8 +302,8 @@ $SpaceRoomViewInnerWidth: 428px;
font-size: $font-15px; font-size: $font-15px;
display: inline-block; display: inline-block;
&_public, .mx_SpaceRoomView_info_public,
&_private { .mx_SpaceRoomView_info_private {
padding-left: 20px; padding-left: 20px;
position: relative; position: relative;
@ -320,17 +320,17 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
&_public::before { .mx_SpaceRoomView_info_public::before {
mask-size: 12px; mask-size: 12px;
mask-image: url("$(res)/img/globe.svg"); mask-image: url("$(res)/img/globe.svg");
} }
&_private::before { .mx_SpaceRoomView_info_private::before {
mask-size: 14px; mask-size: 14px;
mask-image: url("$(res)/img/element-icons/lock.svg"); mask-image: url("$(res)/img/element-icons/lock.svg");
} }
&_memberCount { .mx_SpaceRoomView_info_memberCount {
color: inherit; color: inherit;
position: relative; position: relative;
padding: 0 0 0 16px; padding: 0 0 0 16px;
@ -360,8 +360,8 @@ $SpaceRoomViewInnerWidth: 428px;
} }
.mx_SpaceRoomView_landing { .mx_SpaceRoomView_landing {
&_inviteButton, .mx_SpaceRoomView_landing_inviteButton,
&_settingsButton { .mx_SpaceRoomView_landing_settingsButton {
position: relative; position: relative;
&::before { &::before {
@ -372,7 +372,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
&_inviteButton { .mx_SpaceRoomView_landing_inviteButton {
padding: 4px 18px 4px 40px; padding: 4px 18px 4px 40px;
height: min-content; height: min-content;
@ -386,7 +386,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
&_settingsButton { .mx_SpaceRoomView_landing_settingsButton {
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -404,7 +404,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
&_topic { .mx_SpaceRoomView_landing_topic {
font-size: $font-15px; font-size: $font-15px;
margin-top: 12px; margin-top: 12px;
margin-bottom: 16px; margin-bottom: 16px;
@ -423,18 +423,18 @@ $SpaceRoomViewInnerWidth: 428px;
@mixin SpacePillButton; @mixin SpacePillButton;
} }
&_justMeButton::before { .mx_SpaceRoomView_privateScope_justMeButton::before {
mask-image: url('$(res)/img/element-icons/room/members.svg'); mask-image: url('$(res)/img/element-icons/room/members.svg');
} }
&_meAndMyTeammatesButton::before { .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {
mask-image: url('$(res)/img/element-icons/community-members.svg'); mask-image: url('$(res)/img/element-icons/community-members.svg');
} }
} }
.mx_SpaceRoomView_inviteTeammates { .mx_SpaceRoomView_inviteTeammates {
// XXX remove this when spaces leaves Beta // XXX remove this when spaces leaves Beta
&_betaDisclaimer { .mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
padding: 16px; padding: 16px;
position: relative; position: relative;
border-radius: 8px; border-radius: 8px;
@ -450,7 +450,7 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
&_buttons { .mx_SpaceRoomView_inviteTeammates_buttons {
color: $secondary-content; color: $secondary-content;
margin-top: 28px; margin-top: 28px;

64
res/css/views/elements/_AccessibleButton.scss
View file

@ -17,22 +17,22 @@ limitations under the License.
.mx_AccessibleButton { .mx_AccessibleButton {
cursor: pointer; cursor: pointer;
&_disabled { .mx_AccessibleButton_disabled {
cursor: default; cursor: default;
&.mx_AccessibleButton_kind { &.mx_AccessibleButton_kind {
&_primary, .mx_AccessibleButton_kind_primary,
&_primary_outline, .mx_AccessibleButton_kind_primary_outline,
&_primary_sm, .mx_AccessibleButton_kind_primary_sm,
&_link, .mx_AccessibleButton_kind_link,
&_link_inline, .mx_AccessibleButton_kind_link_inline,
&_link_sm { .mx_AccessibleButton_kind_link_sm {
opacity: 0.4; opacity: 0.4;
} }
} }
} }
&_hasKind { .mx_AccessibleButton_hasKind {
padding: 7px 18px; padding: 7px 18px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
@ -43,27 +43,27 @@ limitations under the License.
border: none; // override default <button /> styles border: none; // override default <button /> styles
&.mx_AccessibleButton_kind { &.mx_AccessibleButton_kind {
&_primary_sm, .mx_AccessibleButton_kind_primary_sm,
&_danger_sm, .mx_AccessibleButton_kind_danger_sm,
&_link_sm { .mx_AccessibleButton_kind_link_sm {
padding: 5px 12px; padding: 5px 12px;
} }
&_primary_sm { .mx_AccessibleButton_kind_primary_sm {
color: $button-primary-fg-color; color: $button-primary-fg-color;
background-color: $accent; background-color: $accent;
} }
&_danger_sm { .mx_AccessibleButton_kind_danger_sm {
color: $button-danger-fg-color; color: $button-danger-fg-color;
background-color: $alert; background-color: $alert;
} }
&_link_sm { .mx_AccessibleButton_kind_link_sm {
color: $accent; color: $accent;
} }
&_confirm_sm { .mx_AccessibleButton_kind_confirm_sm {
background-color: $accent; background-color: $accent;
&::before { &::before {
@ -71,7 +71,7 @@ limitations under the License.
} }
} }
&_cancel_sm { .mx_AccessibleButton_kind_cancel_sm {
background-color: $alert; background-color: $alert;
&::before { &::before {
@ -81,33 +81,33 @@ limitations under the License.
} }
} }
&_kind { .mx_AccessibleButton_kind {
&_primary, .mx_AccessibleButton_kind_primary,
&_primary_outline, .mx_AccessibleButton_kind_primary_outline,
&_secondary { .mx_AccessibleButton_kind_secondary {
font-weight: 600; font-weight: 600;
} }
&_primary, .mx_AccessibleButton_kind_primary,
&_primary_outline { .mx_AccessibleButton_kind_primary_outline {
border: 1px solid $accent; border: 1px solid $accent;
} }
&_primary { .mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color; color: $button-primary-fg-color;
background-color: $accent; background-color: $accent;
} }
&_primary_outline { .mx_AccessibleButton_kind_primary_outline {
color: $accent; color: $accent;
background-color: $button-secondary-bg-color; background-color: $button-secondary-bg-color;
} }
&_secondary { .mx_AccessibleButton_kind_secondary {
color: $accent; color: $accent;
} }
&_danger { .mx_AccessibleButton_kind_danger {
color: $button-danger-fg-color; color: $button-danger-fg-color;
background-color: $alert; background-color: $alert;
@ -116,7 +116,7 @@ limitations under the License.
background-color: $button-danger-disabled-bg-color; background-color: $button-danger-disabled-bg-color;
} }
&_outline { .mx_AccessibleButton_kind_danger_outline {
color: $alert; color: $alert;
background-color: transparent; background-color: transparent;
border: 1px solid $alert; border: 1px solid $alert;
@ -127,7 +127,7 @@ limitations under the License.
} }
} }
&_sm { .mx_AccessibleButton_kind_danger_sm {
&.mx_AccessibleButton_disabled { &.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color; color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color; background-color: $button-danger-disabled-bg-color;
@ -135,19 +135,19 @@ limitations under the License.
} }
} }
&_link { .mx_AccessibleButton_kind_link {
color: $accent; color: $accent;
padding: 0; padding: 0;
&_inline { .mx_AccessibleButton_kind_link_inline {
color: $accent; color: $accent;
font-size: inherit; font-size: inherit;
padding: 0 2px; padding: 0 2px;
} }
} }
&_confirm_sm, .mx_AccessibleButton_kind_confirm_sm,
&_cancel_sm { .mx_AccessibleButton_kind_cancel_sm {
padding: 0px; padding: 0px;
width: 16px; width: 16px;
height: 16px; height: 16px;