css: Enforce one selector per line.

While it's sometimes nice to put a few selectors on the same line,
it is generally better to have a consistent way of formatting our
selectors, and most of our code up until now lists them vertically.
This change fixes the linter to enforce one selector per line, and
it cleans up the places in the CSS where we had multiple selectors
on the same line.

The advantages of one-per-line are as followers:
    * cleaner diffs
    * easier to see when multiple areas of the app may have the
      same format
    * less likely to go over 80 cols
    * makes it more clear where we have deep nesting in the
      individual selectors
    * makes it easier for our linting tools to enforce
      whitespace violations

This also fixed an old bug where we had ".landing_page h2, h4", which
sets "h4" styles outside of the landing page.

docs/_static/theme_overrides.css

@@ -1,5 +1,6 @@
 /* override table width restrictions */
-.wy-table-responsive table td, .wy-table-responsive table th {
+.wy-table-responsive table td,
+.wy-table-responsive table th {
     /* !important prevents the common CSS stylesheets from
        overriding this as on RTD they are loaded after this stylesheet */
     white-space: normal !important;

static/styles/landing-page.css

@@ -219,7 +219,9 @@ nav ul li.active::after {
 
 /* -- generic styles -- */
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
     margin: 10px 0px;
 
     font-weight: 300;
@@ -232,7 +234,9 @@ p {
     line-height: 1.5;
 }
 
-a, a:hover, a:visited {
+a,
+a:hover,
+a:visited {
     color: #4fc0ad;
 }
 
@@ -334,7 +338,9 @@ a:not(.no-style):hover:before {
     padding: 0 !important;
 }
 
-.header, .footer, .portico-os-announcement {
+.header,
+.footer,
+.portico-os-announcement {
     display: none;
 }
 
@@ -1060,7 +1066,8 @@ a:not(.no-style):hover:before {
         padding-top: 20px;
     }
 
-    .main, .portico-landing.integrations .main {
+    .main,
+    .portico-landing.integrations .main {
         width: 100%;
         margin: 0;
     }

static/styles/media.css

@@ -127,7 +127,8 @@
         width: 250px;
     }
 
-    body, html,
+    body,
+    html,
     .app-main,
     .header-main {
         min-width: 350px;
@@ -264,7 +265,8 @@
         top: 5px;
     }
 
-    #searchbox .search_button, #searchbox .search_button[disabled]:hover {
+    #searchbox .search_button,
+    #searchbox .search_button[disabled]:hover {
         top: 2px;
     }
 

static/styles/portico.css

@@ -60,7 +60,8 @@
     padding-bottom: 0;
 }
 
-.footer, .push {
+.footer,
+.push {
     height: 56px;
 }
 
@@ -315,7 +316,8 @@ img.screenshot {
     padding-bottom: 2em;
 }
 
-.landing-page h2, h4 {
+.landing-page h2,
+.landing-page h4 {
     font-weight: lighter;
 }
 
@@ -368,7 +370,8 @@ input.text-error {
     outline-color: red;
 }
 
-.header, .footer {
+.header,
+.footer {
     position: absolute;
     z-index: 100;
     width: 100%;
@@ -453,7 +456,8 @@ input.text-error {
     margin-left: 60px;
 }
 
-.feature-block.left p, .feature-block.left h4 {
+.feature-block.left p,
+.feature-block.left h4 {
     margin-right: 40px;
 }
 
@@ -883,7 +887,8 @@ input.new-organization-button {
     margin-right: auto;
 }
 
-.login-form .control-label, .register-form .control-label {
+.login-form .control-label,
+.register-form .control-label {
     margin-bottom: 2px;
 }
 
@@ -897,7 +902,8 @@ input.new-organization-button {
     width: 100%;
 }
 
-.login-form .control-group, .register-form .control-group {
+.login-form .control-group,
+.register-form .control-group {
     margin-right: 10px;
 }
 
@@ -909,7 +915,10 @@ input.new-organization-button {
     font-weight: 300;
 }
 
-.login-google, .register-google, .login-sso, .login-github {
+.login-google,
+.register-google,
+.login-sso,
+.login-github {
     max-width: 100%;
     min-width: 300px;
     margin: auto;
@@ -917,7 +926,9 @@ input.new-organization-button {
     margin-top: 30px;
 }
 
-.login-google-button, .register-google-button, .login-github-button {
+.login-google-button,
+.register-google-button,
+.login-github-button {
     margin-left: 10px;
 }
 
@@ -1037,7 +1048,8 @@ input.new-organization-button {
     padding-top: 16px;
 }
 
-.footer-navigation li, .footer-navigation li a {
+.footer-navigation li,
+.footer-navigation li a {
     display: inline-block;
     vertical-align: middle;
     color: #888;
@@ -1414,7 +1426,8 @@ input.new-organization-button {
         padding: 0px !important;
     }
 
-    .input-medium, .input-large {
+    .input-medium,
+    .input-large {
         display: block !important;
         width: 100% !important;
         min-height: 30px !important;
@@ -1452,7 +1465,8 @@ input.new-organization-button {
         display: block;
     }
 
-    .feature-block.left p, .feature-block.left h4 {
+    .feature-block.left p,
+    .feature-block.left h4 {
         margin-right: 0px;
     }
 

static/styles/settings.css

@@ -62,14 +62,16 @@ label {
     width: 214px;
 }
 
-.user-avatar-section, .realm-icon-section {
+.user-avatar-section,
+.realm-icon-section {
     float: right;
     background-color: #fff;
     margin: 20px 0px;
     padding: 20px;
 }
 
-.user-avatar-section .inline-block, .realm-icon-section .inline-block {
+.user-avatar-section .inline-block,
+.realm-icon-section .inline-block {
     display: block;
 }
 
@@ -177,7 +179,8 @@ td .button {
     box-shadow: 0px 0px 4px rgba(56,177,232,1);
 }
 
-.dynamic-input div, .dynamic-input label {
+.dynamic-input div,
+.dynamic-input label {
     display: inline-block;
     margin: 0;
 }
@@ -200,7 +203,8 @@ td .button {
     color: #aaa;
 }
 
-.button, .input-group {
+.button,
+.input-group {
     margin: 20px 0px;
 }
 
@@ -217,7 +221,8 @@ input[type=checkbox] + .inline-block {
     margin-left: 10px;
 }
 
-#user-settings-avatar, #realm-icon-section {
+#user-settings-avatar,
+#realm-icon-section {
     border-radius: 5px;
     box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
 }
@@ -455,7 +460,8 @@ input[type=checkbox].inline-block {
     margin-top: 20px;
 }
 
-#admin-filter-pattern-status, #admin-filter-format-status {
+#admin-filter-pattern-status,
+#admin-filter-format-status {
     margin: 20px 0 0 0;
 }
 
@@ -631,7 +637,8 @@ input[type=checkbox].inline-block {
     margin-right: 20px;
 }
 
-#upload_avatar_spinner, #upload_icon_spinner {
+#upload_avatar_spinner,
+#upload_icon_spinner {
     font-size: 14px;
     margin: auto;
 }
@@ -652,7 +659,8 @@ input[type=checkbox].inline-block {
     position: inherit;
 }
 
-#alert_words_list, #attachments_list {
+#alert_words_list,
+#attachments_list {
     list-style-type: none;
     margin: auto;
     background-color: #fff;
@@ -663,7 +671,8 @@ input[type=checkbox].inline-block {
     margin-top: 8px;
 }
 
-#alert_words_list .edit-alert-word-buttons, #attachments_list .edit-attachment-buttons {
+#alert_words_list .edit-alert-word-buttons,
+#attachments_list .edit-attachment-buttons {
     position: absolute;
     right: 20px;
     top: 5px;
@@ -983,12 +992,14 @@ input[type=text]#settings_search {
         width: calc(50% - 10px);
     }
 
-    .user-avatar-section, .realm-icon-section {
+    .user-avatar-section,
+    .realm-icon-section {
         float: none;
         display: inline-block;
     }
 
-    .user-avatar-section .inline-block, .realm-icon-section .inline-block {
+    .user-avatar-section .inline-block,
+    .realm-icon-section .inline-block {
         display: inline-block;
         vertical-align: top;
     }
@@ -1003,7 +1014,8 @@ input[type=text]#settings_search {
 }
 
 @media (max-width: 856px) {
-    .user-avatar-section .inline-block, .realm-icon-section .inline-block {
+    .user-avatar-section .inline-block,
+    .realm-icon-section .inline-block {
         display: block;
         margin: 0;
     }

static/styles/zulip.css

@@ -280,7 +280,8 @@ li,
     line-height: 100%;
 }
 
-.copy_message, .copy_message:focus {
+.copy_message,
+.copy_message:focus {
     background-image: url('/static/images/clippy.svg');
     background-size: contain;
     background-repeat: no-repeat;

tools/lib/css_parser.py

@@ -418,15 +418,7 @@ class CssSelectorList(object):
 
     def text(self):
         # type: () -> str
-        res = ''
+        return ',\n'.join(sel.text() for sel in self.selectors)
-        for i, sel in enumerate(self.selectors):
-            sel_list_render = sel.text()
-            if i != 0 and sel_list_render[0] != '\n':
-                res += ' '
-            res += sel_list_render
-            if i != len(self.selectors) - 1:
-                res += ','
-        return res
 
 class CssSelector(object):
     def __init__(self, tokens, pre_fluff, post_fluff, levels):
@@ -438,10 +430,7 @@ class CssSelector(object):
 
     def text(self):
         # type: () -> str
-        res = ''
+        res = ' '.join(level.s for level in self.levels)
-        res += handle_prefluff(self.pre_fluff)
-        res += ' '.join(level.s for level in self.levels)
-        res += handle_postfluff(self.post_fluff)
         return res
 
 class CssDeclarationBlock(object):