Skip to content

Use single compileStyles Sass helper function #2912

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

Merged
merged 1 commit into from
Oct 18, 2022
Merged
Changes from all commits
Commits
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
155 changes: 63 additions & 92 deletions tasks/gulp/compile-assets.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,110 +15,81 @@ const merge = require('merge-stream')
const rename = require('gulp-rename')

const configPaths = require('../../config/paths.js')
const { destination, isDist, isPublic } = require('../task-arguments.js')
const { destination, isDist, isPackage } = require('../task-arguments.js')

// Compile CSS and JS task --------------
// --------------------------------------

// Set the destination
const destinationPath = function () {
// Public & Dist directories not namespaced with `govuk`
if (isDist || isPublic) {
return destination
} else {
return `${destination}/govuk/`
}
}

const errorHandler = function (error) {
// Log the error to the console
console.error(error.message)

// Ensure the task we're running exits with an error code
this.once('finish', () => process.exit(1))
this.emit('end')
}

function compileStyles () {
const compileStylesheet = isDist ? configPaths.src + 'all.scss' : configPaths.app + 'assets/scss/app.scss'

return gulp.src(compileStylesheet)
.pipe(plumber(errorHandler))
.pipe(sass())
.pipe(gulpif(isDist,
rename({
basename: 'govuk-frontend',
extname: '.min.css'
})
))
.pipe(postcss())
.pipe(gulp.dest(`${destination}/`))
// Determine destination namespace
function destinationPath () {
return isPackage ? `${destination}/govuk` : destination
}

function compileOldIE () {
const compileOldIeStylesheet = isDist ? configPaths.src + 'all-ie8.scss' : configPaths.app + 'assets/scss/app-ie8.scss'

return gulp.src(compileOldIeStylesheet)
.pipe(plumber(errorHandler))
.pipe(sass())
.pipe(gulpif(isDist,
rename({
basename: 'govuk-frontend-ie8',
extname: '.min.css'
})
))
.pipe(postcss())
.pipe(gulp.dest(`${destination}/`))
}
gulp.task('scss:compile', function () {
/**
* Release distribution
*/
if (isDist) {
return merge(
compileStyles(
gulp.src(`${configPaths.src}all.scss`)
.pipe(rename({
basename: 'govuk-frontend',
extname: '.min.css'
}))),

compileStyles(
gulp.src(`${configPaths.src}all-ie8.scss`)
.pipe(rename({
basename: 'govuk-frontend-ie8',
extname: '.min.css'
})))
)
.pipe(gulp.dest(destination))
}

function compileLegacy () {
return gulp.src(path.join(configPaths.app, 'assets/scss/app-legacy.scss'))
.pipe(plumber(errorHandler))
.pipe(sass({
includePaths: ['node_modules/govuk_frontend_toolkit/stylesheets', 'node_modules']
}))
.pipe(postcss())
.pipe(gulp.dest(`${destination}/`))
}
/**
* Review application
*/
return merge(
compileStyles(
gulp.src(`${configPaths.app}assets/scss/app?(-ie8).scss`)),

compileStyles(
gulp.src(`${configPaths.app}assets/scss/app-legacy?(-ie8).scss`), {
includePaths: ['node_modules/govuk_frontend_toolkit/stylesheets', 'node_modules']
}),

compileStyles(
gulp.src(`${configPaths.fullPageExamples}**/styles.scss`)
.pipe(rename((path) => {
path.basename = path.dirname
path.dirname = 'full-page-examples'
})))
)
.pipe(gulp.dest(destinationPath()))
})

function compileLegacyIE () {
return gulp.src(path.join(configPaths.app, 'assets/scss/app-legacy-ie8.scss'))
.pipe(plumber(errorHandler))
.pipe(sass({
includePaths: ['node_modules/govuk_frontend_toolkit/stylesheets', 'node_modules']
/**
* Compile Sass to CSS
*
* @param {NodeJS.ReadWriteStream} stream - Input file stream
* @param {import('node-sass').Options} [options] - Sass options
* @returns {NodeJS.ReadWriteStream} Output file stream
*/
function compileStyles (stream, options = {}) {
return stream
.pipe(plumber((error) => {
console.error(error.message)

// Ensure the task we're running exits with an error code
this.once('finish', () => process.exit(1))
this.emit('end')
}))
.pipe(sass(options))
.pipe(postcss())
.pipe(gulp.dest(`${destination}/`))
}

function compileFullPageStyles () {
const compileFullPageExampleStylesheets = configPaths.fullPageExamples + '**/styles.scss'

return gulp.src(compileFullPageExampleStylesheets)
.pipe(plumber(errorHandler))
.pipe(sass())
.pipe(rename(function (location) {
location.basename = location.dirname
location.dirname = ''
}))
.pipe(gulp.dest(`${destination}/full-page-examples/`))
}

gulp.task('scss:compile', function (done) {
// Default tasks if compiling for dist
const tasks = [compileStyles(), compileOldIE()]

if (isPublic || !isDist) {
tasks.push(compileLegacy(), compileLegacyIE())

if (isPublic) {
tasks.push(compileFullPageStyles())
}
}

return Promise.all(tasks)
})

// Compile js task for preview ----------
// --------------------------------------
gulp.task('js:compile', () => {
Expand Down