Update linting to use Stylelint v15 and Prettier (#179)

* `stylelint-config-gds` has been updated to v1.0.0 to support Stylelint v15 * Stylelint v15 [deprecated its stylistic rules](https://stylelint.io/migration-guide/to-15), and recommends using Prettier to format (S)CSS This PR updates Stylelint dependencies, and adds Prettier to format all code, except JavaScript which is formatted using StandardJS. This is the same approach used by `govuk-frontend` (broadly speaking).
x-govuk · Nov 13, 2023 · 00166d0 · 00166d0
1 parent 5cfb5ee
commit 00166d0
Show file tree

Hide file tree

Showing 22 changed files with 207 additions and 160 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -1,10 +1,10 @@
 version: 2
 updates:
-  - package-ecosystem: "github-actions"
-    directory: "/"
+  - package-ecosystem: 'github-actions'
+    directory: '/'
     schedule:
-      interval: "monthly"
-  - package-ecosystem: "npm"
-    directory: "/"
+      interval: 'monthly'
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "monthly"
+      interval: 'monthly'
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -23,16 +23,16 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-    - name: Setup Pages
-      uses: actions/configure-pages@v3
-    - name: Install dependencies
-      run: npm ci
-    - name: Build with Eleventy
-      run: npm run-script build
-    - name: Upload artifact
-      uses: actions/upload-pages-artifact@v2
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Install dependencies
+        run: npm ci
+      - name: Build with Eleventy
+        run: npm run-script build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
 
   deploy:
     environment:

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: '${{ steps.nvm.outputs.NVMRC }}'
           cache: 'npm'
 
       - name: Install dependencies

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+# JavaScript (formatted with Standard)
+**/*.js
+**/*.mjs
diff --git a/README.md b/README.md
@@ -4,16 +4,16 @@ Build documentation websites using Markdown and GOV.UK styles.
 
 You’re welcome to use the plugin even if your service isn’t considered part of GOV.UK, but your site or service must not:
 
-* identify itself as being part of GOV.UK
-* use the crown or GOV.UK logotype in the header
-* use the GDS Transport typeface
-* suggest that it’s an official UK government website if it’s not
+- identify itself as being part of GOV.UK
+- use the crown or GOV.UK logotype in the header
+- use the GDS Transport typeface
+- suggest that it’s an official UK government website if it’s not
 
 ## Requirements
 
-* [Node.js](https://nodejs.org) v16.0.0 or above
-* [npm CLI](https://docs.npmjs.com/cli) v8.0.0 or above
-* [Eleventy](https://www.11ty.dev) v2.0.0 or above
+- [Node.js](https://nodejs.org) v16.0.0 or above
+- [npm CLI](https://docs.npmjs.com/cli) v8.0.0 or above
+- [Eleventy](https://www.11ty.dev) v2.0.0 or above
 
 ## Installation
 

diff --git a/components/link/_link.scss b/components/link/_link.scss
@@ -13,7 +13,7 @@
     font-variant: all-small-caps;
     font-weight: normal;
     margin-left: govuk-spacing(1);
-    opacity: .5;
+    opacity: 0.5;
   }
 }
 

diff --git a/components/prose-scope/_prose-scope.scss b/components/prose-scope/_prose-scope.scss
@@ -34,11 +34,11 @@
   }
 
   sup {
-    top: -.4em;
+    top: -0.4em;
   }
 
   sub {
-    bottom: -.4em;
+    bottom: -0.4em;
   }
 
   img {
@@ -56,7 +56,7 @@
     // Show outline around linked images within figures
     img {
       display: block;
-      outline: 1px solid rgba($govuk-border-colour, .5);
+      outline: 1px solid rgba($govuk-border-colour, 0.5);
     }
 
     > .govuk-link img {

diff --git a/components/site-search/_site-search.scss b/components/site-search/_site-search.scss
@@ -115,7 +115,7 @@ $icon-size: 40px;
 }
 
 .app-site-search__menu--overlay {
-  box-shadow: rgba(govuk-colour("black"), .25) 0 2px 6px;
+  box-shadow: rgba(govuk-colour("black"), 0.25) 0 2px 6px;
   left: 0;
   position: absolute;
   top: 100%;

diff --git a/docs/get-started.md b/docs/get-started.md
@@ -9,23 +9,23 @@ You can use this plugin to create and publish documentation and other simple web
 
 This plugin includes the following features:
 
-* a set of [layouts](../layouts) that use [`govuk-frontend`](https://github.com/alphagov/govuk-frontend) components and styles
+- a set of [layouts](../layouts) that use [`govuk-frontend`](https://github.com/alphagov/govuk-frontend) components and styles
 
-* includes [`markdown-it-govuk`](https://github.com/x-govuk/markdown-it-govuk) to ensure pages uses the same typography and styles as those used on GOV.UK
+- includes [`markdown-it-govuk`](https://github.com/x-govuk/markdown-it-govuk) to ensure pages uses the same typography and styles as those used on GOV.UK
 
-* support for an [extended Markdown syntax](../markdown-advanced)
+- support for an [extended Markdown syntax](../markdown-advanced)
 
-* [full configuration](../options) of your website’s header and footer
+- [full configuration](../options) of your website’s header and footer
 
-* site search
+- site search
 
-* SCSS compilation (for any files with the `.scss` extension)
+- SCSS compilation (for any files with the `.scss` extension)
 
 ## Requirements
 
-* [Node.js](https://nodejs.org/en/) v16.0.0 or above
-* [npm CLI](https://docs.npmjs.com/cli) v8.0.0 or above
-* [Eleventy](https://www.11ty.dev) v2.0.0 or above
+- [Node.js](https://nodejs.org/en/) v16.0.0 or above
+- [npm CLI](https://docs.npmjs.com/cli) v8.0.0 or above
+- [Eleventy](https://www.11ty.dev) v2.0.0 or above
 
 [Node version manager](https://github.com/nvm-sh/nvm) is recommended if you are working across multiple projects that use different versions of Node.js.
 
@@ -97,11 +97,11 @@ The first page in your site should also have a `homepage` value set to `true`[^1
 
 [^1]: Using `homepage: true` is equivalent to writing the following:
 
-      ```yaml
-      eleventyComputed:
-        eleventyNavigation:
-          key: "{% raw %}{{ config.homeKey }}{% endraw %}"
-      ```
+    ```yaml
+    eleventyComputed:
+      eleventyNavigation:
+        key: "{% raw %}{{ config.homeKey }}{% endraw %}"
+    ```
 
 Open the preview URL in your browser to see this new page appear using GOV.UK styles.
 
@@ -111,6 +111,6 @@ This plugin provides {{ collections.layout | length }} different layouts, each w
 
 {% for page in collections.layout %}
 
-* [{{ page.data.title }}]({{ page.url | url }}) – {{ page.data.description }}
+- [{{ page.data.title }}]({{ page.url | url }}) – {{ page.data.description }}
 
 {% endfor %}
diff --git a/docs/includes/front-matter-options.md b/docs/includes/front-matter-options.md
@@ -1,41 +1,41 @@
 Use these options to customise the appearance, content and behaviour of any layout.
 
-| Name | Type | Description |
-| :--- | :--- | :---------- |
-| **layout** | string | Page layout. |
-| **includeInBreadcrumbs** | boolean | Include page as the last item in any breadcrumbs. Default is `false`. |
-| **order** | number | Ranking of page in navigation. Lower numbers appear before pages with a higher number. |
-| **title** | string | Page title. |
-| **description** | string | Page description. |
-| **opengraphImage** | object | Open Graph image that appears on social media networks. |
-| **opengraphImage.src** | string | Path to Open Graph image. Can be a relative or absolute URL. This value overrides `opengraphImageUrl` in plugin options. |
-| **opengraphImage.alt** | string | Alternative text for Open Graph image. |
-| **aside** | object | Small portion of content that is indirectly related to the main content. |
-| **aside.title** | string | Title for aside. |
-| **aside.content** | string | Content for aside. Accepts Markdown. |
-| **related** | object | Related links. See [related](#options-for-related). |
+| Name                     | Type    | Description                                                                                                              |
+| :----------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------- |
+| **layout**               | string  | Page layout.                                                                                                             |
+| **includeInBreadcrumbs** | boolean | Include page as the last item in any breadcrumbs. Default is `false`.                                                    |
+| **order**                | number  | Ranking of page in navigation. Lower numbers appear before pages with a higher number.                                   |
+| **title**                | string  | Page title.                                                                                                              |
+| **description**          | string  | Page description.                                                                                                        |
+| **opengraphImage**       | object  | Open Graph image that appears on social media networks.                                                                  |
+| **opengraphImage.src**   | string  | Path to Open Graph image. Can be a relative or absolute URL. This value overrides `opengraphImageUrl` in plugin options. |
+| **opengraphImage.alt**   | string  | Alternative text for Open Graph image.                                                                                   |
+| **aside**                | object  | Small portion of content that is indirectly related to the main content.                                                 |
+| **aside.title**          | string  | Title for aside.                                                                                                         |
+| **aside.content**        | string  | Content for aside. Accepts Markdown.                                                                                     |
+| **related**              | object  | Related links. See [related](#options-for-related).                                                                      |
 
 ### Options for related
 
 With one section:
 
-| Name | Type | Description |
-| :--- | :--- | :---------- |
-| **title** | string | Title for group of related links. Default is `'Related content'`. |
-| **items** | array | See [items](#options-for-items). |
-| **subsections** | array | Title for sub-group of related links. |
-| **subsections.title** | string | |
-| **subsections.items** | array | See [items](#options-for-items). |
+| Name                  | Type   | Description                                                       |
+| :-------------------- | :----- | :---------------------------------------------------------------- |
+| **title**             | string | Title for group of related links. Default is `'Related content'`. |
+| **items**             | array  | See [items](#options-for-items).                                  |
+| **subsections**       | array  | Title for sub-group of related links.                             |
+| **subsections.title** | string |                                                                   |
+| **subsections.items** | array  | See [items](#options-for-items).                                  |
 
 With multiple sections:
 
-| Name | Type | Description |
-| :--- | :--- | :---------- |
+| Name         | Type  | Description                        |
+| :----------- | :---- | :--------------------------------- |
 | **sections** | array | See [items](#options-for-related). |
 
 ### Options for items
 
-| Name | Type | Description |
-| :--- | :--- | :---------- |
-| **text** | string | Title of related content. |
+| Name     | Type   | Description                   |
+| :------- | :----- | :---------------------------- |
+| **text** | string | Title of related content.     |
 | **href** | string | Link for the related content. |
diff --git a/docs/index.md b/docs/index.md
@@ -11,6 +11,7 @@ startButton:
 eleventyComputed:
   title: "{{ pkg.description }}"
 ---
+
 <div class="govuk-grid-row">
 {% for item in collections.homepage %}
   <section class="govuk-grid-column-one-third-from-desktop govuk-!-margin-bottom-8">

diff --git a/docs/layouts.md b/docs/layouts.md
@@ -4,9 +4,10 @@ order: 3
 title: Layouts
 description: The plugin offers a number of layouts to match the type of content you want write.
 ---
+
 {% for page in collections.layout %}
 
-* [{{ page.data.title }}]({{ page.url | url }}) – {{ page.data.description }}
+- [{{ page.data.title }}]({{ page.url | url }}) – {{ page.data.description }}
 
 {% endfor %}
 
@@ -31,7 +32,7 @@ module.exports = function(eleventyConfig) {
 };
 ```
 
-If you want to use your own layouts, remove this value and set a value for [`dir.includes`](https://www.11ty.dev/docs/config/#directory-for-includes) (and optionally [`dir.layouts`](https://www.11ty.dev/docs/config/#directory-for-layouts-(optional))).
+If you want to use your own layouts, remove this value and set a value for [`dir.includes`](https://www.11ty.dev/docs/config/#directory-for-includes) (and optionally [`dir.layouts`](<https://www.11ty.dev/docs/config/#directory-for-layouts-(optional)>)).
 
 You can use layouts provided by this plugin as a basis for your own. For example, to show a notification banner at the top of a page, extend the `page` layout:
 
@@ -45,7 +46,7 @@ You can use layouts provided by this plugin as a basis for your own. For example
 {% block content %}
   {# Templates can include front matter data #}
   {{ govukNotificationBanner({
-    text: "This page was last reviewed on " + (reviewed | date("d LLLL y")) + ".  
+    text: "This page was last reviewed on " + (reviewed | date("d LLLL y")) + ".
     It needs to be reviewed again on " + (reviewAgain | date("d LLLL y")) + "."
   }) if reviewed and reviewAgain }}
 

diff --git a/docs/layouts/collection.md b/docs/layouts/collection.md
@@ -46,6 +46,7 @@ related:
           - text: Front matter data
             href: https://www.11ty.dev/docs/data-frontmatter/
 ---
+
 Use front matter options to customise the appearance, content and behaviour of this layout.
 
 For example, this page has the following options:
@@ -82,7 +83,7 @@ example:
       description: What we learnt from our first round of user research.
 aside:
   title: Aside
-  content: | 
+  content: |
     A small portion of content that is **indirectly** related to the main content.
 related:
   sections:
@@ -108,7 +109,7 @@ related:
 
 In addition to the common front matter options, this layout also accepts the following options:
 
-| Name | Type | Description |
-| :--- | :--- | :---------- |
-| **paginationHeading** | string | Heading for the list of paginated pages. |
-| **pagination** | object | **Required.** Pages to show in the paginated list. Learn more about [pagination](https://www.11ty.dev/docs/pagination/) in the documentation for Eleventy. |
+| Name                  | Type   | Description                                                                                                                                                |
+| :-------------------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **paginationHeading** | string | Heading for the list of paginated pages.                                                                                                                   |
+| **pagination**        | object | **Required.** Pages to show in the paginated list. Learn more about [pagination](https://www.11ty.dev/docs/pagination/) in the documentation for Eleventy. |
diff --git a/docs/layouts/page.md b/docs/layouts/page.md
@@ -21,6 +21,7 @@ related:
           - text: Front matter data
             href: https://www.11ty.dev/docs/data-frontmatter/
 ---
+
 Use front matter options to customise the appearance, content and behaviour of this layout.
 
 For example, this page has the following options:
@@ -32,7 +33,7 @@ title: Page
 description: Simple layout designed for maximum flexibility of content.
 aside:
   title: Aside
-  content: | 
+  content: |
     A small portion of content that is **indirectly** related to the main content.
 related:
   sections:

diff --git a/docs/layouts/post.md b/docs/layouts/post.md
@@ -35,6 +35,7 @@ related:
 tags:
   - example tag
 ---
+
 Use front matter options to customise the appearance, content and behaviour of this layout.
 
 For example, this page has the following options:
@@ -57,7 +58,7 @@ authors:
     url: https://www.gov.uk/government/history/past-prime-ministers/benjamin-disraeli-the-earl-of-beaconsfield
 aside:
   title: Aside
-  content: | 
+  content: |
     A small portion of content that is **indirectly** related to the main content.
 related:
   sections:
@@ -85,19 +86,19 @@ tags:
 
 In addition to the common front matter options, this layout also accepts the following options:
 
-| Name | Type | Description |
-| :--- | :--- | :---------- |
-| **author** | string&nbsp;or&nbsp;object | Post author. |
-| **author.name** | string | Name of post author. Overrides any single value given for author. |
-| **author.url** | string | URL for website of post author. |
-| **authors** | array | Post authors. Overrides any value(s) given for author. |
-| **authors.name** | string | Name of post author. |
-| **authors.url** | string | URL for website of post author. |
-| **date** | string | Date post was published. Use [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601), for example `{{ "now" | date("yyyy-MM-dd") }}`. |
-| **image** | object | Image shown above post content. |
-| **image.src** | string | Path to post image. |
-| **image.alt** | string | Alternative text for post image. |
-| **image.caption** | string | Caption shown below post image. |
-| **image.opengraphImage** | boolean | Whether image should also be used as the page’s Open Graph share image. |
-| **modified** | string | Date post was updated. Use [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601), for example `{{ "now" | date("yyyy-MM-dd") }}`. |
-| **tags** | Array | List of tags post relates to |
+| Name                     | Type                       | Description                                                                                                   |
+| :----------------------- | :------------------------- | :------------------------------------------------------------------------------------------------------------ | ----------------------- |
+| **author**               | string&nbsp;or&nbsp;object | Post author.                                                                                                  |
+| **author.name**          | string                     | Name of post author. Overrides any single value given for author.                                             |
+| **author.url**           | string                     | URL for website of post author.                                                                               |
+| **authors**              | array                      | Post authors. Overrides any value(s) given for author.                                                        |
+| **authors.name**         | string                     | Name of post author.                                                                                          |
+| **authors.url**          | string                     | URL for website of post author.                                                                               |
+| **date**                 | string                     | Date post was published. Use [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601), for example `{{ "now" | date("yyyy-MM-dd") }}`. |
+| **image**                | object                     | Image shown above post content.                                                                               |
+| **image.src**            | string                     | Path to post image.                                                                                           |
+| **image.alt**            | string                     | Alternative text for post image.                                                                              |
+| **image.caption**        | string                     | Caption shown below post image.                                                                               |
+| **image.opengraphImage** | boolean                    | Whether image should also be used as the page’s Open Graph share image.                                       |
+| **modified**             | string                     | Date post was updated. Use [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601), for example `{{ "now"   | date("yyyy-MM-dd") }}`. |
+| **tags**                 | Array                      | List of tags post relates to                                                                                  |