From fc0ef05dc98554dc61704343f07f67176b9cfe82 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 2 Dec 2021 17:40:32 +0000 Subject: [PATCH 1/3] Remove 'base' import from files in core layer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Importing files from this layer without first importing the 'base' file was deprecated in #1807. Anyone who was relying on the import should already be seeing warnings. If this change affects them, they'll just need to ensure they're importing the base layer first. This is part of a change to the way that the base layers (settings, tools and helpers) are imported within different parts of GOV.UK Frontend’s Sass, designed to reduce the time it takes to compile the Sass to CSS. Remove the tests, which were only checking that the deprecation warning was emitted as expected. --- src/govuk/core/_global-styles.scss | 6 ------ src/govuk/core/_links.scss | 6 ------ src/govuk/core/_lists.scss | 6 ------ src/govuk/core/_section-break.scss | 6 ------ src/govuk/core/_template.scss | 6 ------ src/govuk/core/_typography.scss | 6 ------ src/govuk/core/core.test.js | 31 ------------------------------ 7 files changed, 67 deletions(-) delete mode 100644 src/govuk/core/core.test.js diff --git a/src/govuk/core/_global-styles.scss b/src/govuk/core/_global-styles.scss index 0131eee1dd..20d043a003 100644 --- a/src/govuk/core/_global-styles.scss +++ b/src/govuk/core/_global-styles.scss @@ -1,9 +1,3 @@ -@if not mixin-exists("govuk-exports") { - @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0."; -} - -@import "../base"; - @import "links"; @import "typography"; diff --git a/src/govuk/core/_links.scss b/src/govuk/core/_links.scss index 3c10924527..0cc378ad36 100644 --- a/src/govuk/core/_links.scss +++ b/src/govuk/core/_links.scss @@ -1,9 +1,3 @@ -@if not mixin-exists("govuk-exports") { - @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0."; -} - -@import "../base"; - @include govuk-exports("govuk/core/links") { %govuk-link { diff --git a/src/govuk/core/_lists.scss b/src/govuk/core/_lists.scss index 6412130353..7afb5584b6 100644 --- a/src/govuk/core/_lists.scss +++ b/src/govuk/core/_lists.scss @@ -1,9 +1,3 @@ -@if not mixin-exists("govuk-exports") { - @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0."; -} - -@import "../base"; - @include govuk-exports("govuk/core/lists") { %govuk-list { diff --git a/src/govuk/core/_section-break.scss b/src/govuk/core/_section-break.scss index 7104e1818e..a316d31bf7 100644 --- a/src/govuk/core/_section-break.scss +++ b/src/govuk/core/_section-break.scss @@ -1,9 +1,3 @@ -@if not mixin-exists("govuk-exports") { - @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0."; -} - -@import "../base"; - @include govuk-exports("govuk/core/section-break") { %govuk-section-break { diff --git a/src/govuk/core/_template.scss b/src/govuk/core/_template.scss index 1c003a8f22..d0f87d0a52 100644 --- a/src/govuk/core/_template.scss +++ b/src/govuk/core/_template.scss @@ -1,9 +1,3 @@ -@if not mixin-exists("govuk-exports") { - @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0."; -} - -@import "../base"; - @include govuk-exports("govuk/core/template") { // Applied to the element diff --git a/src/govuk/core/_typography.scss b/src/govuk/core/_typography.scss index ad56961b9f..db5bf99559 100644 --- a/src/govuk/core/_typography.scss +++ b/src/govuk/core/_typography.scss @@ -1,9 +1,3 @@ -@if not mixin-exists("govuk-exports") { - @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0."; -} - -@import "../base"; - @include govuk-exports("govuk/core/typography") { // Headings diff --git a/src/govuk/core/core.test.js b/src/govuk/core/core.test.js deleted file mode 100644 index 351cc370fa..0000000000 --- a/src/govuk/core/core.test.js +++ /dev/null @@ -1,31 +0,0 @@ -/* eslint-env jest */ - -const sass = require('node-sass') - -const glob = require('glob') -const { renderSass } = require('../../../lib/jest-helpers') -const configPaths = require('../../../config/paths.json') - -const sassFiles = glob.sync(`${configPaths.src}/core/**/*.scss`) - -it.each(sassFiles)('%s renders with a deprecation warning', (file) => { - // Create a mock warn function that we can use to override the native @warn - // function, that we can make assertions about post-render. - const mockWarnFunction = jest.fn() - .mockReturnValue(sass.NULL) - - return renderSass({ - file: file, - functions: { - '@warn': mockWarnFunction - } - }).then(() => { - // Expect our mocked @warn function to have been called once with a single - // argument, which should be the deprecation notice - return expect(mockWarnFunction.mock.calls[0][0].getValue()) - .toEqual( - 'Importing items from the core layer without first importing `base` ' + - 'is deprecated, and will no longer work as of GOV.UK Frontend v4.0.' - ) - }) -}) From 445432ada610251e3a327b779b3df916cc3349cb Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 2 Dec 2021 17:41:49 +0000 Subject: [PATCH 2/3] Remove 'base' import from files in overrides layer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Importing files from this layer without first importing the 'base' file was deprecated in #1807. Anyone who was relying on the import should already be seeing warnings. If this change affects them, they'll just need to ensure they're importing the base layer first. This is part of a change to the way that the base layers (settings, tools and helpers) are imported within different parts of GOV.UK Frontend’s Sass, designed to reduce the time it takes to compile the Sass to CSS. Remove the tests, which were only checking that the deprecation warning was emitted as expected. --- src/govuk/overrides/_display.scss | 6 ------ src/govuk/overrides/_spacing.scss | 6 ------ src/govuk/overrides/_text-align.scss | 6 ------ src/govuk/overrides/_typography.scss | 6 ------ src/govuk/overrides/_width.scss | 6 ------ src/govuk/overrides/overrides.test.js | 31 --------------------------- 6 files changed, 61 deletions(-) delete mode 100644 src/govuk/overrides/overrides.test.js diff --git a/src/govuk/overrides/_display.scss b/src/govuk/overrides/_display.scss index 78951d3481..a8b741fd66 100644 --- a/src/govuk/overrides/_display.scss +++ b/src/govuk/overrides/_display.scss @@ -1,9 +1,3 @@ -@if not mixin-exists("govuk-exports") { - @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0."; -} - -@import "../base"; - // stylelint-disable declaration-no-important @include govuk-exports("govuk/overrides/display") { .govuk-\!-display-inline { diff --git a/src/govuk/overrides/_spacing.scss b/src/govuk/overrides/_spacing.scss index 7f54fe0244..7c21fa64d8 100644 --- a/src/govuk/overrides/_spacing.scss +++ b/src/govuk/overrides/_spacing.scss @@ -1,9 +1,3 @@ -@if not mixin-exists("govuk-exports") { - @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0."; -} - -@import "../base"; - //// /// @group overrides //// diff --git a/src/govuk/overrides/_text-align.scss b/src/govuk/overrides/_text-align.scss index 90647a5455..0a18658643 100644 --- a/src/govuk/overrides/_text-align.scss +++ b/src/govuk/overrides/_text-align.scss @@ -1,9 +1,3 @@ -@if not mixin-exists("govuk-exports") { - @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0."; -} - -@import "../base"; - // stylelint-disable declaration-no-important @include govuk-exports("govuk/overrides/text-align") { .govuk-\!-text-align-left { diff --git a/src/govuk/overrides/_typography.scss b/src/govuk/overrides/_typography.scss index 9541f308a7..56069ec1ab 100644 --- a/src/govuk/overrides/_typography.scss +++ b/src/govuk/overrides/_typography.scss @@ -1,9 +1,3 @@ -@if not mixin-exists("govuk-exports") { - @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0."; -} - -@import "../base"; - @include govuk-exports("govuk/overrides/typography") { // Font size and line height diff --git a/src/govuk/overrides/_width.scss b/src/govuk/overrides/_width.scss index a498cf000e..2d87a6ec02 100644 --- a/src/govuk/overrides/_width.scss +++ b/src/govuk/overrides/_width.scss @@ -1,9 +1,3 @@ -@if not mixin-exists("govuk-exports") { - @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0."; -} - -@import "../base"; - // stylelint-disable declaration-no-important @include govuk-exports("govuk/overrides/width") { .govuk-\!-width-full { diff --git a/src/govuk/overrides/overrides.test.js b/src/govuk/overrides/overrides.test.js deleted file mode 100644 index d83d68d3fe..0000000000 --- a/src/govuk/overrides/overrides.test.js +++ /dev/null @@ -1,31 +0,0 @@ -/* eslint-env jest */ - -const sass = require('node-sass') - -const glob = require('glob') -const { renderSass } = require('../../../lib/jest-helpers') -const configPaths = require('../../../config/paths.json') - -const sassFiles = glob.sync(`${configPaths.src}/overrides/**/*.scss`) - -it.each(sassFiles)('%s renders with a deprecation warning', (file) => { - // Create a mock warn function that we can use to override the native @warn - // function, that we can make assertions about post-render. - const mockWarnFunction = jest.fn() - .mockReturnValue(sass.NULL) - - return renderSass({ - file: file, - functions: { - '@warn': mockWarnFunction - } - }).then(() => { - // Expect our mocked @warn function to have been called once with a single - // argument, which should be the deprecation notice - return expect(mockWarnFunction.mock.calls[0][0].getValue()) - .toEqual( - 'Importing items from the overrides layer without first importing ' + - '`base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.' - ) - }) -}) From 5050b3ffefd858b01824dcb38145cb7b64bc958e Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 3 Dec 2021 09:58:33 +0000 Subject: [PATCH 3/3] Document in CHANGELOG --- CHANGELOG.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d35c29431..9365a2aa68 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -136,6 +136,19 @@ If you're passing custom HTML into the cookie banner component (for example, usi This change was introduced in [pull request #2432: Remove default font styles from cookie banner Sass](https://github.com/alphagov/govuk-frontend/pull/2432). +#### Import 'base' before importing Sass files from `core` or `overrides` layers + +If you import individual files from the `core` or `overrides` layers, you might see the error `Undefined mixin 'govuk-exports'` or `no mixin named govuk-exports` when compiling your Sass. + +To fix the error, import `node_modules/govuk-frontend/govuk/base` first. For example: + +```scss +@import "node_modules/govuk-frontend/govuk/base"; +@import "node_modules/govuk-frontend/core/typography"; +``` + +This change was introduced in [pull request #2455: Remove 'base' import from files in `core` and `overrides` layers](https://github.com/alphagov/govuk-frontend/pull/2455). + ### Optional changes We've recently made some other changes to GOV.UK Frontend. While these are not breaking changes, implementing them will make your service work better.