Merge pull request #393 from rschamp/feature/silence

Upgrade sass-lint, quiet various warnings

.sass-lint.yml

 rules:
+  class-name-format: 0
   color-literals: 2
   final-newline: 2
+  force-element-nesting: 0
   hex-notation: 2
   indentation:
     - 2
@@ -13,6 +15,12 @@ rules:
       max-depth: 4
   no-css-comments: 0
   no-ids: 0
+  no-mergeable-selectors: 0
+  no-qualifying-elements:
+    - 1
+    -
+      - allow-element-with-attribute
+  no-transition-all: 0
   property-sort-order:
     - 2
     -
@@ -21,4 +29,5 @@ rules:
     - 2
     -
       style: double
+  shorthand-values: 0
   zero-unit: 2

package.json

@@ -60,7 +60,7 @@
     "react-slick": "0.9.2",
     "redux-thunk": "2.0.1",
     "routes-to-nginx-conf": "0.0.4",
-    "sass-lint": "1.3.2",
+    "sass-lint": "1.5.1",
     "sass-loader": "2.0.1",
     "scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master",
     "slick-carousel": "1.5.8",

server/template.html

@@ -55,7 +55,9 @@
 
         <!-- Error logging (Sentry) -->
         <script>
-            Raven.config('{{&sentry_dsn}}').install()
+            if ('{{&sentry_dsn}}' !== '') {
+                Raven.config('{{&sentry_dsn}}').install();
+            }
         </script>
 
         <!-- Analytics (GA) -->

src/components/adminpanel/adminpanel.scss

@@ -38,7 +38,7 @@
                 font-size: large;
                 font-weight: 700;
             }
-           
+
             dd {
                 margin-left: 0;
             }
@@ -51,21 +51,22 @@
                 margin: 0;
                 list-style: none;
 
-                .button-row {
-                    display: flex;
-                    font-size: small;
-                    align-items: center;
-                    justify-content: space-between;
+            }
+        }
+    }
+
+    .button-row {
+        display: flex;
+        font-size: small;
+        align-items: center;
+        justify-content: space-between;
 
-                    .button {
-                        padding: .5rem 1rem;
+        .button {
+            padding: .5rem 1rem;
 
-                        &.inprogress {
-                            background-color: $ui-dark-gray;
-                            color: $type-gray;
-                        }
-                    }
-                }
+            &.inprogress {
+                background-color: $ui-dark-gray;
+                color: $type-gray;
             }
         }
     }

src/components/banner/banner.scss

@@ -13,7 +13,8 @@ $navigation-height: 50px;
     text-align: center;
     line-height: $navigation-height;
 
-    &, a {
+    &,
+    a {
         color: $ui-white;
     }
 
@@ -23,14 +24,14 @@ $navigation-height: 50px;
 
     .close {
         float: right;
-        margin-top: $navigation-height/4;
-        border-radius: $navigation-height/4;
+        margin-top: $navigation-height / 4;
+        border-radius: $navigation-height / 4;
         background-color: $box-shadow-gray;
-        width: $navigation-height/2;
-        height: $navigation-height/2;
+        width: $navigation-height / 2;
+        height: $navigation-height / 2;
         text-decoration: none;
         text-shadow: none;
-        line-height: $navigation-height/2;
+        line-height: $navigation-height / 2;
         color: $ui-white;
         font-weight: normal;
     }

src/components/box/box.scss

@@ -11,6 +11,7 @@ $base-bg: $ui-white;
     //4 columns
     @media only screen and (max-width: $mobile - 1) {
         width: $cols4;
+
         .box-header {
             h4 {
                 font-size: .9rem;
@@ -21,9 +22,10 @@ $base-bg: $ui-white;
     //6 columns
     @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
         width: $cols6;
+
         .box-header {
             h4 {
-                font-size: 1.0rem;
+                font-size: 1rem;
             }
         }
     }
@@ -31,6 +33,7 @@ $base-bg: $ui-white;
     //8 columns
     @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
         width: $cols8;
+
         .box-header {
             h4 {
                 font-size: 1.1rem;
@@ -41,6 +44,7 @@ $base-bg: $ui-white;
     //12 columns
     @media only screen and (min-width: $desktop) {
         width: $cols12;
+
         .box-header {
             h4 {
                 font-size: 1.1rem;

src/components/carousel/carousel.scss

@@ -14,7 +14,7 @@
 
     .slick-next,
     .slick-prev {
-        margin-top: -$icon-size/2;
+        margin-top: -$icon-size / 2;
         width: $icon-size;
         height: $icon-size;
 

src/components/intro/intro.scss

@@ -57,14 +57,6 @@
             display: none;
         }
 
-        &:hover .costume-1 {
-            display: none;
-        }
-
-        &:hover .costume-2 {
-            display: block;
-        }
-
         .circle {
             display: block;
             top: 15px;
@@ -98,52 +90,74 @@
         }
 
 
-        &.sprite-1 .circle {
-            background-color: $splash-green;
-        }
+        &.sprite-1 {
+            .circle {
+                background-color: $splash-green;
+            }
 
-        &.sprite-2 .circle {
-            background-color: $splash-pink;
+            .text {
+                top: 60px;
+                left: 50px;
+                color: $splash-green;
+            }
         }
 
-        &.sprite-3 .circle {
-            background-color: $splash-blue;
-        }
+        &.sprite-2 {
+            .circle {
+                background-color: $splash-pink;
+            }
 
-        &:hover.sprite-1 .circle {
-            box-shadow: 0 0 10px 2px $splash-green;
+            .text {
+                top: 77px;
+                left: 50px;
+                color: $splash-pink;
+            }
         }
 
-        &:hover.sprite-2 .circle {
-            box-shadow: 0 0 10px 2px $splash-pink;
-        }
+        &.sprite-3 {
+            .circle {
+                background-color: $splash-blue;
+            }
 
-        &:hover.sprite-3 .circle {
-            box-shadow: 0 0 10px 2px $splash-blue;
-        }
+            .text {
+                top: 37px;
+                left: 45px;
+                color: $splash-blue;
+            }
 
-        &.sprite-1 .text {
-            top: 60px;
-            left: 50px;
-            color: $splash-green;
+            .subtext {
+                top: 63px;
+                left: 60px;
+                color: $ui-white;
+            }
         }
 
-        &.sprite-2 .text {
-            top: 77px;
-            left: 50px;
-            color: $splash-pink;
-        }
+        &:hover {
+            .costume-1 {
+                display: none;
+            }
 
-        &.sprite-3 .text {
-            top: 37px;
-            left: 45px;
-            color: $splash-blue;
-        }
+            .costume-2 {
+                display: block;
+            }
+
+            &.sprite-1 {
+                .circle {
+                    box-shadow: 0 0 10px 2px $splash-green;
+                }
+            }
+
+            &.sprite-2 {
+                .circle {
+                    box-shadow: 0 0 10px 2px $splash-pink;
+                }
+            }
 
-        &.sprite-3 .subtext {
-            top: 63px;
-            left: 60px;
-            color: $ui-white;
+            &.sprite-3 {
+                .circle {
+                    box-shadow: 0 0 10px 2px $splash-blue;
+                }
+            }
         }
     }
 

src/components/languagechooser/languagechooser.jsx

@@ -6,8 +6,6 @@ var jar  = require('../../lib/jar.js');
 var languages = require('../../../languages.json');
 var Select = require('../forms/select.jsx');
 
-require('./languagechooser.scss');
-
 /**
  * Footer dropdown menu that allows one to change their language.
  */

src/components/languagechooser/languagechooser.scss

-.language-chooser {
-
-}

src/components/login/login.jsx

@@ -40,30 +40,30 @@ var Login = React.createClass({
         return (
             <div className="login">
                 <form onSubmit={this.handleSubmit}>
-                    <label htmlFor="username">
+                    <label htmlFor="username" key="usernameLabel">
                         <FormattedMessage
                             id='general.username'
                             defaultMessage={'Username'} />
                     </label>
-                    <Input type="text" ref="username" name="username" maxLength="30" />
-                    <label htmlFor="password">
+                    <Input type="text" ref="username" name="username" maxLength="30" key="usernameInput" />
+                    <label htmlFor="password" key="passwordLabel">
                         <FormattedMessage
                             id='general.password'
                             defaultMessage={'Password'} />
                     </label>
-                    <Input type="password" ref="password" name="password" />
+                    <Input type="password" ref="password" name="password" key="passwordInput" />
                     {this.state.waiting ? [
-                        <Button className="submit-button white" type="submit" disabled="disabled">
+                        <Button className="submit-button white" type="submit" disabled="disabled" key="submitButton">
                             <Spinner />
                         </Button>
                     ] : [
-                        <Button className="submit-button white" type="submit">
+                        <Button className="submit-button white" type="submit" key="submitButton">
                             <FormattedMessage
                                 id='general.signIn'
                                 defaultMessage={'Sign in'} />
                         </Button>
                     ]}
-                    <a className="right" href="/accounts/password_reset/">
+                    <a className="right" href="/accounts/password_reset/" key="passwordResetLink">
                         <FormattedMessage
                             id='login.forgotPassword'
                             defaultMessage={'Forgot Password?'} />

src/components/login/login.scss

@@ -20,12 +20,13 @@
 
     a {
         margin-top: 15px;
-    }
 
-    a:hover {
-        background-color: transparent;
+        &:hover {
+            background-color: transparent;
+        }
     }
 
+
     .error {
         border: 1px solid $active-dark-gray;
         border-radius: 5px;

src/components/modal/modal.scss

 @import "../../colors";
 
-&.ReactModal__Content {
+.ReactModal__Content {
     iframe {
         border: 0;
     }
@@ -11,10 +11,10 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin-top: -$modal-close-size/2;
-    margin-right: -$modal-close-size/2;
+    margin-top: -$modal-close-size / 2;
+    margin-right: -$modal-close-size / 2;
     border: 2px solid $ui-border;
-    border-radius: $modal-close-size/2;
+    border-radius: $modal-close-size / 2;
     background-color: $active-dark-gray;
     cursor: pointer;
     width: $modal-close-size;

src/components/navigation/dropdown.scss

@@ -64,7 +64,7 @@
         &:before {        
             display: block;
             position: absolute;
-            top: -$arrow-border-width/2;
+            top: -$arrow-border-width / 2;
             right: 10%;
             
             transform: rotate(45deg);

src/components/navigation/navigation.jsx

@@ -193,7 +193,7 @@ var Navigation = React.createClass({
             'logged-in': this.props.session.user
         });
         var messageClasses = classNames({
-            'messageCount': true,
+            'message-count': true,
             'show': this.state.unreadMessageCount > 0
         });
         var formatMessage = this.props.intl.formatMessage;
@@ -269,7 +269,7 @@ var Navigation = React.createClass({
                             </a>
                         </li>,
                         <li className="link right account-nav" key="account-nav">
-                            <a className="userInfo" href="#" onClick={this.handleAccountNavClick}>
+                            <a className="user-info" href="#" onClick={this.handleAccountNavClick}>
                                 <Avatar src={this.props.session.user.thumbnailUrl} alt="" />
                                 {this.props.session.user.username}
                             </a>
@@ -331,15 +331,17 @@ var Navigation = React.createClass({
                             <a
                                 href="#"
                                 onClick={this.handleLoginClick}
-                                className="ignore-react-onclickoutside">
+                                className="ignore-react-onclickoutside"
+                                key="login-link">
                                     <FormattedMessage
                                         id='general.signIn'
                                         defaultMessage={'Sign In'} />
-                                </a>
+                            </a>
                             <Dropdown
                                     className="login-dropdown with-arrow"
                                     isOpen={this.state.loginOpen}
-                                    onRequestClose={this.closeLogin}>
+                                    onRequestClose={this.closeLogin}
+                                    key="login-dropdown">
                                 <Login
                                     onLogIn={this.handleLogIn}
                                     error={this.state.loginError} />

src/components/navigation/navigation.scss

@@ -51,72 +51,73 @@
                 vertical-align: bottom;
             }
         }
+    }
 
-        .logo {
-            margin-right: 10px;
-
-            a {
-                display: block;
-                transition: .15s ease all;
-                margin: 0 6px 0 0;
-                border: 0;
-
-                background-image: url("/images/logo_sm.png");
-                background-repeat: no-repeat;
-                background-position: center center;
-                background-size: 95%;
-                width: 81px;
-                height: 50px;
-
-                &:hover {
-                    transition: .15s ease all; 
-                    background-size: 100%;
-                }
+    .logo {
+        margin-right: 10px;
+
+        a {
+            display: block;
+            transition: .15s ease all;
+            margin: 0 6px 0 0;
+            border: 0;
+
+            background-image: url("/images/logo_sm.png");
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 95%;
+            width: 81px;
+            height: 50px;
+
+            &:hover {
+                transition: .15s ease all; 
+                background-size: 100%;
             }
         }
+    }
 
-        .link {
-            > a {
-                display: block;
-                padding: 17px 15px 0 15px;
-                height: 33px;
-                
-                text-decoration: none;
-                white-space: nowrap;
-                color: $type-white;
-                font-size: .85rem;
-                font-weight: bold;
-            }
+    .link {
+        > a {
+            display: block;
+            padding: 17px 15px 0 15px;
+            height: 33px;
+            
+            text-decoration: none;
+            white-space: nowrap;
+            color: $type-white;
+            font-size: .85rem;
+            font-weight: bold;
 
-            > a:hover {
+            &:hover {
                 background-color: $active-gray;
             }
         }
 
-        .search {
-            margin: 0 20px;
-            border-right: 0;
-            color: $type-white;
-            flex-grow: 3;
+    }
 
-            .ie9 & {
-                width: 100%;
-            }
+    .search {
+        margin: 0 20px;
+        border-right: 0;
+        color: $type-white;
+        flex-grow: 3;
 
-            form {
-                margin: 0;
-            }
+        .ie9 & {
+            width: 100%;
+        }
 
-            input {
-                display: inline-block;
-                margin-top: 5px;
-                outline: none;
-                border: 0;
-                background-color: $active-gray;
-                height: 14px;
-            }
+        form {
+            margin: 0;
+        }
+
+        input {
+            display: inline-block;
+            margin-top: 5px;
+            outline: none;
+            border: 0;
+            background-color: $active-gray;
+            height: 14px;
 
-            input[type=submit] {
+            [type=submit] {
                 position: absolute;
                 
                 background-color: transparent;
@@ -129,7 +130,7 @@
                 height: 40px;
             }
 
-            input[type=text] {
+            [type=text] {
                 transition: .15s ease background-color; 
                 padding: 0;
                 padding-right: 10px;
@@ -148,122 +149,125 @@
                     transition: .15s ease background-color;
                     background-color: $active-dark-gray;
                 }
-            }
 
-            .ie9 input[type=text] {
-                width: 70px;
+                .ie9 & {
+                    width: 70px;
+                }
             }
         }
+    }
 
-        .right {
-            float: right;
-            margin-left: auto;
-            align-self: flex-end;
+    .right {
+        float: right;
+        margin-left: auto;
+        align-self: flex-end;
 
-            .ie9 & {
-                float: none;
-            }
+        .ie9 & {
+            float: none;
+        }
 
-            a:hover {
+        a {
+            &:hover {
                 background-color: $active-gray;
             }
         }
+    }
 
-        .messages,
-        .mystuff {
-            > a {
-                background-repeat: no-repeat;
-                background-position: center center;
-                background-size: 45%;
-                padding-right: 10px;
-                padding-left: 10px;
-                width: 30px;
-                overflow: hidden;
-                text-indent: 50px;
-                white-space: nowrap;
-            }
-
-            > a:hover {
+    .messages,
+    .mystuff {
+        > a {
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 45%;
+            padding-right: 10px;
+            padding-left: 10px;
+            width: 30px;
+            overflow: hidden;
+            text-indent: 50px;
+            white-space: nowrap;
+
+            &:hover {
                 background-size: 50%;
             }
         }
 
-        .messages {
-            > a {
-                background-image: url("/images/nav-notifications.png");
-            }
+    }
 
-            .messageCount {
-                display: none;
-                
-                &.show {
-                    display: block;
-                    position: absolute;
-                    top: .5rem;
-                    right: .25rem;
-                    border-radius: 1rem;
-                    background-color: $ui-orange;
-                    padding: 0 .25rem;
-                    text-indent: 0;
-                    line-height: 1rem;
-                    color: $type-white;
-                    font-size: .7rem;
-                    font-weight: bold;
-                }
-            }
+    .messages {
+        > a {
+            background-image: url("/images/nav-notifications.png");
         }
 
-        .mystuff {
-            > a {
-                background-image: url("/images/mystuff.png");
+        .message-count {
+            display: none;
+
+            &.show {
+                display: block;
+                position: absolute;
+                top: .5rem;
+                right: .25rem;
+                border-radius: 1rem;
+                background-color: $ui-orange;
+                padding: 0 .25rem;
+                text-indent: 0;
+                line-height: 1rem;
+                color: $type-white;
+                font-size: .7rem;
+                font-weight: bold;
             }
         }
+    }
 
-        .login-dropdown {
-            width: 200px;
+    .mystuff {
+        > a {
+            background-image: url("/images/mystuff.png");
         }
+    }
 
-        .account-nav {
-            .userInfo {
-                padding-top: 14px;
-                max-width: 260px;
+    .login-dropdown {
+        width: 200px;
+    }
+
+    .account-nav {
+        .user-info {
+            padding-top: 14px;
+            max-width: 260px;
+        }
+
+        > a {
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: .8125rem;
+            font-weight: normal;
+
+            .avatar {
+                margin-right: 10px;
+                border-radius: 3px;
+                width: 24px;
+                height: 24px;
+                vertical-align: middle;
             }
 
-            > a {
+            &:after {
                 display: inline-block;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                font-size: .8125rem;
-                font-weight: normal;
-
-                .avatar {
-                    margin-right: 10px;
-                    border-radius: 3px;
-                    width: 24px;
-                    height: 24px;
-                    vertical-align: middle;
-                }
+                margin-left: 8px;
 
-                &:after {
-                    display: inline-block;
-                    margin-left: 8px;
-
-                    background-image: url("/images/dropdown.png");
-                    background-repeat: no-repeat;
-                    background-position: center center;
-                    background-size: 50%;
-                    width: 20px;
-                    height: 20px;
-                    vertical-align: middle;
-                    content: " ";
-                }
+                background-image: url("/images/dropdown.png");
+                background-repeat: no-repeat;
+                background-position: center center;
+                background-size: 50%;
+                width: 20px;
+                height: 20px;
+                vertical-align: middle;
+                content: " ";
             }
+        }
 
-            .dropdown {
-                padding: 0;
-                padding-top: 5px;
-                width: 100%;
-            }
+        .dropdown {
+            padding: 0;
+            padding-top: 5px;
+            width: 100%;
         }
     }
 }

src/components/news/news.scss

@@ -46,10 +46,10 @@
             color: $type-gray;
             font-size: .85rem;
         }
-    }
 
-    li:nth-child(even) {
-        border-top: 1px solid $ui-border;
-        border-bottom: 1px solid $ui-border;
+        &:nth-child(even) {
+            border-top: 1px solid $ui-border;
+            border-bottom: 1px solid $ui-border;
+        }
     }
 }

src/components/spinner/spinner.scss

@@ -21,27 +21,33 @@
             width: 15%;
             height: 15%;
             content: "";
-            -webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both;
         }
     }
 
     @for $i from 1 through 12 {
         $rotation: 30deg * ($i - 1);
         $delay: -1.3s + $i * .1;
+
         .circle#{$i} {
             transform: rotate($rotation);
-            -ms-transform: rotate($rotation);
-            -webkit-transform: rotate($rotation);
-        }
-        .circle#{$i}:before {
-            animation-delay: $delay; 
-            -webkit-animation-delay: $delay;
+
+            &:before {
+                animation-delay: $delay; 
+            }
         }
+
     }
 
 }
 
 @keyframes circleFadeDelay {
-    0%, 39%, 100% { opacity: 0; }
-    40% { opacity: 1; } 
+    0%,
+    39%,
+    100% {
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 1;
+    } 
 }

src/components/subnavigation/subnavigation.scss

@@ -37,7 +37,7 @@
 
         &.description {
             /* clear styling for info element */
-            border: none;
+            border: 0;
             border-radius: none;
             text-decoration: none;
 
@@ -47,7 +47,7 @@
             }
 
             &:active {
-                border: none;
+                border: 0;
                 box-shadow: none;
                 background-color: transparent;
             }

src/components/thumbnail/thumbnail.scss

@@ -3,11 +3,11 @@
 .thumbnail {
     .thumbnail-image {
         display: block;
-    }
 
-    .thumbnail-image img {
-        margin-bottom: 2px;
-        border: 1px solid $ui-border;
+        img {
+            margin-bottom: 2px;
+            border: 1px solid $ui-border;
+        }
     }
 
     $extras: ".thumbnail-creator, .thumbnail-loves, .thumbnail-remixes";
@@ -26,7 +26,7 @@
 
     .thumbnail-title {
         margin-bottom: 1px;
-        font-size: .9230em;
+        font-size: .923em;
         font-weight: 800;
 
         a {
@@ -58,12 +58,16 @@
         }
     }
 
-    .thumbnail-loves:before {
-        background-image: url("/svgs/love/love_type-gray.svg");
+    .thumbnail-loves {
+        &:before {
+            background-image: url("/svgs/love/love_type-gray.svg");
+        }
     }
 
-    .thumbnail-remixes:before {
-        background-image: url("/svgs/remix/remix_type-gray.svg");
+    .thumbnail-remixes {
+        &:before {
+            background-image: url("/svgs/remix/remix_type-gray.svg");
+        }
     }
 
     &.project {

src/components/welcome/welcome.scss

@@ -4,6 +4,7 @@
     .box-content {
         padding: 0;
     }
+
     .welcome-col {
         display: inline-block;
         margin: 10px 15px;
@@ -33,26 +34,32 @@
             height: 10px;
             content: "";
         }
+
         &.blue {
             #{$color-bars} {
                 background-color: $splash-blue;
             }
+
             a {
                 color: $splash-blue;
             }
         }
+
         &.green {
             #{$color-bars} {
                 background-color: $splash-green;
             }
+
             a {
                 color: $splash-green;
             }
         }
+
         &.pink {
             #{$color-bars} {
                 background-color: $splash-pink;
             }
+
             a {
                 color: $splash-pink;
             }

src/main.scss

@@ -32,29 +32,31 @@ h1 {
 
 h4 {
     line-height: 1.1rem;
-    font-size: 1.0rem;
+    font-size: 1rem;
 }
 
-p.legal {
-    font-size: .8rem;
-}
-
-/* Links */
 p {
+    &.legal {
+        font-size: .8rem;
+    }
+
     a {
         white-space: nowrap;
     }
 }
 
-a:link,
-a:visited,
-a:active {
-    text-decoration: none;
-    color: $link-blue;
-}
+/* Links */
+a {
+    &:link,
+    &:visited,
+    &:active {
+        text-decoration: none;
+        color: $link-blue;
+    }
 
-a:hover {
-    text-decoration: underline;
+    &:hover {
+        text-decoration: underline;
+    }
 }
 
 /* Classes */

src/views/about/about.scss

@@ -60,7 +60,8 @@
             width: calc(384px + 5px + 5px);
         }
 
-        img, iframe {
+        img,
+        iframe {
             display: block;
             border: 1px solid $ui-gray;
             padding: 5px;

src/views/credits/credits.scss

@@ -3,11 +3,12 @@
 #view {
     p {
         line-height: 1.5rem;
+
         a {
             word-wrap: break-word; /* Overrides: https://github.com/LLK/scratch-www/blob/develop/src/main.scss#L43-L47 */
         }
     }
-    
+
     ul {
         display: flex;
         margin: 0;

src/views/hoc/hoc.scss

@@ -61,7 +61,7 @@ $base-bg: $ui-white;
             }
         }
     }
-    
+
     .card-deck {
         display: inline-flex;
         justify-content: center;