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.

Sign up for GitHub

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

Jump to bottom

Replace node-sass with Dart Sass #1269

Merged
merged 1 commit into from
Apr 1, 2022
+165 −1,572
Merged

Replace node-sass with Dart Sass #1269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
# Unreleased

## Fixes

- [Pull request #1269: Replace node-sass with Dart Sass](https://github.com/alphagov/govuk-prototype-kit/pull/1269). This should allow the kit to work on M1 Macs.

# 12.0.1 (Fix release)

## Recommended changes
Expand Down
24 changes: 18 additions & 6 deletions __tests__/spec/sanity-checks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
/* eslint-env jest */

const assert = require('assert')
const fs = require('fs')
const path = require('path')
const util = require('util')

const glob = require('glob')
const request = require('supertest')
const sass = require('node-sass')
const sass = require('sass')

const app = require('../../server.js')
const gulpConfig = require('../../gulp/config.json')
const utils = require('../../lib/utils')

const sassRender = util.promisify(sass.render)

function readFile (pathFromRoot) {
return fs.readFileSync(path.join(__dirname, '../../' + pathFromRoot), 'utf8')
}

/**
* Basic sanity checks on the dev server
*/
Expand Down Expand Up @@ -136,8 +135,21 @@ describe('The Prototype Kit', () => {
const sassFiles = glob.sync(gulpConfig.paths.assets + '/sass/*.scss')

describe(`${gulpConfig.paths.assets}sass/`, () => {
it.each(sassFiles)('%s renders to CSS without errors', (file) => {
return sassRender({ file: file })
it.each(sassFiles)('%s renders to CSS without errors', async (file) => {
return new Promise((resolve, reject) => {
sass.render({
file,
logger: sass.Logger.silent,
loadPaths: [path.resolve(__dirname, '..', '..')]
}, (err, result) => {
if (err) {
reject(err)
} else {
expect(result.css.length).toBeGreaterThan(1000)
resolve()
}
})
})
})
})

Expand Down
24 changes: 13 additions & 11 deletions app/assets/sass/patterns/_step-by-step-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// Based on https://github.com/alphagov/govuk_publishing_components/blob/v22.0.0/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss
// Note - this code for prototype purposes only. It is not production code.

@use "sass:math";

$stroke-width: 2px;
$stroke-width-large: 3px;
$number-circle-size: 26px;
Expand All @@ -19,12 +21,12 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");

@mixin step-nav-line-position {
left: 0;
margin-left: ($number-circle-size / 2) - ($stroke-width / 2);
margin-left: math.div($number-circle-size, 2) - math.div($stroke-width, 2);
}

@mixin step-nav-line-position-large {
left: 0;
margin-left: ($number-circle-size-large / 2) - ($stroke-width-large / 2);
margin-left: math.div($number-circle-size-large, 2) - math.div($stroke-width-large, 2);
border-width: $stroke-width-large;
}

Expand Down Expand Up @@ -141,8 +143,8 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
z-index: 6;
bottom: 0;
left: 0;
margin-left: $number-circle-size / 4;
width: $number-circle-size / 2;
margin-left: math.div($number-circle-size, 4);
width: math.div($number-circle-size, 2);
height: 0;
border-bottom: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
}
Expand All @@ -163,8 +165,8 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
.app-step-nav--large & {
@include govuk-media-query($from: tablet) {
&:before {
margin-left: $number-circle-size-large / 4;
width: $number-circle-size-large / 2;
margin-left: math.div($number-circle-size-large, 4);
width: math.div($number-circle-size-large, 2);
border-width: $stroke-width-large;
}

Expand Down Expand Up @@ -329,7 +331,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");

.app-step-nav--large & {
@include govuk-media-query($from: tablet) {
margin-top: -govuk-spacing(3);
margin-top: - govuk-spacing(3);
}
}
}
Expand Down Expand Up @@ -395,9 +397,9 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
z-index: 5;
top: .6em; // position the dot to align with the first row of text in the link
left: -(govuk-spacing(6) + govuk-spacing(3));
margin-top: -($stroke-width / 2);
margin-left: ($number-circle-size / 2);
width: $number-circle-size / 2;
margin-top: - math.div($stroke-width, 2);
margin-left: math.div($number-circle-size, 2);
width: math.div($number-circle-size, 2);
height: $stroke-width;
background: govuk-colour("black");
}
Expand All @@ -406,7 +408,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
@include govuk-media-query($from: tablet) {
&:before {
left: -(govuk-spacing(9));
margin-left: ($number-circle-size-large / 2);
margin-left: math.div($number-circle-size-large, 2);
height: $stroke-width-large;
}
}
Expand Down
4 changes: 3 additions & 1 deletion app/assets/sass/patterns/_step-by-step-related.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// Based on https://github.com/alphagov/govuk_publishing_components/blob/v22.0.0/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-related.scss
// Note - this code for prototype purposes only. It is not production code.

@use "sass:math";

.app-step-nav-related {
@include govuk-text-colour;
border-top: 2px solid govuk-colour("blue");
Expand Down Expand Up @@ -32,7 +34,7 @@
}

.app-step-nav-related__pretitle {
margin-bottom: govuk-spacing(6) / 4;
margin-bottom: math.div(govuk-spacing(6), 4);
}
}

Expand Down
9 changes: 5 additions & 4 deletions gulp/sass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

const gulp = require('gulp')
const sass = require('gulp-sass')(require('node-sass'))
const sass = require('gulp-sass')(require('sass'))
const path = require('path')
const fs = require('fs')

Expand All @@ -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 }).on('error', function (error) {
// write a blank application.css to force browser refresh on error
if (!fs.existsSync(stylesheetDirectory)) {
fs.mkdirSync(stylesheetDirectory)
Expand All @@ -37,16 +37,17 @@ gulp.task('sass', function () {

gulp.task('sass-documentation', function () {
return gulp.src(config.paths.docsAssets + '/sass/*.scss', { sourcemaps: true })
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
.pipe(sass.sync({ outputStyle: 'expanded', logger: sass.compiler.Logger.silent }).on('error', sass.logError))
.pipe(gulp.dest(config.paths.public + '/stylesheets/', { sourcemaps: true }))
})

// Backward compatibility with Elements

gulp.task('sass-v6', function () {
return gulp.src(config.paths.v6Assets + '/sass/*.scss', { sourcemaps: true })
.pipe(sass({
.pipe(sass.sync({
outputStyle: 'expanded',
logger: sass.compiler.Logger.silent,
includePaths: [
'node_modules/govuk_frontend_toolkit/stylesheets',
'node_modules/govuk-elements-sass/public/sass',
Expand Down
Loading