Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace node-sass with Dart Sass #1269

Merged
merged 1 commit into from
Apr 1, 2022
Merged

Replace node-sass with Dart Sass #1269

merged 1 commit into from
Apr 1, 2022

Conversation

nataliecarey
Copy link
Contributor

@nataliecarey nataliecarey commented Mar 30, 2022

Fixes #1000

This replaces node-sass with Dart Sass. Node-sass is deprecated and does not officially support M1 Macs. Dart sass works on M1 Macs. Other than fixing the Prototype Kit on M1 Macs, there should be no change for users.

This PR also replaces division symbol / in Prototype Kit sass files with math.div as / is deprecated in Dart Sass.

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 30, 2022 12:37 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 30, 2022 13:24 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 30, 2022 13:41 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 30, 2022 15:13 Inactive
@govuk-design-system-ci govuk-design-system-ci requested a deployment to govuk-prototype-kit-pr-1269 March 30, 2022 15:13 Abandoned
@govuk-design-system-ci govuk-design-system-ci requested a deployment to govuk-prototype-kit-pr-1269 March 30, 2022 15:13 Abandoned
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 30, 2022 16:07 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 30, 2022 16:09 Inactive
@joelanman
Copy link
Contributor

not sure about showing warnings for Frontend when our users can't do anything about them, and the custom Logger adds a lot of code as opposed to using the documented Dart Sass silent option

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 30, 2022 18:07 Inactive
gulp/sass.js Outdated Show resolved Hide resolved
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 31, 2022 08:51 Inactive
@joelanman joelanman changed the title Replacing node-sass with Dart Sass. Replace node-sass with Dart Sass Mar 31, 2022
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 31, 2022 10:25 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 31, 2022 10:26 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 31, 2022 13:31 Inactive
Comment on lines 146 to 147
console.error('Found an error')
console.error(err)
Copy link
Member

@lfdebrux lfdebrux Mar 31, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can probably get rid of these lines right?

When I make the test fail by breaking the CSS I get a nicely formatted stack trace in the error output.

@lfdebrux
Copy link
Member

Is it worth adding a comment to the tests saying 'we don't know why this works, but it's the only thing we could find that did'?

@nataliecarey nataliecarey marked this pull request as ready for review March 31, 2022 16:00
@nataliecarey
Copy link
Contributor Author

@lfdebrux Re: comment

I'd rather leave it without that comment, at some point we'll either use the util.promisify function or completely change the test structure.

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 31, 2022 16:04 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 March 31, 2022 16:06 Inactive
gulp/sass.js Outdated
@@ -23,7 +23,7 @@ gulp.task('sass-extensions', function (done) {

gulp.task('sass', function () {
return gulp.src(config.paths.assets + '/sass/*.scss', { sourcemaps: true })
.pipe(sass({ outputStyle: 'expanded' }).on('error', function (error) {
.pipe(sass.sync({ outputStyle: 'expanded', logger: sass.compiler.Logger.silent }, false).on('error', function (error) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just checking what the false here is for? The other calls on this page don't have it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed it in #1272 because as far as I can tell sass.sync does not accept a second argument.

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-prototype-kit-pr-1269 April 1, 2022 09:11 Inactive
Copy link
Contributor

@joelanman joelanman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work everyone!

@nataliecarey nataliecarey merged commit 543cd4e into main Apr 1, 2022
@nataliecarey nataliecarey deleted the replace-node-sass branch April 1, 2022 09:16
@joelanman joelanman mentioned this pull request Apr 1, 2022
@lfdebrux lfdebrux mentioned this pull request May 3, 2022
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

New Macs with the M1 chip may have issues running the Prototype Kit
6 participants