feat(theme-tasks): default sass compiler to use dart sass and move node-sass as an external dependency

Author: bryceosterhaus

projects/js-themes-toolkit/packages/liferay-theme-tasks/package.json

@@ -30,7 +30,6 @@
 		"lodash": "^4.17.11",
 		"minimist": "^1.1.0",
 		"node-bourbon": "4.2.3",
-		"node-sass": "^6.0.1",
 		"npm-keyword": "^5.0.0",
 		"opn": "^5.4.0",
 		"package-json": "^5.0.0",
@@ -47,10 +46,11 @@
 	"description": "A set of tasks for building and deploying Liferay Portal themes.",
 	"devDependencies": {
 		"liferay-frontend-theme-styled": "6.0.6",
-		"liferay-frontend-theme-unstyled": "6.0.6"
+		"liferay-frontend-theme-unstyled": "6.0.6",
+		"node-sass": "^6.0.1"
 	},
 	"engines": {
-		"node": ">=8.0.0"
+		"node": ">=14.0.0"
 	},
 	"keywords": [
 		"liferay",

projects/js-themes-toolkit/packages/liferay-theme-tasks/theme/tasks/__tests__/build.test.js

@@ -122,6 +122,8 @@ describe('using lib_sass', () => {
 					sassOptions: (defaults) => {
 						sassOptionsCalled = true;
 
+						defaults.dartSass = false;
+
 						assertTruthy(defaults.includePaths);
 
 						return defaults;
@@ -152,7 +154,6 @@ describe('using lib_sass', () => {
 					distName: 'base-theme',
 					gulp: new Gulp(),
 					hookFn: buildHookFn,
-					sassOptions: {dartSass: true},
 				}),
 			namespace: 'dart_sass_build_task',
 			themeConfig: {},

projects/js-themes-toolkit/packages/liferay-theme-tasks/theme/tasks/__tests__/deploy.test.js

@@ -34,6 +34,9 @@ beforeEach(() => {
 			registerTasks({
 				distName: 'base-theme',
 				gulp: new Gulp(),
+				sassOptions: {
+					dartSass: false,
+				},
 			}),
 		namespace: 'deploy_task',
 		themeName: 'base-theme-7-2',

projects/js-themes-toolkit/packages/liferay-theme-tasks/theme/tasks/__tests__/kickstart.test.js

@@ -33,7 +33,11 @@ describe('globally installed theme', () => {
 
 	beforeEach(() => {
 		tempTheme = setupTempTheme({
-			init: () => registerTasks({gulp: new Gulp()}),
+			init: () =>
+				registerTasks({
+					gulp: new Gulp(),
+					sassOptions: {dartSass: false},
+				}),
 			namespace: 'kickstart_task_global',
 			themeName: 'base-theme',
 			version: '7.1',
@@ -96,7 +100,11 @@ describe('npm theme', () => {
 
 	beforeEach(() => {
 		tempTheme = setupTempTheme({
-			init: () => registerTasks({gulp: new Gulp()}),
+			init: () =>
+				registerTasks({
+					gulp: new Gulp(),
+					sassOptions: {dartSass: false},
+				}),
 			namespace: 'kickstart_task_npm',
 		});
 

projects/js-themes-toolkit/packages/liferay-theme-tasks/theme/tasks/__tests__/status.test.js

@@ -14,7 +14,8 @@ let tempTheme;
 
 beforeEach(() => {
 	tempTheme = setupTempTheme({
-		init: () => registerTasks({gulp: new Gulp()}),
+		init: () =>
+			registerTasks({gulp: new Gulp(), sassOptions: {dartSass: false}}),
 		namespace: 'status_task',
 	});
 });

projects/js-themes-toolkit/packages/liferay-theme-tasks/theme/tasks/build/compile-css.js

@@ -35,15 +35,28 @@ module.exports = function () {
 		const {options} = project;
 
 		const sassOptions = getSassOptions(options.sassOptions, {
-			dartSass: false,
+			dartSass: true,
 			includePaths: getSassIncludePaths(),
 			sourceMap: true,
 		});
 
+		let nodeSass;
+
+		if (!sassOptions.dartSass) {
+			try {
+				nodeSass = require('node-sass');
+			}
+			catch (_error) {
+				console.error(
+					'`node-sass` is not found. Try installing it first `npm install node-sass`.'
+				);
+			}
+		}
+
 		const gulpIf = require('gulp-if');
 		const gulpSass = sassOptions.dartSass
 			? require('./sass')
-			: require('gulp-sass')(require('node-sass'));
+			: require('gulp-sass')(nodeSass);
 		const gulpSourceMaps = require('gulp-sourcemaps');
 
 		const postCSSOptions = getPostCSSOptions(options.postcss);