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(
-      #{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)}
-    );
+    max-width: calc(#{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,
-  & ::after {
+  .govuk-radios__label:before,
+  & :after {
     color: govuk-colour("black");
     border-color: govuk-colour("black");
     background-color: govuk-colour("white");

app/frontend/styles/_primary-navigation.scss

@@ -1,69 +1,69 @@
 .app-primary-navigation {
-    @include govuk-font(19, $weight: bold);
-    background-color: govuk-colour("light-grey");
-    border-bottom: 1px solid $govuk-border-colour;
-  }
+  @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 {
-    margin-top: -1px;
-  }
+.govuk-phase-banner + .app-primary-navigation {
+  margin-top: -1px;
+}
 
-  .app-primary-navigation__list {
-    @include govuk-clearfix;
-    left: govuk-spacing(-3);
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    right: govuk-spacing(-3);
-    width: calc(100% + #{govuk-spacing(6)});
-  }
+.app-primary-navigation__list {
+  @include govuk-clearfix;
+  left: govuk-spacing(-3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  right: govuk-spacing(-3);
+  width: calc(100% + #{govuk-spacing(6)});
+}
 
-  .app-primary-navigation__item {
-    box-sizing: border-box;
-    display: block;
-    float: left;
-    line-height: 50px;
-    height: 50px;
-    padding: 0 govuk-spacing(3);
-    position: relative;
-  }
+.app-primary-navigation__item {
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  line-height: 50px;
+  height: 50px;
+  padding: 0 govuk-spacing(3);
+  position: relative;
+}
 
-  .app-primary-navigation__item--current {
-    border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
+.app-primary-navigation__item--current {
+  border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
 
-    &:hover {
-      border-bottom-color: $govuk-link-hover-colour;
-    }
+  &:hover {
+    border-bottom-color: $govuk-link-hover-colour;
+  }
 
-    &:active {
-      border-bottom-color: $govuk-link-active-colour;
-    }
+  &:active {
+    border-bottom-color: $govuk-link-active-colour;
   }
+}
 
-  .app-primary-navigation__item--align-right {
-    @include govuk-media-query($from: tablet) {
-      float: right;
-    }
+.app-primary-navigation__item--align-right {
+  @include govuk-media-query($from: tablet) {
+    float: right;
   }
+}
 
-  .app-primary-navigation__link {
-    @include govuk-link-common;
-    @include govuk-link-style-no-visited-state;
-    @include govuk-link-style-no-underline;
-    @include govuk-typography-weight-bold;
+.app-primary-navigation__link {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+  @include govuk-link-style-no-underline;
+  @include govuk-typography-weight-bold;
 
-    // Extend the touch area of the link to the list
-    &:after {
-      bottom: 0;
-      content: "";
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
+  // Extend the touch area of the link to the list
+  &:after {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
   }
+}
 
-  .app-primary-navigation__item--current .app-primary-navigation__link:hover {
-    text-decoration: none;
-  }
+.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,
-  "Review lettings log" => ""
+  "Log #{@case_log.id}" => "/logs/#{@case_log.id}",
+  "Review lettings log" => "",
 }) %>
 
 <div class="govuk-grid-row">
@@ -13,15 +13,15 @@
     <p class="govuk-body">
       You can review and make changes to this log up to 3 months after the end of the current collection year, which closes on 31 March <%= @case_log.collection_start_year.present? ? @case_log.collection_start_year + 1 : "" %>.
     </p>
-    <% @case_log.form.sections.map do |section|  %>
+    <% @case_log.form.sections.map do |section| %>
       <h2 class="govuk-heading-m"><%= section.label %></h2>
-      <% section.subsections.map do |subsection|  %>
+      <% section.subsections.map do |subsection| %>
         <div class="x-govuk-summary-card govuk-!-margin-bottom-6">
           <div class="x-govuk-summary-card__header">
             <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?
@@ -68,14 +68,14 @@
       <% if current_user.support? %>
         <% items = [
           { name: "Organisations", url: "/organisations", comparable_urls: ["/details", "/organisations"] },
-          { name: "Users", url: "/users",  comparable_urls: ["/users", "/account"] },
-          { name: "Logs", url: case_logs_path,  comparable_urls: ["/logs"] },
+          { name: "Users", url: "/users", comparable_urls: ["/users", "/account"] },
+          { name: "Logs", url: case_logs_path, comparable_urls: ["/logs"] },
         ] %>
       <% else %>
         <% items = [
-          { name: "Logs", url: case_logs_path, comparable_urls: ["/logs"]  },
-          { name: "Users", url: users_organisation_path(current_user.organisation), comparable_urls: ["/users", "/account"]  },
-          { name: "About your organisation", url: "/organisations/#{current_user.organisation.id}", comparable_urls: ["/details"]  },
+          { name: "Logs", url: case_logs_path, comparable_urls: ["/logs"] },
+          { name: "Users", url: users_organisation_path(current_user.organisation), comparable_urls: ["/users", "/account"] },
+          { name: "About your organisation", url: "/organisations/#{current_user.organisation.id}", comparable_urls: ["/details"] },
         ] %>
       <% end %>
       <%= render PrimaryNavigationComponent.new(items:) %>

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"
   }