v6.2.0

To install this version with npm, run npm install govuk-frontend@6.2.0. You can also find more information about how to stay up to date in our documentation.

New features

Use @use to include GOV.UK Frontend styles in Sass

You can now include GOV.UK Frontend as a Sass module with @use or @forward.

@import was deprecated in Dart Sass v1.88.0, and the Sass team will remove it in Dart Sass v3.0.0.

We also plan to deprecate and eventually remove support for @import from GOV.UK Frontend in future releases.

We recommend you migrate to using Sass modules instead of @import everywhere in your Sass, unless your service depends on other Sass libraries that use @import. Mixing @use and @import can lead to duplicated CSS or configuration not being applied due to how Sass loads the included stylesheets.

To include all the styles from GOV.UK Frontend in your compiled stylesheet, replace @import with @use in your Sass file:

// Previously
@import "node_modules/govuk-frontend/dist/govuk";

// Now
// Outputs GOV.UK Frontend's CSS (`@use`) and
// makes the Sass API available without namespacing (`as *`)
@use "node_modules/govuk-frontend/dist/govuk" as *;

To configure any of GOV.UK Frontend's settings when including it in your Sass file, you should now use a with clause listing each setting you want to modify to your @use rule:

// Previously
$govuk-assets-path: "/path/to/assets/";
@import "node_modules/govuk-frontend/dist/govuk";


// Now
@use "node_modules/govuk-frontend/dist/govuk" as * with (
  $govuk-assets-path: "/path/to/assets/"
);

You can also include specific parts of GOV.UK Frontend using Sass.

See the GOV.UK Frontend documentation for more information on including GOV.UK Frontend in your Sass build.

We made this change in pull request #6862: Migration to Sass modules.

Use shorter pkg: URLs to include individual files in Sass

You can now omit the dist/govuk part of the path when including GOV.UK Frontend in your Sass file with a pkg: URL:

// `@import` will soon be deprecated, so use`@use`
// Instead of `"pkg:govuk-frontend/dist/govuk/components/button"`
@use "pkg:govuk-frontend/components/button";

Warning

If you're using @import with pkg: URLs there's a known issue with how Sass loads pkg: URLs with @import.

We recommend you either:

• only use pkg: URLs with @use
• make sure to include index.import in the URLs you import (for example: @import "pkg:govuk-frontend/index.import")

You should migrate any existing uses of @import with pkg: in your service.

We made this change in pull request #6861: Resolve pkg: URLs from dist/govuk and update the review app.

Add custom classes and attributes to the File upload component's wrapper

We've introduced two new parameters to the File upload component's Nunjucks macro: wrapperClasses and wrapperAttributes.

These parameters allow you to define custom classes and HTML attributes for the wrapper of the improved version of the File upload component.

{{ govukFileUpload({
  javascript: true,
  wrapperClasses: "my-custom-class",
  wrapperAttributes: {
    "data-attribute": "value"
  }
}) }}

We made this change in pull request #6933: Code improvements to File upload component.

Recommended changes

Rename the govuk-drop-zone class on the improved File upload component

We've changed the class name of the element that wraps the improved File upload component from govuk-drop-zone to govuk-file-upload-wrapper. govuk-file-upload-wrapper better describes what the element does.

We've now deprecated the previous class name and will remove it in the next major version of GOV.UK Frontend.

If you're using our Nunjucks macros, you do not need to update anything.

We made this change in pull request #6933: Code improvements to File upload component.

Fixes

Error summary no longer outputs the styles for lists

The components/error-summary/_index.scss file was outputting CSS from core/lists, which is not part of the components layer. This was causing a duplication issue with Sass modules.

The components/error-summary/_index.scss file now only outputs the CSS for the Error summary component.

We made this change in pull request #6975: Update index to use all layers and refactor core (again) to avoid duplicated CSS.

Other fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #6831: Fix header link hover state in Safari
• #6925: Fix enhanced file upload lacking an error state
• #6959: Fix alignment of jewels and base in govuk-icon PNGs, thanks to @matteason for reporting and fixing this issue
• #7021: Fix small inputs activating hover style when hovering on non-clickable areas