Merge pull request #498 from communitiesuk/lint-task

Ensure more code is covered by linting

.erb-lint.yml

@@ -1,5 +1,7 @@
 ---
 EnableDefaultLinters: true
+exclude:
+  - "**/vendor/**/*"
 linters:
   Rubocop:
     enabled: true

.github/workflows/staging_pipeline.yml

@@ -82,9 +82,19 @@ jobs:
         with:
           bundler-cache: true
 
-      - name: Rubocop
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: 16
+
+      - name: Install packages and symlink local dependencies
+        run: |
+          yarn install --immutable --immutable-cache --check-cache
+
+      - name: Lint
         run: |
-          bundle exec rubocop
+          bundle exec rake lint
 
   audit:
     name: Audit dependencies

Gemfile

@@ -83,7 +83,6 @@ group :development do
   gem "rubocop-govuk", require: false
   gem "rubocop-performance", require: false
   gem "rubocop-rails", require: false
-  gem "scss_lint-govuk"
 end
 
 group :test do

Gemfile.lock

@@ -410,15 +410,6 @@ GEM
     ruby-progressbar (1.11.0)
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
-    scss_lint (0.59.0)
-      sass (~> 3.5, >= 3.5.5)
-    scss_lint-govuk (0.2.0)
-      scss_lint
     selenium-webdriver (4.1.0)
       childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
@@ -514,7 +505,6 @@ DEPENDENCIES
   rubocop-govuk
   rubocop-performance
   rubocop-rails
-  scss_lint-govuk
   selenium-webdriver
   sentry-rails
   sentry-ruby

app/frontend/styles/_document-list.scss

@@ -18,11 +18,6 @@
   margin: 0 0 govuk-spacing(1);
 }
 
-.app-document-list__item-metadata {
-  padding: 0;
-  margin: 0;
-}
-
 .app-document-list__item-description {
   @include govuk-font($size: 16);
   margin: govuk-spacing(1) 0;
@@ -32,35 +27,5 @@
   @include govuk-font($size: 16);
   color: $govuk-secondary-text-colour;
   margin: 0;
-}
-.app-document-list {
-  list-style: none;
   padding: 0;
 }
-
-.app-document-list__item {
-  margin-bottom: govuk-spacing(4);
-
-  &:last-child {
-    border-bottom: 0;
-    margin-bottom: 0;
-    padding-bottom: 0;
-  }
-}
-
-.app-document-list__item-title {
-  @include govuk-font($size: 16, $weight: "bold");
-  margin: 0 0 govuk-spacing(1);
-}
-
-.app-document-list__item-description {
-  @include govuk-font($size: 16);
-  margin: govuk-spacing(1) 0;
-}
-
-.app-document-list__item-metadata {
-  @include govuk-font($size: 16);
-  color: $govuk-secondary-text-colour;
-  padding: 0;
-  margin: 0;
-}

app/frontend/styles/_filter-layout.scss

@@ -34,9 +34,7 @@
 .app-filter-layout__content {
   @include govuk-media-query(desktop) {
     float: right;
-    max-width: calc(
+    max-width: calc(#{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)});
-      #{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)}
-    );
     width: 100%;
   }
 }

app/frontend/styles/_filter.scss

@@ -50,7 +50,7 @@
     border: 0;
   }
 
-  &::before {
+  &:before {
     background-image: url("../assets/images/icon-cross.svg");
     content: "";
     display: inline-block;
@@ -94,7 +94,7 @@
   .govuk-radios__label {
     @include govuk-font(16);
 
-    &::before {
+    &:before {
       background-color: govuk-colour("white");
     }
   }

app/frontend/styles/_pagination.scss

@@ -1,4 +1,3 @@
-
 // https://github.com/alphagov/govuk-frontend/blob/add-pagination-prototype/src/govuk/components/pagination/_index.scss
 .app-pagination {
   border-top: 1px solid $govuk-border-colour;
@@ -117,7 +116,7 @@
 }
 
 .app-pagination__icon {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 .app-pagination__item--prev .app-pagination__link,

app/frontend/styles/_panel.scss

@@ -19,8 +19,8 @@
     margin-bottom: 0;
   }
 
-  .govuk-radios__label::before,
+  .govuk-radios__label:before,
-  & ::after {
+  & :after {
     color: govuk-colour("black");
     border-color: govuk-colour("black");
     background-color: govuk-colour("white");

app/frontend/styles/_primary-navigation.scss

@@ -2,13 +2,13 @@
   @include govuk-font(19, $weight: bold);
   background-color: govuk-colour("light-grey");
   border-bottom: 1px solid $govuk-border-colour;
-  }
+}
 
-  .govuk-phase-banner + .app-primary-navigation {
+.govuk-phase-banner + .app-primary-navigation {
   margin-top: -1px;
-  }
+}
 
-  .app-primary-navigation__list {
+.app-primary-navigation__list {
   @include govuk-clearfix;
   left: govuk-spacing(-3);
   list-style: none;
@@ -17,9 +17,9 @@
   position: relative;
   right: govuk-spacing(-3);
   width: calc(100% + #{govuk-spacing(6)});
-  }
+}
 
-  .app-primary-navigation__item {
+.app-primary-navigation__item {
   box-sizing: border-box;
   display: block;
   float: left;
@@ -27,9 +27,9 @@
   height: 50px;
   padding: 0 govuk-spacing(3);
   position: relative;
-  }
+}
 
-  .app-primary-navigation__item--current {
+.app-primary-navigation__item--current {
   border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
 
   &:hover {
@@ -39,15 +39,15 @@
   &:active {
     border-bottom-color: $govuk-link-active-colour;
   }
-  }
+}
 
-  .app-primary-navigation__item--align-right {
+.app-primary-navigation__item--align-right {
   @include govuk-media-query($from: tablet) {
     float: right;
   }
-  }
+}
 
-  .app-primary-navigation__link {
+.app-primary-navigation__link {
   @include govuk-link-common;
   @include govuk-link-style-no-visited-state;
   @include govuk-link-style-no-underline;
@@ -62,8 +62,8 @@
     right: 0;
     top: 0;
   }
-  }
+}
 
-  .app-primary-navigation__item--current .app-primary-navigation__link:hover {
+.app-primary-navigation__item--current .app-primary-navigation__link:hover {
   text-decoration: none;
-  }
+}

app/frontend/styles/application.scss

@@ -34,6 +34,7 @@ $govuk-new-link-styles: true;
 
 // App utilities
 .app-\!-colour-muted {
+  // stylelint-disable declaration-no-important
   color: $govuk-secondary-text-colour !important;
 }
 

app/views/form/check_answers.html.erb

@@ -17,7 +17,7 @@
     <% end %>
     <%= display_answered_questions_summary(subsection, @case_log) %>
 
-    <%= render partial: 'form/check_answers_summary_list', locals: {
+    <%= render partial: "form/check_answers_summary_list", locals: {
       subsection:,
       case_log: @case_log,
     } %>

app/views/form/review.html.erb

@@ -1,8 +1,8 @@
 <% content_for :title, "Review lettings log" %>
 <% content_for :breadcrumbs, govuk_breadcrumbs(breadcrumbs: {
   "Logs" => "/logs",
-  "Log #{@case_log.id.to_s}" => "/logs/" + @case_log.id.to_s,
+  "Log #{@case_log.id}" => "/logs/#{@case_log.id}",
-  "Review lettings log" => ""
+  "Review lettings log" => "",
 }) %>
 
 <div class="govuk-grid-row">
@@ -21,7 +21,7 @@
             <h3 class="x-govuk-summary-card__title"><%= subsection.label %></h3>
           </div>
           <div class="x-govuk-summary-card__body">
-            <%= render partial: 'form/check_answers_summary_list', locals: {
+            <%= render partial: "form/check_answers_summary_list", locals: {
               subsection:,
               case_log: @case_log,
             } %>

app/views/layouts/application.html.erb

@@ -45,7 +45,7 @@
     <%= govuk_header(
       classes: "app-header",
       service_url: current_user.nil? ? "/" : "/logs",
-      navigation_classes: "govuk-header__navigation--end"
+      navigation_classes: "govuk-header__navigation--end",
     ) do |component|
       component.product_name(name: t("service_name"))
       if current_user.nil?

lib/tasks/lint.rake

@@ -0,0 +1,17 @@
+desc "Run Rubocop"
+task rubocop: :environment do
+  sh "bundle exec rubocop"
+end
+
+desc "Run ERB Lint"
+task erblint: :environment do
+  sh "bundle exec erblint --lint-all"
+end
+
+desc "Run Stylelint"
+task stylelint: :environment do
+  sh "yarn stylelint app/frontend/styles"
+end
+
+desc "Run all the linters"
+task lint: %i[rubocop erblint stylelint]

package.json

@@ -37,7 +37,9 @@
   },
   "version": "0.1.0",
   "devDependencies": {
-    "are-you-es5": "^2.1.2"
+    "are-you-es5": "^2.1.2",
+    "stylelint": "^14.7.1",
+    "stylelint-config-gds": "^0.2.0"
   },
   "browserslist": {
     "production": [
@@ -51,6 +53,9 @@
       "last 1 safari version"
     ]
   },
+  "stylelint": {
+    "extends": "stylelint-config-gds/scss"
+  },
   "scripts": {
     "build": "webpack --config webpack.config.js"
   }